1

我的目标是在浏览器支持延迟或异步时异步加载脚本。
如果浏览器都不支持我不关心异步加载（不是我的坏）。
我想确保只有在满足其先决条件时才执行任何脚本，例如加载 jQuery。我想在加载其他脚本的同时加载我的脚本（仅当浏览器支持延迟或异步时）。

我想只使用浏览器的 API来做到这一点。我不希望浏览器加载任何可靠（或不）为我执行此操作的脚本，无论它们多么小。

这必须适用于 IE8+、Gecko v.1.9.1+（例如 firefox 3.5.* 或 firefox 9.0+）、webkit（例如 chrome）、presto（例如 Opera）。对于我没有提到版本的那些，我指的是最新的稳定版本。

如果可能的话，我不想要任何不容易的脚本。我只需要一些简单的东西来完成这项工作。这意味着：
如果可能的话，我不希望 AJAX 调用或带有某些方法的花哨对象之类的东西来做一些我在其他页面中看到的变通方法。这些是强制在不支持异步或延迟的浏览器中异步加载脚本

我再说一遍：我不需要任何花哨的东西来使脚本异步。如果浏览器不支持延迟或异步，我不在乎。我只关心脚本是否已加载，以便在满足其先决条件后执行每个部分，并在浏览器支持的情况下使用异步或延迟。

4

1 回答 1

1

首先，使用诸如此类的库jQuery使整个过程变得无限容易，并且跨浏览器可靠。它可能会增加页面的下载大小（增加很小的量），但通过有效的脚本加载/执行获得的速度几乎总是超过这一点。

关于脚本 async 和 defer 属性：

  1. async="async"： IE8/9 根本不支持脚本标记，脚本立即执行（根据您的问题可以）。

  2. defer="defer": on a script 标签将在所有内容之后开始加载，延迟脚本在 HTML 中出现的顺序，在 DOM 就绪之前。但是，在 Firefox 上，脚本通常会在 dom 准备好之后执行。这种差异使得defer确保在 dom 准备好之后执行函数之前加载脚本的方法变得不可靠。

不使用时的一般准则jQuery：

  1. 如果脚本具有下游依赖项，则必须将其作为标准脚本标记放置在正文标记的末尾，并在文档准备好后执行所有内联标记。否则，无法保证脚本将在执行依赖项之前执行。Firefox 是这里的主要问题，即使在 DOM 准备好之后，“延迟”脚本可能还没有完成。

  2. 如果脚本没有下游依赖项，则将其放在主体标签的末尾，并在脚本标签上使用 async="async" 属性。IE会立即渲染，其他人收到后会渲染。

使用时的一般准则jQuery：

  1. 仅将 jQuery 放在您的<head>.

  2. 将所有其他脚本作为$.getScript().

  3. 如果脚本需要尽快执行（例如分析）$.getScript，请在正文顶部使用 a（这将是一个非阻塞请求，但会在客户端收到文件后立即处理）。

  4. 如果脚本可以等到 DOM 准备好，则将$.getScript()调用包装在$(function() {});

  5. 如果一个脚本有很多下游依赖，让每一个都将自己注册到特定脚本的回调函数中。

  $(function() { 
    $.getScript("script.js", function() {
      for(var i = 0; i < myCallbacks.length;i++) {
        myCallbacks[i]();
      }
    });
  });
于 2012-04-19T22:05:10.187 回答