3

我有 index.html 文件，其中有 Jquery 库和用于在<head>标签中加载 js 的引导库，它们被报告为渲染阻塞的原因，其中jquery.min.js 需要 932 毫秒，而bootstrap.min.js 需要 765 毫秒装载。在这里，我决定在加载本文之后的页面后加载 jquery 和 boostrap 文件。但由于我还有其他依赖的 JS 文件，所以我决定创建一个 Javascript 数组并对其进行迭代以创建动态脚本标签。这是它的一部分，但页面没有加载，因为其他依赖文件没有找到 jquery 文件。

我相信这种情况正在发生，因为在 jquery.min.js 完全加载之前，其他文件被加载并因此中断。

注意：由于所有的 js 文件都来自代码库，所以使用 defer 或 async 没有意义。

下面是我在标签前页面底部使用的</body>代码。

<script type="text/javascript">
        var source = [
            "common/scripts/external/jquery-3.2.1.min.js",
            "common/scripts/external/bootstrap.min.js",
            "common/scripts/other/utility.min.js?v=1.0.0",
            "common/scripts/external/jquery.ui.widget.min.js",
            "common/scripts/external/jquery.fileupload.min.js",
            "common/scripts/external/jquery.fileupload-process.min.js",
            "common/scripts/external/jquery.fileupload-validate.min.js",
            "common/scripts/external/jquery.knob.min.js",
            "common/scripts/external/jquery.payform.min.js"
        ]
        function downloadJSAtOnload(source) {
            for (var i = 0; i < source.length; i++) {
                var element = document.createElement("script");
                element.src = source[i];
                document.body.appendChild(element);
            }

        }
        if (window.addEventListener) {
            window.addEventListener("load", downloadJSAtOnload(source), false);
        } else if (window.attachEvent) {
            window.attachEvent("onload", downloadJSAtOnload(source));
        } else {
            window.onload = downloadJSAtOnload(source);
        } 
    </script>

加载页面时的错误：

在此处输入图像描述

请建议什么是解决渲染阻塞的正确方法，如果这是正确的方向，我如何允许 Jquery 在加载所有其他文件之前先加载

4

1 回答 1

0

您应该在此 js 脚本之前添加 jquery：

<script src='common/scripts/external/jquery-3.2.1.min.js' async></script>
<script src='common/scripts/external/jquery.ui.widget.min.js' async></script>
<script src='common/scripts/external/jquery.fileupload.min.js' async></script>
<script src='common/scripts/external/jquery.fileupload-process.min.js' async></script>
<script src='common/scripts/external/jquery.fileupload-validate.min.js' async></script>
<script src='common/scripts/external/jquery.knob.min.js' async></script>
<script src='common/scripts/external/jquery.payform.min.js' async></script>
<script type="text/javascript">
        var source = [            
            "common/scripts/external/bootstrap.min.js",
            "common/scripts/other/utility.min.js?v=1.0.0"               
        ]
        function downloadJSAtOnload(source) {
            for (var i = 0; i < source.length; i++) {
                var element = document.createElement("script");
                element.src = source[i];
                document.body.appendChild(element);
            }

        }
        if (window.addEventListener) {
            window.addEventListener("load", downloadJSAtOnload(source), false);
        } else if (window.attachEvent) {
            window.attachEvent("onload", downloadJSAtOnload(source));
        } else {
            window.onload = downloadJSAtOnload(source);
        } 
    </script>

我认为您也应该在此脚本之前调用引导程序。检查它是否无法正常工作，也将 bootstrap.js 移到脚本之前。

于 2018-01-31T12:16:32.697 回答