网页性能优化

一、网页生成过程

网页的生成过程,大致可以分成五步。

1.HTML代码转化成DOM
2.CSS代码转化成CSSOM(CSS Object Model)
3.结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
4.生成布局(layout),即将所有渲染树的所有节点进行平面合成
5.将布局绘制(paint)在屏幕上

 

这五步里面,第一步到第三步都非常快,耗时的是第四步和第五步。

"生成布局"(flow)和"绘制"(paint)这两步,合称为"渲染"(render)。

二、回流&重绘

网页生成的时候,至少会渲染一次。用户访问的过程中,还会不断重新渲染。

以下三种情况,会导致网页重新渲染。

  • 修改DOM
  • 修改样式表
  • 用户事件(比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等)

重新渲染,就需要重新生成布局和重新绘制。reflow回流和repaint重绘。

 

 

 

未完待续。。。。

posted @ 2018-07-25 15:40  samirah  阅读(129)  评论(0编辑  收藏  举报