性能优化之html、css、js三者的加载顺序

前言

我们知道一个页面通常由三部分组成：html、css、js。 一般我们会在头部加载css文件，在页面底部加载js文件。 想知道为什么大家会按照同样的标准来搭建页面js页面加载完成后执行，首先要了解页面的加载过程。 （当然，以现在的技术，不一定非得按照这个标准来，下面会讲js的异步加载）

之前写过一篇文章，这里就详细介绍一下从输入URL到显示页面的详细过程。 今天我们主要看一下页面的构建过程和html、css、js的关系。

“如果这篇文章对你有帮助，❤️关注+点赞❤️给作者打气，文章公众号第一时间发布，关注前端南九第一时间获取最新文章~”

❝

这是我的：，欢迎star

❞页面构建过程

这里我们主要考虑三种情况下的构建过程

该页面仅包含外部 CSS 文件

从图中我们可以看出，在构建布局树之前，我们需要获取DOM树和CSSOM树。 当请求返回 HTML 文件时，HTML 解析器开始构建 DOM 以响应 HTML 数据，但是由于页面包含外部 CSS 文件，所以他需要先请求 CSS 访问，然后 CSS 解析器才能开始构建 CSSOM获取CSS数据后。 “所以在这种情况下，CSS 不会阻止 DOM 的构建，但会阻止页面的呈现”

该页面同时包含内联 JS 和外部 CSS

从这张图我们可以看出，如果HTML解析器在构建DOM的过程中遇到JS，就会停止构建DOM，先解析执行JS“（因为JS可能会修改DOM）”。 但是在执行JS脚本之前，如果页面包含外部CSS或者内联CSS，CSS会先构建到CSSOM中，然后再执行JS。 这就是为什么上面说的JS文件一般放在页面底部的原因。

“所以从这种情况来看，CSS和JS会阻塞DOM的构建，CSS会阻塞JS的执行，但不会阻塞HTML的解析”

页面包含外部JS和外部CSS

从这张图中我们可以看出，如果HTML解析器在解析过程中遇到外部CSS和外部JS文件，会同时发起下载文件的请求。 DOM构建过程会在这个过程中停止，需要等待CSS文件下载完成。 CSSOM构建完成后，下载并执行JS文件，DOM开始构建。 我们知道“CSS会阻塞JS的执行，所以JS必须等到CSSOM构建完成后才能执行”

所以我们上面说的CSS是在头部加载的，而JS文件是在页面底部加载的，可以解释一下。

CSS与DOM的关系❝

CSS不会阻塞DOM的解析，但是会阻塞DOM的渲染

❞CSSOM的作用

从前面提到的浏览器渲染过程可以看出：

CSS与JS的关系❝

CSS会阻止JS执行，但不会阻止JS文件的下载

❞

由于可以操作DOM和CSS，如果边渲染界面边修改这些元素的属性（即线程和UI线程同时执行），渲染线程前后获取的元素可能不一致.因此，为了防止不可预测的渲染结果，浏览器设置了“GUI渲染线程与线程互斥”的关系。

JS脚本的内容如果要获取元素的样式js页面加载完成后执行，就必须依赖CSS。 因为浏览器无法感知JS内部要干什么，为了避免样式获取，不得不等前面的样式全部下载完再执行JS。 但是JS文件和CSS文件是并行下载的，CSS文件会在后面的JS文件执行之前加载执行，所以CSS会阻塞后面JS的执行。

JS与DOM的关系❝

“JS会阻塞DOM的解析”，所以也会阻塞页面的加载

❞

“这就是为什么我们常说JS文件应该放在底部”

由于DOM是可操作的，如果在修改这些元素属性的同时渲染界面（即线程和UI线程同时运行），渲染线程前后获取的元素数据可能不一致。

因此，为了防止不可预知的渲染结果，浏览器设置了“GUI渲染线程与引擎互斥”的关系。

当引擎正在执行时，GUI线程会被挂起，GUI更新会被存储在一个队列中，当引擎线程空闲时立即执行。

当浏览器在执行程序时，GUI渲染线程会被保存在一个队列中，直到JS程序执行完毕，才会继续执行。

因此，如果JS的执行时间过长，就会导致页面渲染不连贯，造成页面渲染加载阻塞的感觉。

综上所述

由于CSS和JS都会阻塞DOM的渲染，所以我们应该尽量提高CSS的加载速度，延迟JS的加载。

优化 CSS 加载