Js脚本加载的特点:
1. 没有设置异步加载的SCRIPT,会阻塞文档解析, 等待JS脚本加载并且执行完之后继续解析文档
2. 有设置异步加载的SCRIPT, 不会阻塞文档解析(异步的script中不能用document.write, 包括async, defer)
<script type="text/javascript" scr="aa.js" async="async"></script> 异步脚本必须是没有其他脚本依赖的
<script type="text/javascript" scr="aa.js" defer="defer"></script>
defer和async区别:defer在文档解析完成之后才开始执行JS脚本, 而 async只要JS脚本加载完成之后立刻执行
按需加载的实现就是动态创建script标签:
var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'xxx.js'; // 开始下载脚本,异步下载 // 加载完成后,执行脚本 if(script.readyState) { //IE script.onreadystatechange = function() { if(script.readyState === 'complate' || script.readyState === 'loaded') { //执行代码 } } } else { // safari, chrome, firefox, opera script.onload = function() { //执行代码 } } document.head.appendChild(script);