文档渲染机制

文档渲染机制

浏览器的渲染机制一般分为以下几个步骤

1.处理html,并构建DOM树

2.构建css构建cssom树

3.将DOM树和CSSOM合成一个渲染书

4.根据渲染树来布局,计算每个节点的位置

5.调用GPU绘制,合成图层,显示在屏幕上

ps:先搞DOM在搞cssom,然后两者合并,在计算位置,再合成图层

css的阻塞

在构建css树时,会阻塞渲染,直至csss树构建完成,并且构建cssom树是一个十分消耗性能的过程,所以应该尽量保证层级扁平,减少过度层叠,越是具体的css选择器,执行速度越慢

js阻塞

当html解析到script标签的时候,会暂停构建dom树,完成后才会重暂停的地方重新开始,也就是说你要首屏加载的越快,就不应该在首屏加载js文件,并且css也影响了js的执行,只用当css样式表才会执行js

ps: html=>css=>js

图层

一般来说可以把普通文档流看成一个图层.特定的属性可以生成一个新的图层,不同的图层渲染互不影响,所以对那些频繁渲染的建议单独生成一个图层,提高性能

通常以下几个属性可以生成图层

a.3D变换:translate3d,translatez

b.will-change

c.video,iframe 标签

d.通过动画实现opacity动画转换

e.position:fixed

重绘(Repaint)和回流(Reflow)

重绘:不影响布局 如color

回流:布局或者几何属性要改变

回流必定发生重绘,重绘不一定引发回流

以下几个动作可能会导致性能问题:

1.改变window大小

2.改变字体大小

3.添加或删除样式

4.文字改变

5.定位或者浮动

6.和模型

重绘和回流其实和Event loop 有关

• 当Event loop执行完microtsks后 会判断document是否需要更新.因为浏览器是60hz的刷新,没16ms才会更新一次

• 然后判断是否有resize或者是scroll,有的话会促发事件

• 判断是否促发了media query

• 更新动画并且发送事件

• 判断是否有全屏操作事件

• 执行 requestAnimationFrame 回调

• 执行 IntersectionObserver 回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好

• 更新界面

• 以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行 requestIdleCallback 回调。

 

 

转载于:https://my.oschina.net/u/4004801/blog/3008266