CSS JS放置位置和原因

旧城等待， 2021-07-04 20:26 370阅读 0赞

网站加载的整个完整过程了。

1.  首先浏览器从服务器接收到html代码，然后开始解析html
2.  构建`DOM`树（根据html代码自顶向下进行构建），并且在同时构建渲染树
3.  遇到`js`文件加载执行，将阻塞`DOM`树的构建；遇到`css`文件，将阻塞渲染树的构建  
    （`script`标签中的`defer`属性：构建`DOM`树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在`DOM`树构建完成之后

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

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

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

--------------------

## CSS与JavaScript文件的位置 ##

### 1、CSS ###

尽量放置在`head`标签中。

原因：

*  避免浏览器重新渲染；
 *  避免阻塞JS文件的执行。

注：CSS选择器的解释顺序是 从右向左 的，所以尽量减少选择器的层级。

### 2、JS ###

尽量放置在`</body>`之前。

原因：

*  避免阻塞html的加载、解析与渲染（因为js的执行时单线程的）。

--------------------

## 关于`html，css，js`三者的加载顺序问题 ##

![在这里插入图片描述][20201112225503108.png]

<head lang="en">
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/*.css">
        <script src="js/*.js></script>
    </head>

DOM文档的加载顺序是由上而下的顺序加载；

### 1、DOM加载到`link`标签 ###

**css文件的加载是与DOM的加载并行的**，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的`css`样式或者`img`，则会向服务器发送一个请求，待资源返回后，将其添加到`dom`中的相对应位置中；

### 2、DOM加载到`script`标签 ###

**由于js文件不会与`DOM`并行加载**，因此需要等待js整个文件加载完之后才能继续`DOM`的加载，倘若js脚本文件过大，则可能导致浏览器页面显示滞后，出现“假死”状态，这种效应称之为“阻塞效应”；会导致出现非常不好的用户体验；

而这个特性也是为什么在js文件中开头需要`$(document).ready(function(){})`或者`（function(){}）`或者`window.onload`,即是让`DOM`文档加载完成之后才执行`js`文件，这样才不会出现查找不到`DOM`节点等问题；

js阻塞其他资源的加载的原因是：**浏览器为了防止js修改DOM树，需要重新构建DOM树的情况出现；**

### 3、解决方法 ###

前提，js是外部脚本；

在`script`标签中添加 `defer=“ture”`，则会让js与DOM并行加载，待页面加载完成后再执行`js`文件，这样则不存在阻塞；

在`scirpt`标签中添加 `async=“ture”`，这个属性告诉浏览器该`js`文件是异步加载执行的，也就是不依赖于其他`js`和`css`，也就是说无法保证js文件的加载顺序，但是同样有与`DOM`并行加载的效果；

同时使用`defer`和`async`属性时，`defer`属性会失效；

可以将`scirpt`标签放在`body`标签之后，这样就不会出现加载的冲突了。

[20201112225503108.png]: /images/20210704/1421084683754e888e00a5dad9c17c5f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，370人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android assets文件夹之位置放置和作用

ndroid 的assets文件夹的放置位置，Eclipse创建项目时就生成了的，Android Studio则不太一样，AS可以包含几种方式， 1：可以在build....

亦凉/ 2024年04月18日 07:43/ 0 赞/ 74 阅读

相关 script标签在HTML放置位置的区别

原文网址：[script标签在HTML放置位置的区别\_IT利刃出鞘的博客-CSDN博客][script_HTML_IT_-CSDN] 简介说明本文介绍scrip

素颜马尾好姑娘i/ 2023年09月29日 16:16/ 0 赞/ 17 阅读

相关 js和css引入的位置,及js异步加载

css放在header中,js放在body底部,如果js需要异步加载: 添加async标签 ![watermark_type_ZmFuZ3poZW5naGVpdGk_sha

我就是我/ 2023年06月20日 06:29/ 0 赞/ 116 阅读

相关前端js放置位置区别

js可以分为外部的和内部的。内部的js 内部的js也叫本页面的JS脚本，内部的js一般放到body内，这样做的目的有很多， 1. 不阻塞页面的加载(事实

我就是我/ 2023年05月31日 02:35/ 0 赞/ 14 阅读

相关 python中空间的位置怎么放置_Python面向对象：主位置,python,家居,放置,问题

需求： 1.房子有户型，总面积和家具名称列表，新房子没有任何的家具 2.家具有名字和占地面积，其中：床：占4平米衣柜：占2平面

青旅半醒/ 2022年10月22日 14:58/ 0 赞/ 158 阅读

相关 CSS:居中放置页面元素

最近入了前端的坑，啊，改学前端了，长路漫漫..... 块级元素文字居中放置： 1.使用text-align性质可以居中显示块级元素中的文字 h1{

旧城等待，/ 2022年06月14日 04:19/ 0 赞/ 254 阅读

相关 css 两个div叠加放置

css： .bigDiv{ position: relative; } .smallDiv1{ position: a

野性酷女/ 2022年06月02日 11:06/ 0 赞/ 341 阅读

相关 springboot html引入js、css失效和没有用原因解决

[https://blog.csdn.net/qq\_29072049/article/details/81001173][https_blog.csdn.net_qq_290

深藏阁楼爱情的钟/ 2022年03月17日 15:46/ 0 赞/ 394 阅读

相关 springmvc的配置文件的放置位置问题

1、第一种位置是和src平级的位置—config文件夹，此时需要在前端控制器配置中添加init-param标签实现加载springmvc配置文件，此时此配置文件最终保存到了cl

蔚落/ 2022年02月01日 07:53/ 0 赞/ 765 阅读

相关 CSS JS放置位置和原因

网站加载的整个完整过程了。 1. 首先浏览器从服务器接收到html代码，然后开始解析html 2. 构建`DOM`树（根据html代码自顶向下进行构建），并且在同时构建渲

旧城等待，/ 2021年07月04日 20:26/ 0 赞/ 371 阅读