一、阻塞
出现原因是:JavaScript是单线程。
二、改善方法
1.简单但不治本的方法
将script加载放在body的最后面,这样即使脚本之间阻塞了也不影响其他资源的加载,页面已经呈现出来,不至于显得很慢。将多个相关的JavaScript文件合并为一个JavaScript文件,减少脚本之间的阻塞。
2.无阻塞技术
- 使用defer和async
<script src="" async>
<script src="" defer>
async是异步执行,defer是延迟加载,这两个只在外联script中起作用。
async:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
defer:脚本将在页面完成解析时执行
- 动态脚本元素
《高性能JavaScript》中提到:当创建的script元素添加到页面后立刻开始下载。此技术的重点在于:无论在何处启动下载,文件的下载和运行都不会阻塞其他页面的处理过程。你甚至可以将这些代码放在部分而不会对其余部分的页面代码造成影响(除了用于下载文件的HTTP连接)