Question

我正在一个网站上工作并正在开展其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>

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

<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文件，我的内联javascripts会出现错误，因为它会在没有加载jquery的情况下加载。有没有办法修复这个内联脚本或以某种方式使它们在延迟的jquery或其他js文件加载后运行？我不想将这些内联脚本放在其他文件中。

Answer 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）。

Answer 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);

如果有帮助，请告诉我。

Answer 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脚本以及延迟和异步脚本

3 个答案: