如果外部资源不是't在Firefox上加载

How do I unblock the rendering of my web page if an external resource isn't loading on Firefox?

本文关键字：Firefox 加载 资源 外部 如果      更新时间：2024-02-23

如果外部资源需要一段时间才能加载，我不想延迟页面的呈现，所以我实现了这个逻辑…

<script type="text/javascript">
    function importScript (sSrc, fOnload) {
        var oScript = document.createElement("script");
        oScript.type = "text'/javascript";
        oScript.defer = true;
        if (fOnload) { oScript.onload = fOnload; }
        document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
        oScript.src = sSrc;
    }
    importScript(“//thirdpartysite.com/theirscript.js", function () { doStuff(); });
     });
</script>

除了在Mac Firefox上（我使用的是45.0.1版本），这一功能非常好。在该浏览器上，只有加载了该资源，页面才会呈现。有人知道一种方法可以在不阻止页面渲染的情况下推迟资源加载吗？这种方法最好在Chrome和Firefox上都能使用（所有浏览器都很好，但我没有时间测试所有浏览器）。

由于您已经有了一个接受URL然后调用回调的系统，因此可以很容易地在那里插入setTimeout。类似的东西

function importScript(sSrc, fOnload) {
    setTimeout(function () {
        var oScript = document.createElement("script");
        oScript.type = "text'/javascript";
        oScript.defer = true;
        if (fOnload) {
            oScript.onload = fOnload;
        }
        document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
        oScript.src = sSrc;
    }, 100);
}

当然，在DOMReady事件上执行导入。这将几乎破解任何可能发生的渲染阻塞。

然而，当添加依赖项时，系统会变得极其复杂，这些依赖项是只有在组件完全加载时才需要执行的代码。这让我相信，一个更流畅的接口（比如Promise系统）可以改进你的设计，也可能会慢慢减少超时，甚至推迟执行，直到所有相关元素都启动了DOMReady。

以下是一个没有类似promise语法的示例，但假设所有第三方脚本和依赖项都只从一点开始：

var loadingChainStarted = false;
function importScript(sSrc, fOnload) {
    if (document.readyState !== "complete") {
        window.addEventListener("onload", function () {
            importScript(sSrc, fOnload);
        }, false);
        return;
    }
    if (!loadingChainStarted) {
        loadingChainStarted = true;
        setTimeout(function () {
            importScript(sSrc, fOnload);
        }, 100);
        return;
    }
    var oScript = document.createElement("script");
    oScript.type = "text'/javascript";
    oScript.defer = true;
    if (fOnload) {
        oScript.onload = fOnload;
    }
    document.currentScript.parentNode.insertBefore(oScript, document.currentScript);
    oScript.src = sSrc;
}

这将只在DOMReady之后执行脚本，并且是第一次在100毫秒延迟之后执行脚本。链的其余部分将正常执行，因为两个DOMReady都已启动，并且延迟已经过去。

相关文章：