可以看到,在alert
的时候,页面并没有显示出test
元素,在alert
结束之后才显示出test
元素。
可见,浏览器在解析script
,执行到alert
的时候,对html
的解析阻塞了。
所以有时候将js
文件放在body
的结尾,可以防止js
的加载执行阻塞到页面的加载,避免页面空白带来不佳的用户体验。
- 解决方式
-
将
js
代码放在最后 -
在
script
标签中添加defer
-
在
script
标签中添加async
解释:
-
defer
: 规定是否对脚本执行进行延迟,直到页面加载为止。 -
async
: 规定异步执行脚本(仅适用于外部脚本)。
async
示例:假设body
内元素很多。
可以发现,在加载到test
元素之前,浏览器一边解析html
,一边执行加载进来的js
。
在js
被完全加载之后,浏览器阻塞html
解析,开始执行js
。