html页面加载顺序

页面总是从上往下执行

CSS为什么要放在头部

1.CSS可以和html一起同时进行解析和渲染

2.如果你把CSS放到body后面，不但没有跟html一起进行加载渲染，还要花费额外时间去加载CSS,这样将导致首先加载到一个没有样式的页面结构，等到CSS加载完了之后，突然又变为一个有样式的结构，这样用户体验非常不好

JavaScript为什么要放在尾部

JavaScript解析加载时，会暂停html的解析和css渲染，把页面的控制权，交给JavaScript引擎，等到JavaScript加载完了之后再把控制权交给html页面，然后html继续开始解析加载，如果JavaScript文件很多，需要加载的时间很久，甚至迟迟加载不了，这将导致页面卡死，处于一种假死状态，对用户体验不好

具体的流程是这样:

1.浏览器一边下载html网页，一边开始解析

2.解析过程中，发现JavaScript便签

3.暂停解析，网页渲染的控制权转交给JavaScript引擎

4.如JavaScript标签引入外部脚本，就下载脚本，否则就直接执行

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的位置顺序

先说结论：

如果在html的header中同时有js脚本和外链css，js脚本最好放外链css前面。

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

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

但是如果css下载事件很长的话，js也无法正常运行，导致html无法正常解析出来。如果css的内容下载更快的话，是没影响的，但反过来的话，JS就要等待了，然而这些等待的时间是完全不必要的。