javascript - 加载页面后延迟javascript和jquery的最终解决方案

标签 javascript jquery pagespeed

您可能知道,Google PageSpeed Insights希望你推迟你的 javascript。

谷歌本身 suggests a solution推迟你的代码:

<script type="text/javascript">
    function downloadJSAtOnload()
    {
        var element = document.createElement("script");
        element.src = "deferredfunctions.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

当然是一个很好的解决方案,但它与实际情况相去甚远(要包含许多脚本、要执行的代码等...)

举个例子:

<html>
    <head>
    </head>
    <body>
        <script type='text/javascript' src='...'></script>
        <script type='text/javascript' src='...'></script>
        <script type='text/javascript' src='...'></script>
        <script type='text/javascript'><!--
            // some code
            $(document).ready(function(){
                // code to execute when the page is ready
            });
        --></script>
    </body>
</html>

问题是:如何将 Google 的建议应用到上面的示例中?

最佳答案

Google 示例可以用于多个脚本,如果您有 downloadJSatOnload 将几个脚本元素附加到页面,然后调用通常放在 $(document).ready 中的代码(函数 () { ... });。该代码可以被显式调用或者是最后下载的文件。

关于javascript - 加载页面后延迟javascript和jquery的最终解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15871307/

相关文章:

javascript - Angular JS : Not able to return the modified text area to JavaScript

javascript - 使用 jQuery 更改光标的 CSS

javascript - 使 jquery lazyload 插件在视口(viewport)内工作

asp.net - 服务器响应时间太长(ASP.NET MVC),如何查找哪个操作消耗了这么长的时间?

javascript - 如何从输入文本中删除底线

javascript - 检查 $(this) 是否有在数组中指定类或 id 的 parent

javascript - 减少第三方代码的影响 - Google CDN

css - 渲染阻塞 css only bootstrap 76/100

javascript - 如何使用 javascript 在 safari 中启动全屏?

jquery - 带调整大小预览的 Jcrop