> 咕笛老师：前端面试中,本题目出现的频率很高，各大厂都出现过。着重理解整个过程，并不需要死记硬背 浏览器渲染页面的一般过程： 1.浏览器开始解析html，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，所对应的是html标签。 2.浏览器开始解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。 3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。 4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上 ## 重绘 在一定的条件下，会触发页面的重绘（repaint），所谓重绘，指的是屏幕的一部分要重新绘制。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘 ## 重排 重排也叫回流（reflow），当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式："display:none;"。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即重排