Question

可以使用哪些技巧来阻止各种在线服务的javascript标注，从而减慢页面加载速度？

显而易见的解决方案是在页面底部执行所有javascript调用，但有些调用需要在顶部和中间进行。想到的另一个想法是使用iframe。

您是否曾经不得不解开一个充满外部加载javascript的网站，该网站速度太快，以至于它不会释放apache并导致高负载中断？任何提示和技巧？

Answer 1

window onload是一个很好的概念，但更好的选择是使用jQuery并将代码放在“文档就绪”块中。这具有相同的效果，但您不必担心已经拥有订户的onload函数。

http://docs.jquery.com/Core/jQuery#callback

$(function(){
  // Document is ready
});

OR：

jQuery(function($) {
  // Your code using failsafe $ alias here...
});

编辑：使用此模式可以调用所有外部服务。重构外部脚本文件，将其ajax调用放在其中一个文档就绪块中的外部服务中，而不是执行内联。然后唯一的加载时间是实际下载脚本文件所需的时间。

EDIT2：您可以在页面加载后加载脚本，也可以使用jQuery的内置功能在页面上的任何其他dom事件中加载脚本。

http://docs.jquery.com/Ajax/jQuery.getScript

jQuery(function($) {
   $.getScript("http://www.yourdomain.com/scripts/somescript1.js"); 
   $.getScript("http://www.yourdomain.com/scripts/somescript2.js"); 
});

Answer 2

不容易解决。在某些情况下，可以将外部文件合并到一个单元中并对其进行压缩，以最大限度地减少HTTP请求和数据传输。但是使用这种方法，您需要从主机提供新的javascript文件，但这并不总是可行。

我无法看到iframe解决问题......你能详细说明一下吗？

Answer 3

如果您使用的是第三方JavaScript框架/工具包/库，它可能会提供一个函数/方法，允许您在DOM完全加载后执行代码。例如，The Dojo Toolkit提供dojo.addOnLoad。同样，jQuery提供Events/ready（或其shorthand form，可通过将函数直接传递给jQuery对象来访问。）

如果您坚持使用纯JavaScript，那么诀窍就是使用window.onload事件处理程序。虽然这最终会完成同样的事情，但window.onload会在页面之后执行 - 并且其中的所有内容（包括图像）都已完全加载，而上述库会在加载图像之前检测DOM准备就绪的第一时刻。 / p>

如果您需要从头部的脚本访问DOM，这也是将脚本添加到文档末尾的首选替代方法。

例如（使用window.onload）：

<html>
    <head>
        <title>Test Page</title>
        <script type="text/javascript">
            window.onload = function () {
                alert(document.getElementsByTagName("body")[0].className);
            };
        </script>
    <style type="text/css">
        .testClass { color: green; background-color: red; }
    </style>
    </head>
    <body class="testClass">
        <p>Test Content</p>
    </body>
</html>

这使您可以在页面加载完成后安排某个操作。要查看此效果，请将以上脚本与以下内容进行比较，这将阻止页面加载，直到您关闭模式警报框：

<html>
    <head>
        <title>Test Page</title>
        <script type="text/javascript">
            alert("Are you seeing a blank page underneath this alert?");
        </script>
        <style type="text/css">
            .testClass { color: green; background-color: red; }
        </style>
    </head>
    <body class="testClass">
        <p>Test Content</p>
    </body>
</html>

如果您已经定义了window.onload，或者如果您担心可能会重新定义它并破坏第三方脚本，请使用此方法追加 - 而不是重新定义 - window.onload。（这是Simon Willison's addLoadEvent function的略微修改版本。）

if (!window.addOnLoad)
{
    window.addOnLoad = function (f) {
        var o = window.onload;

        window.onload = function () {
            if (typeof o == "function") o();
            f();
        }
    };
}

第一个示例中的脚本，已修改为使用此方法：

window.addOnLoad(function () {
    alert(document.getElementsByTagName("body")[0].className);
});

修改以使用Dojo：

dojo.addOnLoad(function () {
    alert(document.getElementsByTagName("body")[0].className);
});

修改以使用jQuery：

$(function () {
    alert(document.getElementsByTagName("body")[0].className);
});

因此，既然您可以在页面加载时执行代码，那么您可能希望动态加载外部脚本。就像上面的部分一样，大多数主要的框架/工具包/库都提供了这样做的方法。

或者，你可以自己动手：

if (!window.addScript)
{
    window.addScript = function (src, callback) {
        var head = document.getElementsByTagName("head")[0];
        var script = document.createElement("script");
        script.src = src;
        script.type = "text/javascript";
        head.appendChild(script);
        if (typeof callback == "function") callback();
    };
}

window.addOnLoad(function () {
    window.addScript("example.js");
});

使用Dojo（dojo.io.script.attach）：

dojo.addOnLoad(function () {
    dojo.require("dojo.io.script");
    dojo.io.script.attach("exampleJsId", "example.js");
});

使用jQuery（jQuery.getScript）：

$(function () {
    $.getScript("example.js");
});

Answer 4

请参阅文章Serving JavaScript Fast和Faster AJAX Web Services through multiple subdomain calls以获取一些建议。

Answer 5

如果您不需要特定的脚本广告加载时间，可以稍后通过在运行时向页面添加其他脚本元素来加载它。

有什么方法可以最大限度地减少来自外部javascript标注的页面等待？

5 个答案: