延迟加载 JavaScript 和内联 JavaScript

Question

我注意到在我的网站（用于工作）的 中，有很多 和

我正在考虑使用条件/异步加载器（例如 yepnope.js、head.js 等），但我注意到这样做有一个小问题。

在我们看来，存在内联 JavaScript，有些使用 $(function(){})，有些使用 $(document).ready(function(){})，并且有些只是有代码（使用 jQuery）不在 ready 块中。

如果不编辑每个视图文件以将其代码包装在函数中并在加载 JS 文件时调用该函数，是否有办法延迟内联代码，直到异步加载 JavaScript？

Answer 1

你实际上可以延迟加载内联 javascript：
1-将内联脚本中的类型参数更改为：text/delayscript

FROM

    <!– Inline Script –>
<script type="text/javascript" language="javaScript">
             /* Code */
</script>

To

    <!– Inline Script –>
<script type="text/delayscript">
             /* Code */
</script>

为脚本标签提供自定义 Mime 类型 text/delayscript 强制浏览器忽略其内容（请注意，完全忽略它将默认为 text/javascript） 。

2-延迟加载所有内联脚本
一旦 Heads.js（或您可能正在使用的其他框架）确认它延迟加载了所有外部 JS，您就可以获取所有自定义脚本标签的内容并将它们注入页面中：

<script>
head.ready(function() {
    var 
        _head = document.getElementsByTagName("head")[0],
        _script = document.createElement('script'),
        _scripts = document.getElementsByTagName("script"),
        _txt = "text/delayscript",
        _contents = []
    ;

    for(var i=0,l=_scripts.length;i<l;i++){
        var _type = _scripts[i].getAttribute("type");
            if(_type && _type.toLowerCase() ==_txt)
                _contents.push(_scripts[i].innerHTML)
    }


    _script.type = 'text/javascript';
    _script.innerHTML = _contents.join(" ");
    _head.appendChild(_script);

});

为了更加优雅，您实际上可以将内联脚本保留在 DOM 树中的原始层次结构中，而不是像我上面所建议的那样将所有内容都塞在一个脚本中，方法是将标记的内联脚本标记替换为具有以下内容的新标记： mime 类型文本/javascript:

head.ready(function() {
var 
    _scripts = document.getElementsByTagName("script"),
    _doc = document,
    _txt = "text/delayscript"
;

for(var i=0,l=_scripts.length;i<l;i++){
    var _type = _scripts[i].getAttribute("type");
        if(_type && _type.toLowerCase() ==_txt)
            _scripts[i].parentNode.replaceChild((function(sB){
                var _s = _doc.createElement('script');
                _s.type = 'text/javascript';
                _s.innerHTML = sB.innerHTML;

                return _s;
            })(_scripts[i]), _scripts[i]);
}
});

Answer 2

您必须考虑将内联代码移至“外部”并将其包含在

<script defer="defer" type="text/javascript" src="">

Answer 3

HTML5 引入了新的 异步具有已定义 src 的脚本的参数。

您可以将其直接添加到任何

<script src='/js/script.js' async></script>

但是：请记住，它不适用于内联脚本！

如果您的某些页面混合了外部脚本和内联脚本，如果您异步加载外部脚本，则意味着内联脚本实际上将在异步脚本之前执行...这可能会产生不良影响。

设置此布尔属性以指示浏览器应（如果可能）异步执行脚本。它对内联脚本（即没有 src 属性的脚本）没有影响。

例如，如果您有以下配置：

<script src='/js/jquery.min.js' async></script>
<script>
    // --> jQuery won't be loaded when this script will be executed!
    // This will throw an error.
    $(function () {
        $('#element').doSomething();
    });
</script>

Answer 4

首先，我建议您非常仔细地分析客户端脚本的加载，不仅是第一次 JavaScript 加载，还包括第二次加载相同的 JavaScript 文件或在另一个页面上加载。如果 Web 服务器在脚本上正确设置了 ETag，或者如果您使用 HTTP 的其他缓存选项（请参阅 缓存教程了解详细信息）对于 JavaScript 文件来说，不会加载文件本身，只会进行缓存重新验证。因此，您所描述的问题可能并不像看起来那么重要。

如果您决定动态加载一些脚本，您可以使用 jQuery.getScript 并放置所有依赖项success 回调中的代码。如果您需要加载一两个 JavaScript 文件，这种方式会非常有效，但如果您需要加载具有更复杂依赖关系的 JavaScript 文件列表，那么实现可能就不那么容易了。在这种情况下，您可以在 内部使用 document.writeln 。在 内部使用该方法几乎没有任何缺点（请参阅此处了解细节）。

Answer 5

根据您的设置，您可能需要查看 www.cloudflare.com 上的服务。他们当前的测试版功能称为火箭装载机，正是这样做的，包括内联脚本。

这是一项免费服务。尝试一下;)

另外，您还可以在顶部获得免费的缓存代理:)

Answer 6

创建内联函数而不是内联脚本。然后在 javascript 文件的末尾，调用该函数（如果存在）。

function inline_script() {.. code ..}

在串联的 jquery+etc 异步 javascript 文件中：

if (typeof(inline_script) == 'function') inline_script()

您必须进行一些改组，以确保每页只有一个 inline_script，或者如果您多次调用它，则使用某种缓存将它们放在一起。

尽管这个问题已经很老了，但在当今时代这仍然是一个有趣的问题，异步脚本=非常棒

Answer 7

看看如何使用 headjs。这是一个很好的轻量级库，可以为您完成这一切。