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

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

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

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

3. 解决方式

• 将js代码放在最后

• 在script标签中添加defer

• 在script标签中添加async

解释：

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

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

4. async示例：假设body内元素很多。

可以发现，在加载到test元素之前，浏览器一边解析html，一边执行加载进来的js。

在js被完全加载之后，浏览器阻塞html解析，开始执行js。