无阻塞加载脚本技术的核心就是：动态下载js脚本的时候，不会阻塞UI线程的执行。动态脚本为什么不阻塞ui线程？可能是因为浏览器认为动态资源不会影响页面渲染。
让script延迟和异步的两个属性：defer和async
js脚本会改变文档输入流的内容，所以执行js时会暂停页面的渲染。对于内联脚本没什么问题，因为脚本和html文档被同时加载了。但对于外部引入的脚本，脚本的下载（取决于网速）也会阻塞浏览器文档的解析和渲染，甚至会阻塞有些浏览器下载别的资源（目前有些浏览器已经实现并行下载）。所以出现defer和async属性，优化页面的显示。
defer（延迟）是html4.0中定义的，该属性使得浏览器能延迟脚本的下载，等document文档载入和解析完成后，按照他们在文档中出现顺序再去下载解析。也就是说defer属性的<script>就类似于将<script>放在body底部的效果，会在document的DOMContentLoaded事件之前执行。
将脚本放在body底部比给脚本增加defer属性让脚本延迟加载更好。
async（异步）是HTML5新增的属性，该属性的作用是让浏览器能并行下载脚本且不阻塞浏览器的文档解析和渲染，下载完成后脚本立即执行，可能无序执行，取决于下载完成的时间）
若浏览器同时支持上述两种属性且script标签同时具有这两种属性，则async属性会优于defer生效。
在不支持async属性的浏览器里，可以通过动态创建script元素并插入文档中，实现脚本的异步载入和执行：
requirejs就是使用这个方法实现的。
您可能感兴趣的文章: