# 浏览器渲染流程

浏览器在拿到HTML的时候，会有以下步骤：

• 解析DOM，生成DOM tree。
• 解析CSS，生成CSS tree。
• 合并DOM tree和CSS tree，生成render tree。
• 针对合并好的render tree去计算layout，并生成layout tree（这里是因为在css中，我们会通过z-index、position、opacity、transform、 will-change等一些属性，修改样式所产生的层级所触发的）。我们可以通过F12的layer，查看当前页面所产生的层，如果没有的话，可以通过...内有个more tools去找到layer进行查看。
• 至此，浏览器开始通过不断的重绘（repaint）和回流（reflow）开始渲染页面。
• 页面渲染完成。

# 回流

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

引起回流：

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等等）
• 元素字体大小变化
• 添加或者删除可见的DOM元素
• 激活CSS伪类（例如：:hover）
• 查询某些属性或调用某些方法

# 重绘

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

# 总结

上面主要关注的部分是回流和重绘这2个阶段，每次操作DOM的时候，所产生的渲染开销，一般是指这2部分。所以现代的框架通过Vitrual DOM的形式，来解决问题，也就是虚拟DOM。

上面详细内容可以去极客时间搜索浏览器工作原理与实践了解。