关于提高网页性能的总结

引言

作者 姬如柏 主页

趁着清闲总结了一下提高网页性能的知识点，现在分享出来，希望对大家有帮助

熟悉页面生成的步骤

• HTML生成DOM
• CSS生成CSSOM
• 结合DOM和CSSOM生成渲染结构树
• 页面进行布局（layout），讲渲染结构的节点进行平面合成
• 绘制（paint）

影响页面性能的关键

layout + paint 即为render，即渲染过程最浪费页面性能。所以应该减少页面重新渲染的操作。
影响渲染（render）的包括：

• 修改DOM
• 修改样式表
• 用户事件

##提高性能的操作

• 尽量减少对DOM的直接操作。
  • 选用虚拟DOM库，例如react。
  • 对DOM的clone节点进行操作，然后替换原有DOM。
  • 将要添加的DOM先添加进document.createDocumentFragment()，然后再添加到页面中
• 尽量减少渲染。
  • 对于DOM的读写应该分开，读的写在一起，写的写在一起。不要读写写在一句。

// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";

// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";

• 对于多个样式的修改，应该去控制class的添加或者写cssText。
• 将DOM元素隐藏进行操作然后显示。这样只触发一次重绘或者重排，而不是多次渲染。