javascript - 延迟加载 JavaScript(3 个文件)

Question

我一整天都在阅读和复习 JavaScript 中的延迟加载，但什么也没做。我尝试使用 defer/async 属性和 deferredfunctions.js(?)。我应该用它做什么以及把它放在哪里？抱歉我的无知。

这是我的代码:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://mysite.com/files/js/mosaic.1.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){     $('.fade').mosaic();});</script>

Answer 1

这个问题有点太广泛了，无法正确回答。 异步/延迟加载 JavaScript 代码和使用脚本加载应该有很多不同的原因。

为什么要延迟加载？出于同样的原因，您应该将所有 <script>标签位于 HTML 标记的最底部。 <script>元素确实会阻止浏览器 HTML 渲染器的执行。当 <script>遇到元素时，HTML 解析器将停止并在继续之前加载+评估该脚本文件。这或多或少会对页面加载时间产生巨大的性能影响(取决于 JavaScript 文件的数量和大小)。

这就是为什么您应该标记 <script> 的原因具有 async 的元素和/或 deferr属性。如果浏览器理解这些属性(几乎每个现代浏览器都这样做)，它不会停止，而是异步加载和评估资源。

您现在可能会说，“顺序和依赖关系怎么样”，这将是一个有效且很好的论点。如果您为允许异步加载的浏览器标记所有脚本，则不再保证顺序，如果脚本依赖于其他脚本的存在，这将是一个大问题。这就是像 requireJS 这样的第三方脚本加载器登场的时刻。