时间戳

首页 > 解决方案 > 推迟js的有效方法

javascript - 推迟js的有效方法

问题描述

我打算调用一个js，它在加载页面时不会使用任何东西。因此，我只需要在整个页面加载完毕后调用这个js，以免耽误任何事情或为用户加载屏幕。

<html>
    <body>
    <script type="text/javascript" defer=defer src="function.js"></script>
    <script type="text/javascript">
            function downloadJSAtOnload() {
                var element = document.createElement("script");
                element.src = "function.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> 
    </body>
    </html>

我的问题是：在上述方式中，哪一种更有效？我需要减少页面的加载时间，因此我想“推迟”所有不必要的事情。

标签： javascriptjquery

解决方案

“defer”关键字延迟脚本的加载，直到触发 DOMContentLoaded 事件。

来自Mozilla 开发者中心：

DOMContentLoaded 事件在文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载（加载事件可用于检测完全加载的页面）。

这意味着版本 1（延迟）可能会比版本 2 更早地开始加载脚本，同时仍保持加载效率。

推荐阅读