web性能优化技巧篇之代码优化技巧

这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战。

CSS 优化

这里给出一些常用的 CSS 优化建议:

1. 使用 uncss 删掉无用的 CSS，但这个方法无法保证不误删，所以实践中要谨慎使用。
2. 使用更高效的选择器，但这个优化方法经常矫枉过正。比如 * 选择器在很多教程里都不被推荐使用，但它在现代浏览器上使用基本不会出现性能问题。我们要相信现代浏览器对基础功能的支持已经非常完备了。应该警惕的是 * * 或者 div * 这种奇怪的组合选择器。
3. 减少重排(reflow)。很多教程会让你不要用 JS 修改 font-size、className 等，因为这些改动会引起重排。这就比较扯淡了，因为有时候需求就是要修改这些东西。正确的建议是：在比较多种样式修改方案时，尽量选择不会引起重排的方案。比如在做动画时，修改 transform 永远比修改 left、top、bottom、right 更好，因为 transform 不会引起重排。或者说在修改某一个元素的多个属性时，我们一次性的进行修改，而不是分多次修改。减少重排的次数。
4. 不要使用 @import url.css； 因为被加载的 CSS 不能与当前文件并行下载。

总得来说，CSS 能优化的空间并不大，而且节点数少于 2000 的页面也没有必要过早优化 CSS。

JS 优化

JS 代码的优化技巧主要指是不要使用那些「容易引起性能问题」的特性。

• 尽量不用全局变量，因为全局变量太多会使变量查找变慢。
• 尽量少操作 DOM，可以使用 Fragment 一次性插入多个 DOM 节点。
• 不要往页面中插入大量的 HTML，一定会卡。
• 尽量少触发重排，可以使用节流和防抖来降低重排频率。
• 尽量少用闭包，减少内存占用，避免内存泄漏(只有 IE 有内存泄露问题)。

最后说一句

如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。