什么是异步阻塞和异步非阻塞_使用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的领导。

翻译自: https://www.sitepoint.com/non-blocking-async-defer/

什么是异步阻塞和异步非阻塞