总结
页面加载速度优化
优化图像和多媒体资源，以减少它们的文件大小。
图片压缩
参考：构建包大小优化
使用 Tree Shaking,Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码（没用到的代码）。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出。
使用浏览器缓存，以减少页面加载时间。
304缓存
参考：浏览器缓存
减少HTTP请求，合并和压缩CSS和JavaScript文件。
参考：升级http2
使用内容分发网络（CDN）来提供静态资源。
参考：升级http2
参考：CDN
使用异步加载技术来提高网页渲染速度。
异步懒加载加载路由 一.解决首屏问题我们用异步懒加载加载路由，这样我们大开一个页面的时候只打开公共部分和这个页面独立的部分。其次将大的包用异步分包的方式使用异步加载下来,这样首屏的时间大大降低。SSR这里的优势只有在js渲染HTML的这个时间，但是这个时间大多数情况下根本不是问题。
其他方式
代码层面
- 提取公共代码
- 分割代码为更小的块而不是大块代码,提升编译速度
心理上：比如骨架屏，loading动画
使用requestAnimationFrame 实现动画
requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。
大型应用为什么会慢?
网页性能问题大都出现在DOM节点频繁操作上
在构建复杂的大型应用的时候，各种页面之前的相互操作和更新很有可能会引起页面的回流或重绘，而频繁操作这些dom其实是非常消耗性能的:一个节点上的属性，可以看到一个节点上的属性是非常多的，在复杂应用中，操作这些属性的时候可能一不小心就会引起节点大量的更新
为什么JS长时间执行会影响交互响应、动画？
浏览器机制： JavaScript 引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待。
因为JavaScript在浏览器的主线程上运行，恰好与样式计算、布局以及许多情况下的绘制一起运行。
如果需要渲染的组件比较庞大，js执行会占据主线程时间较长，就会阻塞这些其他工作，会导致页面响应度变差，可能导致掉帧。用户可能会感觉到卡顿。
我们都知道浏览器渲染引擎是单线程的，在 React15.x 及之前版本，从 setState 开始到渲染完成整个过程是不受控制且连续不中断完成的，由于该过程将会占用整个线程，则其他任务都会被阻塞，如样式计算、界面布局以及许多情况下的绘制等。如果需要渲染的是一个很大、层级很深的组件，这可能就会使用户感觉明显卡顿，比如更新一个组件需要1毫秒，如果有200个组件要更新，那就需要200毫秒，在这200毫秒的更新过程中，浏览器唯一的主线程在专心运行更新操作，无暇去做其他任何事情。想象一下，在这200毫秒内，用户往一个input元素中输入点什么，敲击键盘也不会立即获得响应，虽然渲染输入按键结果是浏览器主线程的工作，但是浏览器主线程被React占用，抽不出空，最后的结果就是用户敲了按键看不到反应，等React更新过程结束之后，咔咔咔那些按键一下子出现在input元素里了，这个版本的调和器可以称为栈调和器（Stack Reconciler）。Stack Reconciler 的主要缺陷就是不能暂停渲染任务，也不能切分任务，更无法有效平衡组件更新渲染与动画相关任务间的执行顺序（即不能划分任务优先级），这样就很有可能导致重要任务卡顿，动画掉帧等问题。