浏览器渲染机制

浏览器渲染机制

对于渲染,需要了解设备刷新率

设备刷新率是设备屏幕渲染的频率,手机电脑默认的刷新频率都是60FPS,也就是屏幕会在1s内渲染60次,约16.7ms渲染一次屏幕,这就意味着我们的浏览器最佳性能就是所有操作在一帧16.7ms内完成,能否做到1帧内完成直接决定着渲染性,影响用户交互;

渲染引擎移开时会从网络层获取请求文档的内容,内容大小一般限制在8000个块以内;

基本流程:

渲染引擎将开始解析HTML文档,并将各个标记逐个转换成内容树上的DOM节点,同时也会解析外部css文件以及样式元素中的样式数据,HTML中这些带有视觉指令的样式信息将用于创建另一个树结构:呈现树

呈现树包含多个带有视觉属性（如颜色和尺寸)的矩形,这些矩形的排列顺序就是它们将在屏幕上显示的顺序;

呈现树构建完毕之后,就会进入布局处理阶段,也就是为每个节点分配一个应出现在屏幕上的确切坐标,下一个阶段就是绘制,渲染引擎会遍历呈现树,由于用户界面后端层将每个节点绘制出来;

这是一个渐进的过程,为了达到更好的用户体验,渲染引擎会力求尽快将内容显示在屏幕上,它不必等到整个html文档解析完毕,就会开始构建呈现树和设置布局,在不断接受和处理来自网络其余内容的同时,渲染引擎会将部分内容解析并显示出来;

CSSOM树和DOM树合并成渲染树,然后用于计算每个可见元素的布局,并输出给绘制流程,将像素渲染到屏幕上,优化上述每个步骤对实现最佳渲染性能至关重要;

具体流程:

1.DOM树与CSSOM树合并后形成渲染树;

2.渲染树只包含渲染网页所需的节点;

3.布局计算每个对象的精确位置和大小;

4.最后一步是绘制,使用最终渲染树将像素渲染到屏幕上;

注意: visibility:hidden与display:none是不一样的,前者隐藏属性,但元素仍占据着布局空间(将其渲染成一个空框),而后者将元素从渲染树中完全移除,元素不可见,也不是布局的组成部分;

webkit渲染图

script标签的处理

js可以操作DOM来修改DOM结构,可以操作CSSOM来修改样式,这就导致浏览器在解析HTML时,一旦碰到script标签,就会立即停止HTML解析,执行js,在返还控制权；

事实上,js执行前不仅停止html的解析,还必须等待css解析完,当浏览器碰到script元素时,发现该元素前面css未解析完,就会等待css解析完成后再去执行js;

js阻塞了html的解析,也阻塞了其后的css解析,整个解析进程必须等待js的执行完成后才能够继续,这就是所谓的js阻塞页面,一个script标签,推迟了DOM的生成,CSSOM的生成以及之后的所有渲染过程,从性能角度上讲,讲script放在页面最底部,合情合理;

最后,渲染引擎与js引擎线程是互斥的,当js引擎执行时渲染线程将会被挂起(相当于冻结),渲染更新将会保存在一个队列中等待js引擎空闲时立即被执行;

总结:

浏览器渲染流程分为:

1.DOM树构建;

2.CSSOM树构建;

3.RenderObject树构建

4.布局;

5.绘制;