浏览器渲染相关知识

1、浏览器渲染原理

2、浏览器渲染过程

（1）渲染引擎解析html生成dom树（读取html,将字节转换成字符，确定标签，再将标签转换成节点，以节点构建dom）

（2）解析css样式成css规则树（读取css文件，将字节转换成字符，确定标签，将标签转换成节点，构建css规则树）

（3）根据dom树和css规则树生成渲染树（render tree）（一边加载、一边解析、一边渲染）

（4）对渲染树进行布局处理，确定显示的位置

（5）遍历渲染树将每个节点绘制出来

加载js:解析时遇到js,会阻塞dom树的构建，优先js引擎解析js后才会继续构建dom。原因是js会对dom节点进行操作，浏览器为了防止无效操作，节省资源，只能阻塞dom树构建。

若在html头部加载js,会影响页面的首绘，为了加快页面渲染，一般将js放到html底部加载。

3、关键渲染路径详述

关键渲染路径：浏览器将html、css、js等资源，解析、构建、渲染、绘制、最后呈现给用户看到界面的整个过程。

4、dom树与渲染树的关系

dom树是html解析构建的，渲染树是dom树和css规则树一起生成的。渲染树与dom树不完全对应

dom树与html标签是一一对应的关系，包括隐藏元素(dispaly:none)、head、visibility:hidden的元素

渲染树不包括head和隐藏元素（dispaly:none），visibility:hidden是存在。

5、css会阻塞dom解析嘛？

css是单独的线程异步下载的，dom解析与css解析是相互独立，所以css不会阻塞dom解析。

但是css会阻塞渲染树的渲染，因为渲染树是依赖css规则树的样式。

6、回流与重绘

回流（reflow）：重排，当节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、float、position、display:none）,导致节点位置发生变化，需要重新生成渲染树。

重绘（repaint）：节点 发生改变，不影响空间位置和大小，只是一些背景颜色、字体颜色等变化，会触发重绘。

回流一定会触发重绘，重绘不一定会触发回流。

7、避免回流的方式

（1）避免逐个修改样式，尽量一次修改

（2）可以将多次修改的dom元素设置display:none，操作完再显示

（3）避免多次读取某些属性

（4）让元素脱离动画流，减少回流

（5）让要操作的元素离线处理，处理完后一起更新

（6）避免使用table布局