异步加载脚本并具有后备

时间:2012-01-30 09:57:21

标签: javascript deferred-execution

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

我想使用仅浏览器的API 来执行此操作。我不希望浏览器加载任何可靠的(或不是)脚本,无论它们有多小,都可以为我做这些。

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

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

我重复:我不需要任何花哨的东西来使脚本异步。如果浏览器不支持延迟或异步,我不在乎。我只关心加载脚本以便在满足其先决条件后执行每个部分,如果浏览器支持,则使用async或defer

1 个答案:

答案 0 :(得分:2)

首先,使用诸如jQuery之类的库可以使整个过程在浏览器中变得更加容易和可靠。它可能会增加页面的下载量(减少量),但高效脚本加载/执行所获得的速度几乎总是超过这个。

关于脚本异步和延迟属性:

  1. async="async":IE8 / 9根本不支持脚本标签,脚​​本立即执行(根据您的问题,这是正常的)。

  2. defer="defer":在DOM Ready之前,脚本标记将按照延迟脚本在HTML中出现的顺序开始加载。但是,在Firefox上,脚本通常会在dom准备就绪后执行。这种差异使得defer不可靠,以确保在dom准备好之后执行函数之前加载脚本。

  3. 不使用jQuery的一般指南:

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

    2. 如果脚本没有下游依赖项,则将其放在body标记的末尾,并在脚本标记上使用async =“async”属性。 IE会立即呈现它,其他人会在收到它时呈现它。

    3. 使用jQuery的一般指南:

      1. 只在您的<head>

      2. 中放置jQuery
      3. 执行所有其他脚本$.getScript()

      4. 如果脚本需要执行ASAP(例如分析),请在正文顶部使用$.getScript(这将是一个非阻塞请求,但会在客户端收到后立即处理文件)。

      5. 如果脚本可以等到DOM就绪,请将$.getScript()电话打包在$(function() {});

      6. 如果脚本有许多下游依赖项,则每个脚本都将自己注册到特定脚本的回调函数。

      7.   $(function() { 
            $.getScript("script.js", function() {
              for(var i = 0; i < myCallbacks.length;i++) {
                myCallbacks[i]();
              }
            });
          });