css和js文件各自应该放置在哪个位置?
有一天,你在搜索引擎里搜索一个问题,你感觉有个搜索结果的标题吸引到了你,于是就点了,但是点了之后进入网站的几秒钟都是空白状态,过了好久才加载成功。
为什么会出现这样的情况呢?
我来向大家讲解一下网站加载的整个过程吧:
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文件加载会阻塞,一旦这个js文件数量很多内容很大,就会出现好长时间也加载不出来的情况,这个是很影响用户体验的。
说了这么多,那么应该放在哪里比较好呢?
script标签最好放置在</body>前面,这样就不会网页加载时出现空白的情况了。
而css标签应该放在<head></head>标签之间,如果放在</body>标签的前面,那么就会出现这种情况:当DOM树构建完成了,渲染树才构建,当渲染树构建完成,浏览器不得不再重新渲染整个页面,如此一来会造成资源的浪费,效率也不高。而放在<head></head>之间的话,浏览器会边构建边渲染,效率会高得多。