为什么外链css为什么要放头部？

╰+哭是因爲堅強的太久メ 2021-07-05 01:30 456阅读 0赞

我们最开始学前端的时候都会看到教程在处理外部`css，js`的时候会将`css`放在`header`中，`js`放在`body`的最后。为什么要这样子处理，今天参考一些资料好好分析下。

## 为什么外链`css`为什么要放头部？ ##

首先整个页面展示给用户会经过`html` 的解析与渲染过程。

而外链`css`无论放在`html`的任何位置都不影响`html`的解析，但是影响`html`的渲染。

如果将`css`放在尾部，`html`的内容可以第一时间显示出来，但是会阻塞`html`行内`css`的渲染。

浏览器的这个策略其实很明智的，想象一下，如果没有这个策略，页面首先会呈现出一个行内`css`样式，待`CSS`下载完之后又突然变了一个模样。用户体验可谓极差，而且渲染是有成本的。

如果将`css`放在头部，`css`的下载解析是可以和`html`的解析同步进行的，放到尾部，要花费额外时间来解析`CSS`，并且浏览器会先渲染出一个没有样式的页面，等`CSS`加载完后会再渲染成一个有样式的页面，页面会出现明显的闪动的现象。

## 为什么`script`要放在尾部？ ##

因为当浏览器解析到`script`的时候，就会立即下载执行，中断`html`的解析过程，如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。

具体的流程是这样的：

1.  浏览器一边下载`HTML`网页，一边开始解析。
2.  解析过程中，发现`script`标签
3.  暂停解析，网页渲染的控制权转交给JavaScript引擎
4.  如果`script`标签引用了外部脚本，就下载该脚本，否则就直接执行
5.  执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页

## 外链的`script`包含`async`或者`defer`如何处理？ ##

这两个属性只是`script`标签在`header`标签中使用的，如果你把它放在`body`后面是无效的。

`script` 的这两个属性主要用于其js文件没有操作DOM的情况，这时候就可以将该js脚本设置为异步加载，通过`async`或`defer`来标记代码。

`async`和`defer`的区别：

0、`async`和`defer`都仅对外部脚本有效，对于内置而不是连接外部脚本的`script`标签，以及动态生成的`script`标签不起作用。

1、`async`和`defer`虽然都是异步的，不过使用`async`标志的脚本文件一旦加载完成就会立即执行；而使用`defer`标记的脚本文件，会在 `DOMContentLoaded` 事件之前（也就是页面DOM加载完成时）执行。

2、如果有多个js脚本文件，`async`标记不保证按照书写的顺序执行，哪个脚本先下载结束，就先执行那个脚本。而`defer`标记则会按照js脚本书写顺序执行。

3、一般来说，如果脚本之间没有依赖关系，就使用`async`属性，如果脚本之间有依赖关系，就使用`defer`属性。如果同时使用`async`和`defer`属性，后者不起作用，浏览器行为由`async`属性决定。

对于`async`标记，浏览器的解析过程是这样的：

*  浏览器开始解析HTML网页
 *  解析过程中，发现带有`async`属性的`script`标签
 *  浏览器继续往下解析HTML网页，同时并行下载`script`标签中的外部脚本
 *  脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本
 *  脚本执行完毕，浏览器恢复解析HTML网页

对于`defer`标记，浏览器的解析过程是这样的：

*  浏览器开始解析HTML网页
 *  解析过程中，发现带有`defer`属性的`script`标签
 *  浏览器继续往下解析HTML网页，同时并行下载`script`标签中的外部脚本
 *  浏览器完成解析HTML网页，此时再执行下载的脚本

由于使用了`async`或`defer`的`script`会放在`header`中，而`header`又会存在外链`css`，那么二者有顺序要求吗？

## `header`中`script`和外链`css`的位置顺序 ##

其实js的执行是依赖`css`样式的。即只有`css`样式全部下载完成后才会执行js。

因为如果脚本的内容是获取元素的样式，宽高等`CSS`控制的属性，浏览器是需要计算的，也就是依赖于`CSS`。浏览器无法感知脚本内容到底是什么，为避免样式获取错误，因而只好等前面所有的样式下载完后，再执行JS。  
也就是说，如果有外链`css`，那么js的执行时需要等待外链css下载完。

根据一些网友的评论与反馈，然后查了一些资料，暂时得出的结论如下：

**由于现代浏览器很聪明会进行 `prefetch` 优化，就如 Chrome 浏览器，它会在解析 `HTML` 时收集外链，并在后台并行下载，由于会并行下载，那么`head`中外链`js`和`css`的位置其实就没有什么很大影响了。**

发表评论取消回复

表情：

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

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

相关阅读

相关为什么要用css模块化？

CSS模块化是一种将CSS代码按照组件或模块进行封装的方法。使用CSS模块化有多个好处，使得样式更加可维护、可扩展，并减少样式冲突的可能性。以下是一些使用CSS模块化的好处：

落日映苍穹つ/ 2024年03月23日 22:35/ 0 赞/ 56 阅读

相关 wait为什么要放在同步块中

且看下面一段不加锁的代码： public class WaitTest3 { public static void main(String[] ar

落日映苍穹つ/ 2023年06月18日 12:57/ 0 赞/ 18 阅读

相关为什么要使用 php反射_为什么要使用PHP？

为什么要使用 php反射 Now that you are comfortable using HTML on your website, it is time to tac

港控/mmm°/ 2022年12月06日 15:23/ 0 赞/ 267 阅读

相关为什么要用两套CSS,为什么要用CSS？

使用css可以将网页的大部分甚至是全部的表示信息(样式)从HTML文件中移出，实现样式和内容分离；这样可以降低文件大小、节省网络带宽，避免样式代码重复，使得维护更容易，可以使用

小灰灰/ 2022年09月03日 01:28/ 0 赞/ 292 阅读

相关为什么要学习？

我为什么要学习？这要从我第一次尝试去思考这个问题开始说起。那时候我读初中一年级。（在那之前我一直过着无束的日子，遵循动物的本能）初一的时候，我的班主任

清疚/ 2022年08月21日 07:48/ 0 赞/ 240 阅读

相关为什么要返回链表头指针（）

访问链表的时候，都是从头结点开始的，当你用完的时候也要回到头结点，这是通用的方法，如果不，有下列两种情况。 1.如果不返回呢，这个链表就无法用了，应为无法抓住一个节点，是无

左手的ㄟ右手/ 2022年05月11日 13:28/ 0 赞/ 198 阅读

相关为什么CSS放头部，JS放底部

`CSS`放头部，`JS`放底部，这样可以提高页面的性能。然而，为什么呢？原因如下： `CSS` 不会阻塞 `DOM` 的解析，但会阻塞 `DOM` 渲染。 `J

ゝ一纸荒年。/ 2022年04月10日 04:41/ 0 赞/ 365 阅读

相关为什么wait()方法要放在同步块中？

[为什么wait()方法要放在同步块中][wait]？ ![20190604092849248.jpg][] [wait]: http

悠悠/ 2022年01月23日 13:51/ 0 赞/ 203 阅读

相关为什么外链css为什么要放头部？

我们最开始学前端的时候都会看到教程在处理外部`css，js`的时候会将`css`放在`header`中，`js`放在`body`的最后。为什么要这样子处理，今天参考一些资料好好

╰+哭是因爲堅強的太久メ/ 2021年07月05日 01:30/ 0 赞/ 457 阅读

相关 css为什么要放在head标签中?

思考: `css`为什么要放在`head`标签中, 而不能像`javascript`一样置于`body`标签尾部? > Talk is cheap, show me the

迈不过友情╰/ 2021年07月04日 23:19/ 0 赞/ 433 阅读