DOM优化
- 在JS中对DOM进行访问的代价非常高。请尽可能减少访问DOM的次数（建议缓存DOM属性和元素、把DOM集合的长度缓存到变量中并在迭代中使用。读变量比读DOM的速度要快很多。）
- 重排与重绘的带家非常昂贵，如果操作需要进行多次重排和重绘，建议让元素脱离文档流，处理完毕后再让元素回归文档流，这样浏览器只会进行两次重排与重绘（脱离时和回归时）。
- 善于使用事件委托
静态资源优化
1.使用Brotli或Zopfli进行文本压缩；
2.图片优化
尽可能通过srcset，sizes和元素使用响应式图片。可以通过元素使用webP格式的图像。
3.优先加载关键CSS
CSS资源的加载对浏览器渲染影响很大，默认情况下浏览器只有在完成标签中css的加载与解析之后才会渲染页面。如果CSS文件过大，用户就需要等待很长的时间，才能够看到渲染的结果。针对这种情况，可以将首屏渲染为必须用到的CSS提取出来嵌套到中，然后再将剩余部分的CSS用异步的方式加载。可以通过Critical做到这一点。
要减小关键资源的大小，那么多小比较合适呢？HTTP的传输协议时TCP，TCP有一个慢启动的过程，即她在第一次传递数据时，只能同时传递14KB的数据块，所以当数据超过14KB时，TCP协议传递数据实际是多次的往返。
4.缓存
5.延迟javaScript非阻塞资源加载
构建优化
1.使用预编译
2.使用Tree-shaking 、Scope hoisting 、Code-splitting
Tree-shaking是一种在构建过程中清除无用代码的技术，使用Tree-shaking可以减少构建后文件的体积。
目前webpack与Rollup都支持Scope hoisting。它们可以检查import链，并尽可能的将散乱的模块放到一个函数中，前提是不能造成代码冗余。所以只有被引用了一次的模块才会被合并。使用Scope hoisting可以让代码体积更小并且可以降低代码在运行时的内存开销，同时它的运行速度更快。
Code-splitting是Webpack种最引人注目的特性之一，此特性能过把代码分离到不同的的bundle中，然后可以按需加载或并行加载这些文件。code-splitting可以用于获取更小的bundle,以及控制资源加载优先级，如果使用合理会极大影响加载时间。
3.服务端渲染SSR