小白如何理解浏览器的渲染机制（浅度）

当在浏览器输入一个URL地址按下回车键时发生了什么？

1、DNS域名解析

2、建立TCP连接

3、浏览器发起HTTP请求

4、服务器收到HTTP请求，并根据请求返回相应的内容

5、浏览器拿到服务器返回的文件，然后渲染页面，并请求相关的资源

6、关闭TCP连接

 

这是一个完整的浏览器输入URL然后网页呈现在用户面前的过程，当然我们前端比较关注第5步。浏览器是如何解析我们的HTML文件的？

 简单来说可以分为8步：

1、浏览器会在内存条中开辟出一条栈内存来给代码执行提供环境，另外来开出一条主线程来一行一行解析执行代码

2、HTML解析器开始至上而下扫描HTML代码。如果代码中有href/link样式资源，则会暂停扫描去加载这个样式资源，样式资源加载好以后再继续往下扫描，（如果文件中没有href样式资源，样式在style中则会被当成DOM解析）把这些代码解析成DOM树。

3、如有href/link外部样式资源则启动CSS解析器，解析成CSSOM

4、把CSSOM和DOM变成Render Tree（渲染树）

5、layout（布局）：根据设备的大小，按照Render Tree（渲染树）计算每个元素的大小和分布在设备屏幕的位置进行布局

6、painting（绘制）：按照计算出来的规则通过显卡渲染到设备屏幕上

7、reflow（回流）：当浏览器发现某个部分发生了变化影响了布局，就需要倒回去重新渲染（这个变化可能是多个方式引起的比如点击下改变了位置呀等等）

8、repaint（重绘）：当改变某个元素的背景色、文字颜色、边框颜色等变化不影响它周围或者内容布局属性时；屏幕的一部分需要重画，但是元素的几何尺寸没有变化。

以上就是大概的浏览器渲染的流程。当然在reflow（回流）和repaint（重绘）这个阶段时我们就可以做优化了呀。比如我们可以操作元素大小的时候可以一次性操作、不要分开很多步来操作DOM元素（改天我们写一篇专门的这个两个优化的文章）

 

备注：第一次写文章写得不太好的大家勿喷！感谢