性能优化（3）——代码优化

代码优化

一个项目对我们程序员而言，最熟悉的莫过于自己写出来的代码。既然这些代码是由我们编写出来的，那么代码层面的优化对我们来说，可控性是极强的。

作为性能优化专题，我们当然要从之前学的性能工具和指标文章分析一个项目。通过运行时间的占比，来真正了解到我们代码的比重如何。

这里我们以哔哩哔哩网站为例：

通过Performance工具的Summary，我们可以清晰的看到Scripting竟然占用了最高的比例！

通过Bottom-Up选项，我们可以看到某个具体时间段下，所有的具体的事件时间。

解决方案

项目优化

• Code splitting 代码拆分，按需加载
• Tree shaking 代码减重

函数优化

V8函数解析文章参考 使用Optimize.js解决问题（但是webpack5好像解决了这个问题，所有对于新版并没什么用处）

对象优化

• 以相同顺序初始化对象成员，避免隐藏类的调整

const car1 = { color: 'red' };
car1.seats = 4;

const car2 = { seats: 6 };
car2.color = 'green'

// 这对于v8引擎来说，两次的定义不能复用

• 实例化后避免添加新属性
• 尽量使用Array代替array-like对象
• 避免读取超过数组的长度（因为本身找不到，它会在原型链上查找，造成额外的开销）
• 避免元素类型的转换

HTML优化

大部分在webpack中都有集成

• 减少iframes的使用
• 压缩空白符、删除注释（打包解决）
• 避免深层次的节点嵌套
• 避免使用table布局（老布局方案）
• CSS、JavaScript 尽量外链
• 删除元素的默认属性

CSS优化

• 利用GPU实现动画

总结

因为现在浏览器和硬件的更新，我们的代码优化方案对于HTML和CSS来说，已经不痛不痒了。我们主要的精力还是要放在JS中。

而JS的优化，对于现在模块化开发的项目来说，我们更多的已经不在代码层面了，更多的是类似webpack的打包工具来帮我们做。