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

前言

我们知道一个页面通常由三个部分组成：html、css和js。一般我们都会把css文件放在head的head里去加载，js文件会放在页面的最底部，如果想知道为什么大家都按照这个标准建页面，首先要明白页面加载过程。 （当然，以现在的技术，你也可以不遵循这个标准，下面会讨论js的异步加载。）

之前写过一篇超详细的页面加载过程讲解，这里再详细介绍。从输入URL到展示一个页面的详细流程，今天我们主要看一下页面的构建过程以及html、css、js的关系。

如果本文对你有帮助，❤️关注+点赞❤️鼓励作者，文章首发于公众号，关注前端南九第一时间获取最新文章~

页面构建过程

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

页面仅包含外部 CSS 文件

从图中我们可以看出，在构建布局树之前需要获取DOM树和CSSOM树。在请求回 HTML 文件时，HTML 解析器响应 HTML 数据并开始构建 DOM，但由于页面包含的是外部 CSS 文件，所以他需要先请求一次 CSS 会议，然后再获取 CSS 数据之前CSS 解析器可以开始构建 CSSOM。所以在这种情况下，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脚本的内容是获取元素的样式，则必须依赖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 加载