jquery 和 bootstrap 库的渲染阻塞答案

【问题标题】：Render blocking by jquery and bootstrap libraryjquery 和 bootstrap 库的渲染阻塞
【发布时间】：2018-01-31 11:36:43
【问题描述】：

我有 index.html 文件，其中在 <head> 标记中加载了用于 js 的 Jquery 库和引导库，它们被报告为渲染阻塞的原因，其中 jquery.min.js 需要 932 毫秒 和 bootstrap.min.js 需要 765 毫秒 来加载。在这里，我决定在加载此article 之后的页面后加载 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 在加载所有其他文件之前先加载

【问题讨论】：

你试过Preload.js吗？例如，它会执行您正在尝试执行的操作并提供许多其他功能，您可以使用这些功能来控制执行顺序。
它也支持设备吗？
support devices 是什么意思？它可以在台式机和手机上的大多数现代浏览器上运行，但也有一些问题。 Check out the Browser Support section of the Docs 用于例外列表

标签： javascript jquery rendering render-blocking

【解决方案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 也移到脚本之前。

【讨论】：

但这并不能解决我修复由于这两个文件导致的渲染阻塞的真正问题，尽管错误被截断为 2
那么请告诉我您的哪些文件是库，哪些是您自己编写的代码？我猜你正在同时插入库和你自己的代码，这导致了这些问题。你必须像我们对 jquery 主库所做的那样，把所有库都放在这个脚本之外。
即使这样也不能解决主要问题 Jquery 和 Bootstrap 库需要更多时间来加载，因此它们仍然会阻塞渲染，但是，您看到的所有带有 jqquery 前缀的 js 文件都有库文件跨度>