浏览器渲染页面的过程，通俗易懂

浏览器渲染页面的流程

前几天研究了一下这个问题，看了一些视频翻阅了一些博客，在这里记录下来，就当给自己归纳总结一下，也给有需要的友友们参考，如果有哪里说的不对欢迎大家留言评论，我都会去看。

讲流程前，先讲几个需要了解的知识

如果只想知道渲染过程，可以跳过当前节。

解析 HTML 文件

此时浏览器接受到的是显示字节内容的HTML文件，然后再浏览器内部会进行一系列转换，即：

字节 --> 字符 --> token --> 节点对象 --> DOM

解析 css 文件

浏览器会对css文件做一下操作

字节 --> 字符 --> token --> 节点 --> CSSOM

渲染树

页面就是根据渲染树的结构和样式来形成的。

渲染树是DOM和CSSOM结合的产物，渲染树的任务是匹配DOM和CSSOM的可见节点，并且捕获可见内容挂在渲染树上。

注意：一定是可见内容，例如DOM节点中的meta或者link等标签节点和CSSOM中display: none的节点不会被挂在渲染树上。

布局

当渲染树被构造完成之后，页面还不能马上被渲染。浏览器还要根据渲染树的节点进行布局，布局是获取元素的位置既大小，并用盒子模型的形式在页面上进行嵌套

绘制

布局之后，浏览器就可以把渲染树以像素的形式绘制到页面上。

渲染流程

下述过程无论遇到外部js还是行内js，都是同样的步骤，同样的解析执行顺序。

1. 请求HTML
2. 构建DOM
3. 遇到link和script去请求并下载css文件和js文件（在请求下载css文件时，DOM的解析还会继续，因为DOM是可以部分解析的，而请求下载js文件时，DOM的解析会被阻塞）
   • 返回css文件：要开始构建CSSOM，因为CSSOM不能部分解析，所以此时DOM会发生阻塞，DOM必须等待CSSOM构建完成后才能继续解析（前提：没有js文件的下载阻塞DOM）
   • 返回js文件：此时不能立刻执行js文件，因为js代码可以对 CSSOM 和 DOM 进行一些更改，所以要等待CSSOM构建完成后才能去执行js文件，这里js只会等待CSSOM的构建，并不会等待DOM的构建。
   • 也就是说：DOM的解析会在下载 js 文件和构建CSSOM时被阻塞，js文件需要等待CSSOM构建完成之后才能执行。
4. 构建CSSOM
5. 执行js文件
6. 继续构建后面的DOM
7. 构建渲染树布局和绘制

我们之所以要将js代码的引入放到body标签的最后就是因为js代码会在CSSOM构建完成之后立即执行，但此时DOM不一定构建完成了。