标题：*
140 字

TAG标签：（用空格隔开）
30 字

恢复历史版本：

HTML转MD HTML转MD2

<blockquote style="margin: 10px 0px; padding: 5px 15px; background: none rgb(255, 255, 255); border: 2px solid rgb(239, 239, 239); min-height: 35px; line-height: 1.6; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; white-space: normal;"><code style="margin: 0px; padding: 0px;">script</code>标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。 直接使用<code style="margin: 0px; padding: 0px;">script</code>脚本的话，<code style="margin: 0px; padding: 0px;">html</code>会按照顺序来加载并执行脚本，在脚本加载&amp;执行的过程中，会阻塞后续的<code style="margin: 0px; padding: 0px;">DOM</code>渲染。</blockquote>现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。 好在<code style="margin: 0px; padding: 0px;">script</code>提供了两种方式来解决上述问题，<code style="margin: 0px; padding: 0px;">async</code>和<code style="margin: 0px; padding: 0px;">defer</code>，这两个属性使得<code style="margin: 0px; padding: 0px;">script</code>都不会阻塞<code style="margin: 0px; padding: 0px;">DOM</code>的渲染。 但既然会存在两个属性，那么就说明，这两个属性之间肯定是有差异的。<h2 id="defer" style="margin: 10px 0px; padding: 0px; font-size: 21px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">defer</h2><blockquote style="margin: 10px 0px; padding: 5px 15px; background: none rgb(255, 255, 255); border: 2px solid rgb(239, 239, 239); min-height: 35px; line-height: 1.6; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; white-space: normal;">如果<code style="margin: 0px; padding: 0px;">script</code>标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续<code style="margin: 0px; padding: 0px;">DOM</code>的渲染； 如果有多个设置了<code style="margin: 0px; padding: 0px;">defer</code>的<code style="margin: 0px; padding: 0px;">script</code>标签存在，则会按照顺序执行所有的<code style="margin: 0px; padding: 0px;">script</code>； <code style="margin: 0px; padding: 0px;">defer</code>脚本会在文档渲染完毕后，<code style="margin: 0px; padding: 0px;">DOMContentLoaded</code>事件调用前执行。</blockquote>我们做了一个测试页面，页面中包含了两个<code style="margin: 0px; padding: 0px;">script</code>标签的加载，给他们都加上<code style="margin: 0px; padding: 0px;">defer</code>标识。 P.S. 为了更直观，我们给<code style="margin: 0px; padding: 0px;">script1.js</code>添加了<code style="margin: 0px; padding: 0px;">1s</code>的延迟，给<code style="margin: 0px; padding: 0px;">script2.js</code>添加了<code style="margin: 0px; padding: 0px;">2s</code>的延迟。 <img src="/ueditor/php/upload/image/20180913/1536826580431625.png" alt="image" width="502" height="193" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/> 下图是页面加载的过程&amp;<code style="margin: 0px; padding: 0px;">script</code>脚本的输出顺序。 不难看出，虽然<code style="margin: 0px; padding: 0px;">script1</code>加载用时虽然比<code style="margin: 0px; padding: 0px;">script2</code>短，但因为<code style="margin: 0px; padding: 0px;">defer</code>的限制，所以Ta只能等前边的脚本执行完毕后才能执行。 <img src="/ueditor/php/upload/image/20180913/1536826580200460.png" alt="image" width="772" height="487" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/> <img src="/ueditor/php/upload/image/20180913/1536826580519877.png" alt="image" width="776" height="490" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/><h2 id="async" style="margin: 10px 0px; padding: 0px; font-size: 21px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">async</h2><blockquote style="margin: 10px 0px; padding: 5px 15px; background: none rgb(255, 255, 255); border: 2px solid rgb(239, 239, 239); min-height: 35px; line-height: 1.6; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; white-space: normal;"><code style="margin: 0px; padding: 0px;">async</code>的设置，会使得<code style="margin: 0px; padding: 0px;">script</code>脚本异步的加载并在允许的情况下执行 <code style="margin: 0px; padding: 0px;">async</code>的执行，并不会按着<code style="margin: 0px; padding: 0px;">script</code>在页面中的顺序来执行，而是谁先加载完谁执行。</blockquote>我们修改测试页面如下： <img src="/ueditor/php/upload/image/20180913/1536826580854226.png" alt="image" width="486" height="191" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/> 遂得到了如下的结果，页面加载时长上，并没有什么变化，毕竟都是异步加载的脚本。 但是我们可以看到一个小细节，<code style="margin: 0px; padding: 0px;">DOMContentLoaded</code>事件的触发并不受<code style="margin: 0px; padding: 0px;">async</code>脚本加载的影响，在脚本加载完之前，就已经触发了<code style="margin: 0px; padding: 0px;">DOMContentLoaded</code>。 <img src="/ueditor/php/upload/image/20180913/1536826581160058.png" alt="image" width="860" height="539" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/> <img src="/ueditor/php/upload/image/20180913/1536826581194050.png" alt="image" width="858" height="537" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/> <img src="/ueditor/php/upload/image/20180913/1536826581256374.png" alt="image" width="852" height="534" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/> <img src="/ueditor/php/upload/image/20180913/1536826581852508.png" alt="image" width="901" height="564" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/>我们接着修改测试页面。加载一个没有延迟的<code style="margin: 0px; padding: 0px;">script</code>脚本，使得脚本可以即时的加载完毕。 我们要测试一下，如果<code style="margin: 0px; padding: 0px;">async</code>脚本加载的足够快，是否会在<code style="margin: 0px; padding: 0px;">DOMContentLoaded</code>之前就执行（这个实验是基于对<code style="margin: 0px; padding: 0px;">async</code>的描述“在允许的情况下执行”的论证）。 同时为了保证测试的稳定性，我们在<code style="margin: 0px; padding: 0px;">script</code>脚本引入的后边添加了数千个空的<code style="margin: 0px; padding: 0px;">div</code>节点，用来延长文档的渲染时间。 <img src="/ueditor/php/upload/image/20180913/1536826582867954.png" alt="image" width="534" height="231" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/> 执行结果不出所料，如果给<code style="margin: 0px; padding: 0px;">async</code>一定的时间，是有可能在<code style="margin: 0px; padding: 0px;">DOMContentLoaded</code>事件之前就执行的。 <img src="/ueditor/php/upload/image/20180913/1536826582523687.png" alt="image" width="901" height="564" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/> P.S. 从上图中左上角的火焰图中，我们也能看到，出现了多段的蓝色（更新：晚上写的时候懵了，紫色的才是渲染，蓝色的是解析）文档渲染。以及下边<code style="margin: 0px; padding: 0px;">Console</code>的顺序。 说明的确，<code style="margin: 0px; padding: 0px;">async</code>的执行是加载完成就会去执行，而不像<code style="margin: 0px; padding: 0px;">defer</code>那样要等待所有的脚本加载完后按照顺序执行。<h2 id="画几张图简要说明" style="margin: 10px 0px; padding: 0px; font-size: 21px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">画几张图简要说明</h2><blockquote style="margin: 10px 0px; padding: 5px 15px; background: none rgb(255, 255, 255); border: 2px solid rgb(239, 239, 239); min-height: 35px; line-height: 1.6; color: rgb(51, 51, 51); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; white-space: normal;">网上有了不少这种类似的图，但是基本都是拿一个script就举例的 未免太过寒酸，so咱们来一个豪华版，来画一下多个脚本加载时的甘特图 就像近年来各大手机厂商，出新机都喜欢来一个X+X plus</blockquote>拿四个不同的颜色来标明各自代表的含义更正：文档渲染 应该为 文档解析 <img src="/ueditor/php/upload/image/20180913/1536826582926321.png" alt="image" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/><h3 id="普通script" style="margin: 10px 0px; padding: 0px; font-size: 16px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">普通script</h3>文档解析的过程中，如果遇到<code style="margin: 0px; padding: 0px;">script</code>脚本，就会停止页面的解析进行下载（但是Chrome会做一个优化，如果遇到<code style="margin: 0px; padding: 0px;">script</code>脚本，会快速的查看后边有没有需要下载其他资源的，如果有的话，会先下载那些资源，然后再进行下载<code style="margin: 0px; padding: 0px;">script</code>所对应的资源，这样能够节省一部分下载的时间&nbsp;<code style="margin: 0px; padding: 0px;">@Update: 2018-08-17</code>）。 资源的下载是在解析过程中进行的，虽说<code style="margin: 0px; padding: 0px;">script1</code>脚本会很快的加载完毕，但是他前边的<code style="margin: 0px; padding: 0px;">script2</code>并没有加载&amp;执行，所以他只能处于一个挂起的状态，等待<code style="margin: 0px; padding: 0px;">script2</code>执行完毕后再执行。 当这两个脚本都执行完毕后，才会继续解析页面。 <img src="/ueditor/php/upload/image/20180913/1536826582894382.png" alt="image" width="735" height="146" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/><h3 id="defer-1" style="margin: 10px 0px; padding: 0px; font-size: 16px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">defer</h3>文档解析时，遇到设置了<code style="margin: 0px; padding: 0px;">defer</code>的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析&amp;渲染完毕后。 会等到所有的<code style="margin: 0px; padding: 0px;">defer</code>脚本加载完毕并按照顺序执行，执行完毕后会触发<code style="margin: 0px; padding: 0px;">DOMContentLoaded</code>事件。 <img src="/ueditor/php/upload/image/20180913/1536826582742268.png" alt="image" width="730" height="156" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/><h3 id="async-1" style="margin: 10px 0px; padding: 0px; font-size: 16px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">async</h3><code style="margin: 0px; padding: 0px;">async</code>脚本会在加载完毕后执行。 <code style="margin: 0px; padding: 0px;">async</code>脚本的加载不计入<code style="margin: 0px; padding: 0px;">DOMContentLoaded</code>事件统计，也就是说下图两种情况都是有可能发生的<img src="/ueditor/php/upload/image/20180913/1536826582143105.png" alt="image" width="739" height="149" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/> <img src="/ueditor/php/upload/image/20180913/1536826583826759.png" alt="image" width="744" height="142" style="margin: 0px; padding: 0px; border: 0px; max-width: 660px; height: auto;"/><h2 id="推荐的应用场景" style="margin: 10px 0px; padding: 0px; font-size: 21px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">推荐的应用场景</h2><h3 id="defer-2" style="margin: 10px 0px; padding: 0px; font-size: 16px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">defer</h3>如果你的脚本代码依赖于页面中的<code style="margin: 0px; padding: 0px;">DOM</code>元素（文档是否解析完毕），或者被其他脚本文件依赖。 例：<ol style="padding: 0px 0px 0px 40px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>评论框</li><li>代码语法高亮</li><li><code style="margin: 0px; padding: 0px;">polyfill.js</code></li></ol><h3 id="async-2" style="margin: 10px 0px; padding: 0px; font-size: 16px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">async</h3>如果你的脚本并不关心页面中的<code style="margin: 0px; padding: 0px;">DOM</code>元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。 例：<ol style="padding: 0px 0px 0px 40px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li>百度统计</li></ol>如果不太能确定的话，用<code style="margin: 0px; padding: 0px;">defer</code>总是会比<code style="margin: 0px; padding: 0px;">async</code>稳定。。。<h2 id="参考资料" style="margin: 10px 0px; padding: 0px; font-size: 21px; line-height: 1.5; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">参考资料</h2><ol style="padding: 0px 0px 0px 40px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script" rel="external" target="_blank" style="margin: 0px; padding: 0px; color: rgb(0, 0, 0);">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script</a></li></ol>测试代码存放处：<a href="https://github.com/Jiasm/research-script-tag" rel="external" target="_blank" style="margin: 0px; padding: 0px; color: rgb(0, 0, 0);">https://github.com/Jiasm/research-script-tag</a> <code style="margin: 0px; padding: 0px;">clone</code>后执行<code style="margin: 0px; padding: 0px;">npm start</code>即可运行。 调试推荐使用<code style="margin: 0px; padding: 0px;">chrome</code>无痕模式（这样才不会在<code style="margin: 0px; padding: 0px;">Performance</code>页签上看到不相关的插件数据）。