我们最开始学前端的时候都会看到教程在处理外部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
的解析过程,如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。
具体的流程是这样的:
- 浏览器一边下载
HTML
网页,一边开始解析。 - 解析过程中,发现
script
标签 - 暂停解析,网页渲染的控制权转交给JavaScript引擎
- 如果
script
标签引用了外部脚本,就下载该脚本,否则就直接执行 - 执行完毕,控制权交还渲染引擎,恢复往下解析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
的位置其实就没有什么很大影响了。