使用回退异步加载 jquery 核心

Posted 2023-02-19

【中文标题】使用回退异步加载 jquery 核心

【英文标题】：Load jquery core asynchronous with fallback

【发布时间】：2014-03-21 11:58:53

【问题描述】：

通过标头中的性能优化和非阻塞脚本，我一直在尝试异步加载 jquery 本身。

我遇到了一个jQuery Loader 脚本，该脚本async 加载jquery，然后捕获jquery 文档就绪调用并将其排队。这似乎在大多数情况下都有效，但并非总是如此。

因此，如果加载器在 x 秒内没有完成，我创建了一个后备来加载本地 jquery 版本。回退有效，但不完全有效。有些部分可能有效，有些则无效。

到目前为止，在加载 jquery 加载器脚本后，在 head 中调用的脚本：

<script type="text/javascript">
function loadScript(url)

    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);


var fallback_timer = setTimeout(function() 
    loadScript('/path/to/local/js/jquery.js');
,5000);
jQl.loadjQ('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',function(clearTimeout(fallback_timer););

</script>

问题：

任何有 jQuery Loader (jQl) 经验的人都可以帮助修复 经常失败的问题？

谁能告诉我为什么，万一失败，只有我的其他一些 js 脚本可以工作，但有些脚本一直失败？

我非常愿意异步加载 jquery 核心与其他一些 要查找的插件/脚本/方向。

澄清一下，我不是在看使用 jQuery 异步加载脚本，而是异步加载 jquery 本身，同时支持在未来某个地方加载 jquery 依赖的脚本。

【问题讨论】：

为什么不在 BODY 的末尾包含 jQuery，而是同步？顺便说一句，defer|async html5 脚本属性呢？

我认为异步加载 jQuery 没有任何意义。并且 jQuery 本身通常不会长时间阻塞加载。您真的认为通过异步加载可以显着提升客户体验吗？

@A.Wolff 原因是系统是模块化的，我无法预见可能的 jQuery 内联调用。我喜欢这个脚本的工作方式，因为它捕获和排队 jQuery 调用，因此系统不会中断。但也许我应该重新确定优先级并在所有这些问题出现时解决它们。

@Seb 确实感觉更快了，在 Google Pagespeed Insight 分析中分数上升了大约 10 分，这是一个很好的卖点。

您可以将// @codekit-prepend "jquery.js" 放入您的global.js 并在html 末尾使用async 属性调用它。

【参考方案1】：

如果没有成功从本地源加载，首先从CDN加载jQuery。

我会推荐以下，

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"></script>')</script>
<script type="text/javascript" src="scripts.js"></scripts>

来自Load jQuery with Javascript and use jQuery

在您的代码中，您应该仅在未加载 jQuery 时加载它并检查您是否在 Firebug（Net 选项卡）中没有拼错文件路径

【讨论】：

这是从带有本地回退的 CDN 调用 jquery 的好方法。但是，这似乎并不能真正回答我的问题。

【参考方案2】：

如果您希望先加载 jquery 然后执行某些操作，我可以帮助您！

最佳解决方案

我写了一个函数来连续加载很多你想要的脚本。

function loadScripts(urls, length, success)
    if(length > 0)
        script = document.createElement("SCRIPT");
        script.src = urls[length-1];
        console.log();
        script.onload = function() 
            console.log('%c Script: ' + urls[length-1] + ' loaded!', 'color: #4CAF50');
            loadScripts(urls, length-1, success);               
        ;
        document.getElementsByTagName("head")[0].appendChild(script);
    
    else
        if(success)
            success();

简单的加载脚本

urls = ['https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js',
    'http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'
    ];

loadScripts(urls, urls.length, function()
    /* Do something here after loading all script */

);

希望能解决您的问题！