JavaScript无阻塞加载和defer、async详解

JavaScript的阻塞特性与无阻塞加载策略

JavaScript（JS）具有阻塞特性，这意味着当浏览器在执行JS代码时，无法执行其他任务。在下载JS的过程中，所有其他活动，如其他资源的下载和内容的呈现，都会被阻止，直到JS完成下载、和执行。这一特性对于网页的加载速度和用户体验有着重要影响。

关于无阻塞加载，我们先来了解一下传统的加载方式。当JS被放在HTML的head标签内时，旧版浏览器会按照先后顺序加载并执行JS，确保JS依赖不会出问题。但即使是并行下载，JS的执行仍然是同步的，先出现的script标签会先执行。这意味着任何JS在执行时都会中断HTML文档的，从而影响页面渲染。但值得注意的是，JS的加载并不会影响已经渲染的页面内容。

为了改善这一状况，现代浏览器开始允许并行加载JS，但仍需关注其执行顺序和依赖关系。值得注意的是，动态脚本的下载和执行方式有所不同。动态脚本是通过动态创建script元素来加载的，这种方式的下载不会阻塞其他资源，但执行仍然会阻塞浏览器其他行为。动态脚本的好处在于不会阻塞UI的执行，也不会影响其他同步JS代码的执行。这使得我们可以更加灵活地处理JS资源，提高页面的加载速度和用户体验。

为了进一步提高页面加载速度，可以采取一些策略。例如，将常用的静态资源放在同一个静态资源服务器上，利用浏览器限制连接个数的特点，通过域名分割来并行下载多个资源。将所有外部JS代码分为UI初始化代码和其他代码，通过事件触发来延迟执行那些与页面加载无关的JS脚本。这些策略都有助于提高页面的加载速度和性能。

无阻塞脚本的核心技术在于动态创建script的DOM节点，甚至可以跨域访问。这意味着我们可以根据需求动态地加载和执行JS代码，而不会阻塞页面的其他部分。这种技术对于大型应用程序或需要动态加载资源的网站来说非常有用。它不仅可以提高页面的加载速度，还可以改善用户体验。

虽然JS的阻塞特性给网页开发带来了一定的挑战，但通过合理的策略和技巧，我们可以实现无阻塞加载，提高页面的性能和用户体验。无论是放在head标签内还是html文档底部，使用无阻塞脚本都能有效地改善页面的加载速度和响应性。在网页浏览的历程中，页面加载的效率一直是开发者关注的重点。我们谈论的并非仅仅是总页面加载时间，而是更为关键的页面同步阻塞加载时间。非阻塞脚本加载虽然可能会延长整体页面加载的时间，但它能够有效减少页面阻塞加载的时间，从而提升用户体验。

当我们脚本的异步执行时，前后依赖问题不可忽视。为了应对这一问题，非ie浏览器会触发 <script> 元素的 onload 事件，而ie浏览器则通过onreadystatechange事件来处理。无论何时，每当浏览器到 <script> 标签时，无论内嵌还是外部链接，浏览器都会优先下载、并执行该标签中的javaScript代码，这一过程会阻塞其后所有页面内容的下载和渲染。这意味着，即使是外部js的下载也会阻塞其他线程，尽管目前有部分浏览器支持并行下载js。

无阻塞加载脚本技术的精髓在于，它在动态下载js脚本时并不会阻断UI线程的执行。为什么动态脚本不会阻塞UI线程呢？可能是因为浏览器认定动态资源不会影响页面渲染。

当我们谈到让script延迟和异步的两个属性——defer和async时，我们需要了解它们是如何优化页面显示的。js脚本会改变文档输入流的内容，因此执行js时会暂停页面的渲染。对于内联脚本并无大碍，但对于外部引入的脚本，脚本的下载会阻塞浏览器文档的和渲染。出现了defer和async属性。

Defer（延迟）是html4.0中定义的，它让浏览器能延迟脚本的下载，等到document文档载入和完成后，再按顺序下载。带有defer属性的<script>就像被放在了body底部，会在document的DOMContentLoaded事件之前执行。直接将脚本放在body底部比使用defer属性更为有效。

Async（异步）是HTML5新增的属性，它让浏览器能并行下载脚本且不阻塞文档的和渲染。下载完成后，脚本会立即执行，执行顺序取决于下载完成的时间。若浏览器支持这两种属性且script标签具有这两种属性，则async属性会优先生效。