html-javascript放在head和body的区别以及js文件加载带来的阻塞

2. js文件加载的阻塞

1. 在浏览器解析html的时候，解析到script标签，会去请求这个js文件，此时会阻塞整个页面的加载。

在加载完成之后，会解析该js文件，此时页面仍被阻塞。

在js解析执行完成之后，才会继续解析页面。

2. 可以使用alert模拟一下阻塞。

可以看到，在alert的时候，页面并没有显示出test元素，在alert结束之后才显示出test元素。

可见，浏览器在解析script，执行到alert的时候，对html的解析阻塞了。

所以有时候将js文件放在body的结尾，可以防止js的加载执行阻塞到页面的加载，避免页面空白带来不佳的用户体验。

3. 解决方式

• 将js代码放在最后

• 在script标签中添加defer

• 在script标签中添加async

解释：

1. defer: 规定是否对脚本执行进行延迟，直到页面加载为止。

2. async: 规定异步执行脚本（仅适用于外部脚本）。