Question

我正在使用jQuery插件，它有plugin.css和plugin.js作为依赖项，代码在script.js中。我不能将plugin.js和script.js合并，因为我只在我网站的一个网页上使用插件。

为了确保在执行plugin.js和script.js之前加载plugin.css，通常我没有选择，只能在<head>中使用plugin.css导致渲染阻塞（直到所有资源都在头被装上，浏览器不会渲染html）。

正常方式：在<head>和</body>之前的JS中使用CSS

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/css/plugin.css">
</head>
<body>
    // content goes here
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script src="/js/plugin.js"></script>
    <script src="/js/script.js"></script>
</body>
</html>

提议的方式：通过ajax调用加载CSS和JS，并在加载所有这些时使用jQuery $ .when promise

加载它们

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    // content goes here
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <script class="load-plugin">
        $(document).ready(function(){
            var loadPlugin = {
                css : $.ajax({ url: $(".jquery-plugin-css").data("src")                                                      }),
                js : $.ajax({ url: $(".jquery-plugin-js").data("src")}),
            };
            var scriptJs = $.ajax({ url: $(".script-js").data("src") });
            $.when(loadPlugin.css, loadPlugin.js, scriptJs).then(function(){
                loadPlugin.css.done(function(data){ 
                    $(".jquery-plugin-css").html(data); 
                });
                loadPlugin.js.done(function(data){ 
                    $(".jquery-plugin-js").html(data); 
                });
                scriptJs.done(function(data){ 
                    $(".script-js").html(data); 
                });
            });
        });
    </script>
    <style class="jquery-plugin-css" data-src="/css/plugin.css"></style>
    <script class="jquery-plugin-js" data-src="/js/plugin.js"></script>
    <script class="script-js" data-src="/js/script.js"></script>
</body>
</html>

这使我的首次渲染时间从3.4秒提高到2.4秒，总页面加载时间从8.5秒增加到8秒。

但这有一些局限性：

公开托管的网址无法使用，因为插件文件中的网址如css文件中的背景图片（如果相对于其目录提到），则代码粘贴到html后路径会发生变化。
由于注入的代码不是源文件或外部脚本的一部分，因此无法在开发人员工具中进行调试。

这种延迟加载插件的方式具有优点和等量的缺点。任何人都可以建议以这种方式或任何更好的方式来做它是值得的。

Answer 1

我会尝试的是：

合并JS文件，使依赖代码在plugin.js
在页面底部插入一个脚本，首先动态加载CSS，然后组合JS。如果您需要示例代码，可以查看https://github.com/filamentgroup/loadJS/和https://github.com/filamentgroup/loadCSS/。

使用这种方法，CSS和JS都不会阻止渲染。 CSS附加到DOM，因此相对URL应该没有问题。

避免使用具有css和js依赖关系的插件进行渲染阻止

1 个答案: