Tim的资源站

一、JavaScript 的开销和如何缩短解析时间

JavaScript 的开销在哪里呢？

1. 加载
2. 解析&编译
3. 执行

JS和其他静态资源有较大差别，除了加载以外，它还需要解析、编译并执行，按照 reddit.com 的统计结果，JS 的处理过程所花费的时间大概能占到整个页面加载时间中的 10-30%。

参考：The cost of JavaScript in 2019

JavaScript 代码优化

1. 加载方面，除了一般性质的加载优化方法以外（比如说：压缩），JavaScript特有的方法主要是以下两点：
   • Code splitting 代码拆分，按需加载
   • Tree shaking 代码减重
2. 解析执行方面，主要是减少主线程的工作量
   • 避免长任务（W3C 性能组规定：执行时长大于 50ms 的任务，定义为长任务）
   • 避免超过1kb的行间脚本
   • 使用rAF和rIC进行时间调度

函数解析优化

1. lazy parsing 懒解析 vs eager parsing 饥饿解析
   饥饿解析可以提高函数的调用效率。
2. 利用 Optimize.js 优化初次加载时间

对象优化

1. 以相同顺序初始化对象成员，避免隐藏类的调整
2. 实例化后避免添加新属性
3. 尽量使用Array代替array-like对象
4. 避免读取超过数组的长度，否则会查找能够原型链
5. 避免元素类型的转换

二、HTML 优化

1. 减小 iframes 使用
2. 压缩空白符
3. 避免节点深层级嵌套
4. 避免Table布局
5. 删除注释
6. CSS&JS 尽量外链
7. 删除元素默认属性

三、CSS 优化

1. 利用 Chrome Dev Tools 测量 CSS 性能
   在 Performance 中查看 main 下的 样式计算时间。
2. 降低CSS对渲染的阻塞
3. 利用 GPU 进行完成动画
4. 使用 contain 属性
5. 使用 font-display 属性