使用HTML5异步和延迟加载非阻塞JavaScript

加载JavaScript是最大的性能瓶颈之一。 在正常情况下， script标签会导致浏览器停止渲染，加载文件并运行代码。 由于您的JavaScript可能会写页面，修改现有元素或重定向到另一个URL，因此浏览器无法执行其他有用的工作。因此，将script标签放在HTML底部</身体>。 浏览器可能在一两秒钟内没有响应，但是由于主要内容已加载而并不引起注意。但是，即使该解决方案也不足以解决当今的数兆字节的客户端应用程序。 在极端情况下，必须使用script标记注入或Ajax技术加载大型代码库。 这样可以防止阻塞，但是需要其他代码和严格的测试才能确保脚本在所有浏览器中均以正确的顺序运行。

defer属性

defer属性向浏览器郑重承诺。 它指出您的JavaScript不包含任何document.write或DOM修改内容：

<script src="file.js" defer></script>

浏览器将开始并行下载file.js和其他延迟脚本，而不会停止页面处理。 12年前，Internet Explorer 4.0版中实现了defer 。 从3.5版开始，Firefox也已经提供了该功能，尽管所有延迟脚本都可以按顺序运行，但是很难确定何时会发生。 从理论上讲，它应该在DOM完全加载之后，DOMContentLoaded事件之前不久发生。 实际上，这取决于操作系统和浏览器，是否缓存脚本以及当时其他脚本在做什么。

async属性

HTML5中引入了async ：

<script src="file.js" async></script>

async与defer相同，除了脚本在下载后的第一个机会执行之外（可以添加可选的onload属性来运行特定功能）。 您不能保证脚本会按顺序执行，但是脚本会在window onload事件触发时加载。Firefox3.6，Opera 10.5和最新的WebKit构建支持async ，因此应在下一个中显示版本的Chrome和Safari。 IE9尚不支持async ，但是IE团队可以轻松地将其添加为defer的别名。 您可以同时使用async和defer来支持所有浏览器-甚至是IE4。也许几个月后，我们终于有了一种本机，非阻塞的JavaScript加载方法，该方法可在所有浏览器中使用。

注意： Opera的延迟脚本执行

Opera提供了实验性的“延迟脚本执行”工具，可以在about：config中启用它。 它记住了页面上async脚本的加载位置，因此可以使用document.write或修改DOM。此功能将立即使窗口小部件受益，并阻止该页面加载。 让我们希望Microsoft，Mozilla和WebKit跟随Opera的领导。

From: https://www.sitepoint.com/non-blocking-async-defer/