浏览器渲染机制(面试)

浏览器渲染机制

一、浏览器如何渲染网页
浏览器的渲染机制可以分为五步：
第一步：解析html，构建DOM树
第二步：解析CSS，生成CSSOM树
第三步：合并dom树和css规则树，生成render渲染树
第四步：根据render渲染树进行布局
第五步：调用GPU对渲染树进行绘制，合成图层，显示在屏幕上\

 

其中第四步和第五步合起来，就是我们常常说的浏览器渲染，并且第四步和第五步是浏览器渲染最耗时的部分（主要优化点）

关于渲染：

浏览器在生成网页的过程中，至少渲染一次
在用户浏览的过程中，还会不断重新渲染 （render = n+1）
在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢
当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且CSS也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也可以认为这种情况下，CSS 也会暂停构建 DOM
浏览器渲染的五个阶段