js与css放置的位置问题

一天,小明正在网上查找资料,项目中遇到的问题需要通过查阅资料来解决,他看到一个标题很有意思,觉得这应该是他要找的答案,于是他就点了进去,结果进入网站后几秒钟的时间,网页还是一片空白,过了好久才加载完成。

为什么会出现这种情况?

说到这那我们就有必要先了解一下网站加载的整个完整过程了。

  1. 首先浏览器从服务器接收到html代码,然后开始解析html

  2. 构建DOM树(根据html代码自顶向下进行构建),并且在同时构建渲染树

  3. 遇到js文件加载执行,将阻塞DOM树的构建;遇到css文件,将阻塞渲染树的构建

(script标签中的defer属性:构建DOM树的过程和js文件的加载异步(并行)进行,但是js文件执行需要在DOM树构建完成之后

script标签中的async属性:构建DOM树、渲染树的过程和js文件的加载和执行异步(并行)进行)

为什么要对css,js的放置位置进行调整?

从以上过程可以知道,当js文件放在head中时,浏览器构建DOM树的时候遇到js文件加载会阻塞,也就是说,浏览器不会加载body中的标签,一旦这个js文件的数量和内容都比较大,那么就会造成刚刚小明遇到的那种情况,就不会给用户一个十分良好的可视化回馈,而在前端开发中,给予用户的可视化回馈十分重要。

我们现在十分青睐于用进度条来描述一个过程,而对用户的可视化回馈,就是网页加载的进度条。

对于现如今有着快节奏的人们,如果一个网页打开后在两秒钟内没有反应,或者加载很慢,那么用户就会很不耐烦的关掉它,想当于被直接宣判死刑了。

应该放在哪里?

综上所述,script标签最好放在body标签结尾的前面,因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况,可以持续的给用户提供视觉反馈,同时在有些情况下,会降低错误的发生。

而css标签应该放在head标签之间,因为如果放在body标签结尾的前面,那么当DOM树构建完成了,渲染树才构建,那么当渲染树构建完成,浏览器不得不再重新渲染整个页面,这样造成了资源的浪费。效率也不高。如果放在head之间,浏览器边构建边渲染,效率要高的多。

(个人愚见,如有不足,或者错误的地方,还请大家不吝赐教)