浏览器加载解析渲染的过程

Posted 2020-11-07 柠檬小怪兽

---恢复内容开始---

最近看一些前端的面试题，发现很多公司都会问到浏览器加载，解析，渲染相关的问题。

这篇随笔整理一下这些知识，便于理解浏览器是怎么工作的。

 

首先，前端在大多数开发过程中并没有用到这些知识，那我们为什么还要去理解浏览器的运行过程？

事实上，对浏览器的理解能帮助前端开发者更好的实现最佳页面。

比如，

• 了解浏览器如何进行加载，可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。
• 了解浏览器如何进行解析，可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。
• 了解浏览器如何进行渲染，明白渲染的过程，在设置元素属性，编写js文件时，可以减少”reflow“”repaint“的消耗。

浏览器渲染引擎在湖区内容后的基本渲染流程：

解析html以构建dom树->构建render树->布局render树->绘制render树

当浏览器活的一个html文件是，会自上而下加载，并在加载过程中进行渲染。

解析：

1.浏览器会将HTML解析成一个DOM树，DOM树的构建过程是一个深度遍历过程：档期那节点的所有子节点都构建好之后才回去构建当前节点的下一个兄弟节点；

2.讲CSS解析成CSS Rule Tree；

3.根据DOM树和CSS Rule 树来构造Render Tree 。

4.有了Render Tree ，浏览器已经知道网页中有哪些节点，各个节点的CSS定义以及他们的从属关系。下一步操作成为Layout，就是计算出每个节点在屏幕中的位置；

5.最后就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

 

每解析一部分内容，就显示一部分内容。

 

回流：浏览器需要花时间去渲染，当它发现某个部分发生了变化影响了布局，就倒回去重新渲染；

重绘：不影响布局的属性（颜色），就只会触发重绘，重画某一部分；

 

reflow原因：

1.页面初始化；

2.操作DOM；

3.某些元素的尺寸变化；

4.CSS属性变化影响布局。

减少reflow和repaint

1.不要一条一条修改DOM的样式，先预定好css的class，然后修改DOM的className；

2.不要把DOM节点的属性是放在一个循环里面当成循环变量；

3.为动画的THML元素使用fixed或absolute的position，这样修改他们的CSS是不会reflow的；

4.不要使用table布局，因为一个晓得改动会造成整个table的重新布局。