Question

我有index.html文件，其中我有Jquery库和引导库，用于在<head>标记中加载js，它们被报告为渲染阻止的原因，其中， jquery.min.js需要加载932 ms 和 bootstrap.min.js需要765 ms 。在这里，我决定在加载article之后的页面后加载jquery和boostrap文件。但由于我还有其他依赖的JS文件，我决定创建一个Javascript数组并迭代它以创建动态脚本标记。哪个正在发挥作用，但页面没有加载，因为其他相关文件找不到jquery文件。

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

注意：由于所有js文件都来自代码库，因此使用延迟或异步没有意义。

以下是我在</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在每个其他文件加载之前先加载

Answer 1

你应该在这个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。检查并查看它是否无法正常移动脚本之前的bootstrap.js。

通过jquery和bootstrap库渲染阻塞

1 个答案: