如何调整html、css、js的加载顺序以实现性能优化？

本文共计1506个文字，预计阅读时间需要7分钟。

前言：我们都知道一个页面通常由HTML、CSS、JS三部分组成，一般我们会把CSS文件放在head头部加载，而JS文件则放在页面底部加载。想知道为什么大家都会不约而同地按照这个标准来操作吗？

前言

我们知道一个页面通常由，html，css，js三部分组成，一般我们会把css文件放在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）。