3

我在我的网页中使用了许多（几乎 15 个）javascript 文件。包含所有这些文件的最佳方式是什么？

只是在底部，还是应该使用其他一些可以更快地加载 javascript 的技术？

4

5 回答 5

2

你可以合并和缩小它们。YUI Compressor可以做到这一点。

于 2012-04-17T10:28:27.163 回答
1

您可以考虑使用并行/非阻塞javascript 加载器。

以下是一些可以为您做到这一点的优秀库..

http://headjs.com/

http://requirejs.org/

http://labjs.com/

于 2012-04-17T10:37:34.587 回答
1

Google Closure Compiler 有一个方便的 web api，用于合并和缩小所有 js。 https://developers.google.com/closure/compiler/docs/api-ref

您可以放置​​一个带有直接链接到 api 的脚本标记。

于 2012-04-17T11:43:12.533 回答
1

我还没有完全掌握实现这一切，但我发现服务器可以自动进行大量的缩小和连接，我从阅读 HTML5 样板和相关联的（注释良好的）.htaccess 文件中学到了很多文档。

Modernizr 还具有异步加载器功能，并且有足够的文档记录，当我无法弄清楚 require.js 时，我能够让它工作

于 2012-09-19T19:42:06.607 回答
0

您可以使用脚本加载器库，也可以自己完成。

在哪里包含脚本以及浏览器如何加载资源

始终位于结束标签之前的底部<body>，以增强用户体验。它确保首先呈现页面内容，从而给人一种页面加载速度更快的印象。

浏览器运行单线程，将从上到下处理页面内容，如果它发生在资源上，它首先必须检索资源，处理它，然后只继续页面上的下一个标签。由于我们通常希望等待 DOM 完成加载，因此无论如何在运行任何脚本之前，这种策略总是双赢的。

大小事项

对于生产，您希望确保所有脚本都被最小化，无论您将采用何种策略来加载它们（更小的尺寸 == 更少的下载 == 更快）

正确的顺序

最重要的始终是依赖顺序，如果我们调用一个函数或访问一个变量，而浏览器不知道它，脚本就会失败。您要确保仅在它们所依赖的任何脚本之后才包含脚本。因此，首先要做的是确定您需要在浏览器中包含和引入功能的顺序。

如何在页面中包含脚本

只有一种方法可以在页面中包含脚本（不推荐使用同源 ajax/eval），那就是通过<script>标签。

<script>创建标签只有两种方法：

  1. 静态位于 html 或
  2. 使用 JavaScript 动态添加。

静态添加的脚本

由于我们知道我们需要包含脚本的顺序，我们可以像这样一个接一个地添加它们

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.widgets.min.js"></script>

动态添加的脚本

有三种方法可以有效地在 dom 中动态创建脚本标签，我们将对此进行探索。这些当然不是唯一的方法......

文档.write

write 方法将追加到现有的 dom。

document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>');

但是现在我们遇到了一个问题，因为没有办法告诉脚本已经完成加载，因为我们必须等到它完成才能加载下一个或调用那里定义的东西。

文档.createElement

createElement 方法创建一个 dom 元素，我们可以将它插入到我们选择的 dom 中的任何位置。以下示例检查 jQuery 是否存在或创建一个<script>元素来获取它。无论如何，函数 ready_go 被调用，我们应该有 jQuery。

(function() {
    if (!window.jQuery) {
        var jq = document.createElement('script');
        jq.type = 'text/javascript';
        jq.async = true;
        jq.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(jq, s);

        jq.onreadystatechange = jq.onload = ready_go;
    } else ready_go();
})();

jQuery.getScript

由于我们现在有了 jQuery，我们不必费力地做事，getScript 将脚本 url 作为第一个参数，并在脚本完成后将函数作为第二个参数调用。

function ready_go() {
    $.getScript('http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.min.js', function () {
         // script is done loading we can include the next
         $.getScript('http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.5.2/jquery.tablesorter.widgets.min.js', function () {
             // script is done loading we can include the next or start using our stuff
         });
    });
}

从哪里获取脚本？

您要么想从公共 CDN 获取脚本，要么自己托管它们。需要牢记的一个重要概念是，与任何其他资源一样，脚本会被浏览器缓存，您无需重复下载相同的脚本。

来自内容交付网络的脚本

CDN 的优势是双重的；

  1. 你离用户更近了，因为 CDN 由分布在世界各地的 POP 组成，即使你调用一个 url，服务器响应也可能不同
  2. 如果您的用户在访问我的网站时已经从 google 的 CDN 获得了 jQuery，那么许多网站可能会使用相同的 CDN，他的浏览器会在您请求时简单地使用其已经拥有的缓存副本。

从源（您的服务器）提供的脚本

我同意@Mario 和@Xharze 建议的策略，每页包含18 个脚本。

在脚本可用但其余部分使用 CDN。

将所有脚本连接在一起，记住应用相同的依赖顺序，并缩小它们。

拥有一个脚本将简化您的包含，并且由于浏览器将缓存脚本，因此不再需要额外的下载，这对于长时间使用和访问许多页面的应用程序特别有用。

单独脚本的唯一优势是对于退出登录页面的用户以及我们为什么要为他们优化他们不会因此而留下来。

开心！

于 2013-01-22T03:02:15.250 回答