javascript - 如果 Firefox 上未加载外部资源，如何取消阻止网页呈现？

Question

如果外部资源需要一段时间才能加载，我不想延迟页面的渲染，因此我实现了这个逻辑......

<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 上都可以使用(所有浏览器都很好，但我没有时间测试所有浏览器)。

Answer 1

由于您已经拥有一个接受 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 已被触发并且延迟已过，链的其余部分将正常执行。