加载内联 jQuery 脚本以及延迟和异步脚本答案

【问题标题】：Loading inline jQuery scripts along with deferred and async scripts加载内联 jQuery 脚本以及延迟和异步脚本
【发布时间】：2016-10-03 00:40:48
【问题描述】：

我正在开发一个网站并研究其 Page Speed Insights 并拥有一个

Eliminate render-blocking JavaScript and CSS in above-the-fold content

所以基本上发生的事情是我在页面顶部有两个外部 javascript 导入：

<script src="/remotestaff_2015/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/remotestaff_2015/js/bootstrap.min.js" type="text/javascript"></script>

该网站有很多 javascript，但有些位于页面底部 <body> 标记之后。所以我的问题是上面的那两个。要修复渲染块，我已经在 google 上搜索过，发现我可以使用 defer 或 async 属性。我的问题是网站上有一些具有内联javascript的模块，例如：

<script type="text/javascript">

$("#menu-toggle").click(function(e) {

    e.preventDefault();

    $("#wrapper").toggleClass("toggled");

    if ($("#wrapper").hasClass("toggled")) {

        $(".color-fade").css("opacity", ".5");

    } else {

        $(".color-fade").css("opacity", "1");

    }

});

因此，如果我在 jquery 文件上添加延迟，我的内联 javascript 会出现错误，因为它会在尚未加载 jquery 的情况下加载。有没有办法修复这个内联脚本或以某种方式让它们在延迟的 jquery 或其他 js 文件被加载后运行？我不想将那些内联脚本放在其他文件中。

【问题讨论】：

标签： javascript jquery asynchronous optimization lazy-loading

【解决方案1】：

根据 MDN：

此布尔属性设置为向浏览器指示脚本意味着在文档被解析之后执行，但之前触发 DOMContentLoaded。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

因此，让您的内联脚本等待文档和延迟脚本被加载。 DOMContentLoaded 事件将在发生时触发：

    <script>
        document.addEventListener('DOMContentLoaded', function() {
          // Inline scripts go here
        });
    </script>

请注意，$(document).ready(function() 不再需要，因为这将等待相同的事件 (DOMContentLoaded)。

【讨论】：

【解决方案2】：

你可以在

中动态加载你的js

$(window).bind("load", function() { // code here });

对于动态加载脚本，您可以使用代码

var script = document.createElement("script")
script.type = "text/javascript";

if (script.readyState){  //IE
    script.onreadystatechange = function(){
        if (script.readyState == "loaded" ||
                script.readyState == "complete"){
            script.onreadystatechange = null;
            callback();
        }
    };
} else {  //Others
    script.onload = function(){
        callback();
    };
}

script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);

如果对你有帮助，请告诉我。

【讨论】：

【解决方案3】：

我这样做是为了让一切都变得干净。不延迟加载 jQuery 文件并在 HTML 头中定义菜单切换事件。

<script src="/remotestaff_2015/js/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function() {
        // option 1
        /* $('#menu-toggle').click(function() {
            // your code
        }); */
    });

    // option 2
    $(document).on('click', '#menu-toggle', function() {
        // your code
    });
</script>

现在您可以在 HTML 正文中的任何位置呈现元素，甚至可以从 AJAX 回调中呈现元素。

【讨论】：

实际上我想这样做，这是最干净的方法，但正如我所说的，我不能这样做，因为这个站点中有很多脚本，如果我可能会破坏将 jquery 移动到底部的某处。我需要推迟 jquery 以便将它保持在顶部，但问题是内联脚本。有很多依赖于 jquery 的脚本，所以我将推迟 jquery，其他包括内联脚本在内的脚本也不会移动其位置。
你的意思是你只能在运行时加载jQuery文件，而其他脚本（使用jQuery）更早加载？
不，我想推迟加载 jquery，然后在加载 jquery 后加载内联脚本。
将所有内联脚本从 .click() 更改为 $(document).on('click', <selector>, function() { })，不要推迟 jQuery。