微信公众号

关于提高网页性能的总结

引言

作者 姬如柏 主页

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

熟悉页面生成的步骤

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

影响页面性能的关键

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

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

##提高性能的操作

  • 尽量减少对DOM的直接操作。
    • 选用虚拟DOM库,例如react。
    • 对DOM的clone节点进行操作,然后替换原有DOM。
    • 将要添加的DOM先添加进document.createDocumentFragment(),然后再添加到页面中
  • 尽量减少渲染。
    • 对于DOM的读写应该分开,读的写在一起,写的写在一起。不要读写写在一句。
1
2
3
4
5
6
7
8
9
// 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元素隐藏进行操作然后显示。这样只触发一次重绘或者重排,而不是多次渲染。
yunsonbai wechat
微信公众号