可能很多人都知道JavaScript的载入和渲染会暂停DOM解析，但可能仍缺乏直观的体验。 本文通过几个例子详述脚本对页面渲染的影响，以及如何使用异步脚本载入策略提供页面性能和用户体验。 包括在脚本载入缓慢或错误时尽早显示整个页面内容，以及早点结束浏览器忙提示（进度条、旋转图标、状态栏等）。
DOM 渲染流程
要理解异步脚本载入的用处首先要了解浏览器渲染DOM的流程，以及各阶段用户体验的差别。 一般地，一个包含外部样式表文件和外部脚本文件的HTML载入和渲染过程是这样的：
- 浏览器下载HTML文件并开始解析DOM。
- 遇到样式表文件
link[rel=stylesheet]时，将其加入资源文件下载队列，继续解析DOM。 - 遇到脚本文件时，暂停DOM解析并立即下载脚本文件。
- 下载结束后立即执行脚本，在脚本中可访问当前
document.addEventListener('DOMContentLoaded', function(){ alert('DOM loaded!'); }); src="/will-not-stop-loading.js">
这时Wrold!会显示，但浏览器忙指示器仍在旋转。
这是因为 DOM 仍然没有解析完成，毕竟最后一个);
if(el.dataset.src) $script.attr('src', el.dataset.src);
else $script.html(el.text);
$script.appendTo('body');
el.remove();
});
});
- 对于外部
