包括我页面中的javascript文件

时间：2012-04-17 10:26:39

标签： javascript

我在我的网页上使用了很多（差不多15个）javascript文件。 包含所有这些文件的最佳方法是什么？

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

5 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：1)

您可以考虑使用并行/非阻止 javascript加载程序。

以下是一些很棒的图书馆可以为你做这件事..

http://headjs.com/

http://requirejs.org/

http://labjs.com/

答案 2 :(得分：1)

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

您可以将带有直接链接的脚本标记添加到api。

答案 3 :(得分：1)

我还没有完全掌握所有这些，但我发现相当多的缩小＆amp;连接可以由服务器自动化，我通过阅读HTML5 Boilerplate中的（注释良好的）.htaccess文件和相关文档已经学到了相当多的东西。

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

时，我能够让它工作。

答案 4 :(得分：0)

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

包含脚本的位置以及浏览器加载资源的方式

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

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

尺寸重要

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

正确的订单

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

如何将脚本包含到页面中

只有一种方法可以在页面中包含脚本（不推荐相同的原点ajax / eval），这是通过<script>标记。

只有两种方法可以创建<script>代码：

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

    3. 静态添加脚本

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

    <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方法将附加到现有的dom。

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

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

    使用document.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，即使您正在呼叫一个网址，服务器响应可能会有所不同
    2. 如果您的用户在访问我的网站时已经从谷歌的CDN获得了jQuery，那么很多网站可能会使用相同的CDN，他的浏览器只会在您要求时使用其拥有的缓存副本。

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

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

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

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

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

      单独脚本保留的唯一优势是退出登录页面的用户以及我们为什么要为他们进行优化，因为它们不会留下来。

      的nJoy！

相关问题
最新问题