浏览器是如何渲染页面

首先我们先简要概述下浏览器渲染页面的步骤

1. 处理HTML标记并构建DOM树
2. 处理CSS标记并构建CSSOM树（CSSOM和DOM是独立的数据结构）
3. 如果遇到JS,阻塞DOM树及CSSOM树的构建，有限加载JS文件，加载完毕，在继续构建DOM树及CSSOM树
4. 将DOM与CSSOM合并成一个渲染树
5. 根据渲染树来布局，将各个节点渲染到屏幕上
6. 页面渲染完成后，若JS操作了DOM节点。则根据JS对DOM操作动作的大小使浏览器对页面进行重绘或者是回流

其次呢 我们再来说说脚本和样式文件对于页面渲染的影响

浏览器从服务器获取文档并从上到下进行解析，在脚本文件标签不包含defer和async属性的情况下，会按照如下规则执行文档内容

1. 处理HTML标记并构建DOM树
2. 在构建DOM的过程中，如果遇到外联的样式声明或脚本声明，则暂停文档解析，创建新的网络连接，开始下载样式文件和脚本文件
3. 样式文件下载完成后，构建CSS Rule DOM，脚本文件下载完成后，解释并立即执行。
4. 构建DOM的同时，结合CSS规则树完成页面渲染。
5. 如果DOM树先于CSS规则树构建完成，则在CSS规则树构建完成后，页面会发生一次重绘，将新构建的CSS规则应用于渲染树。

在这个过程中，脚本文件的下载和执行是与文档解析同步进行的，脚本文件的下载和执行都会阻塞文档的解析，如果控制得不好，在用户体验上就会造成一定程度的影响。