学习 Async Defer 和动态脚本本文就可以了

发布时间：2022-09-02 09:56:52 所属栏目：安全来源：互联网

导读：脚本：async，defer 现代的网站中，脚本往往比 HTML 更重：它们的大小通常更大，处理时间也更长。当浏览器加载 HTML 时遇到标签，浏览器就不能继续构建 DOM。它必须立刻执行此脚本。对于外部脚本也是一样的：浏览器必须等脚本下载完，并执行结束，之后才

　　脚本：async，defer

　　现代的网站中，脚本往往比 HTML 更“重”：它们的大小通常更大，处理时间也更长。

　　当浏览器加载 HTML 时遇到标签，浏览器就不能继续构建 DOM。它必须立刻执行此脚本。对于外部脚本也是一样的：浏览器必须等脚本下载完，并执行结束，之后才能继续处理剩余的页面。

　　这会导致两个重要的问题：

　　脚本不能访问到位于它们下面的 DOM 元素，因此，脚本无法给它们添加处理程序等。
　　如果页面顶部有一个笨重的脚本，它会“阻塞页面”。在该脚本下载并执行结束前，用户都不能看到页面内容：
　　复制
　　<p>...content before script...</p>
　　
　　<script src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

　　但是这种解决方案远非完美。例如，浏览器只有在下载了完整的 HTML 文档之后才会注意到该脚本(并且可以开始下载它)。对于长的 HTML 文档来说，这样可能会造成明显的延迟。

　　这对于使用高速连接的人来说，这不值一提，他们不会感受到这种延迟。但是这个世界上仍然有很多地区的人们所使用的网络速度很慢，并且使用的是远非完美的移动互联网连接。

　　幸运的是，这里有两个 <script> 特性（attribute）可以为我们解决这个问题：defer 和 async。

　　defer 特性告诉浏览器不要等待脚本。相反，浏览器将继续处理 HTML，构建 DOM。脚本会“在后台”下载，然后等 DOM 构建完成后，脚本才会执行。

　　换句话说：

　　具有 defer 特性的脚本不会阻塞页面。
　　具有 defer 特性的脚本总是要等到 DOM 解析完毕，但在 DOMContentLoaded 事件之前执行。
　　下面这个示例演示了上面所说的第二句话：

　　复制
　　<p>...content before scripts...</p>
　　
　　<script>
　　 document.addEventListener('DOMContentLoaded', () => alert("DOM ready after defer!"));
　　</script>
　　
　　<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
　　
　　<p>...content after scripts...</p>

　　DOMContentLoaded 事件处理程序等待具有 defer 特性的脚本执行完成。它仅在脚本下载且执行结束后才会被触发。
　　具有 defer 特性的脚本保持其相对顺序，就像常规脚本一样。

　　浏览器扫描页面寻找脚本，然后并行下载它们，以提高性能。因此，在上面的示例中，两个脚本是并行下载的。small.js 可能会先下载完成。

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

微软宣称伊朗黑客使用	开源安全情报引擎Crit
NLP系列之Word2Vec模型	Forrester 攻击面管理

学习 Async Defer 和动态脚本 本文就可以了

学习 Async Defer 和动态脚本本文就可以了