首页前端开发正文

css和js文件各自应该放置在哪个位置?

朱绪2017-07-112604CSS

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>之间的话,浏览器会边构建边渲染,效率会高得多。