Php 优化JavaScript CSS下载

我的网站有很多页面都使用jQuery和JSON以及相同的CSS，除了少数页面。第一页是用户登录。由于用户需要花时间输入用户名和密码，我想在登录期间下载整个用户会话所需的所有JavaScript和CSS文件。如何做到这一点？所有页面的标题都相同。我如何优化它

我想在登录期间下载整个用户会话所需的所有javascript和css文件

登录

• 在登录页面上添加所有css/javascript
• 把你所有的css放在头部的顶部
• 将所有Java脚本放在底部
• 还可以将javascript和CSS作为外部文件，因为它们被浏览器缓存（而不是编写内联javascript和CSS） 在页面中）

• 缩小你的Javascript和CSS

更新2

JS和CSS的后加载也可以使用

---

有关更多详细信息，请查看此

我的想法是在

document.load之后动态加载js和css文件。这不会影响登录页面的加载时间，同时也会在用户登录后缓存js和css文件

您还可以轻松地将其更改为
document.ready
，前提是加载速度更快

像这样的怎么样

$(document).load(function() {
    function preloadFile(filename, filetype){

        //For javascript files
        if (filetype=="js"){
            var fileref=document.createElement('script');
            fileref.setAttribute("type","text/javascript");
            fileref.setAttribute("src", filename);
        }

        //For CSS files
        else if (filetype=="css") {
            var fileref=document.createElement("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", filename);
        }

        document.getElementsByTagName("head")[0].appendChild(fileref)
    }

    //Examples of how to use below
    preloadFile("myscript.js", "js"); 
    preloadFile("javascript.php", "js");
    preloadFile("mystyle.css", "css");
});

参考资料

我建议使用异步加载程序，例如requireJS

创建并压缩javascript和css后，将其加载分配给事件，例如当用户关注用户名字段时

Facebook在其typeahead查询中使用了类似的技巧：在搜索框获得焦点时加载与用户相关的数据。
（在Sam的评论之前开始写这篇文章，这与我的建议类似。）我可能错了，但除非他使用的是Node，他将无法利用require.js中的优化工具。请在整个用户会话中解释这一点。

@user982207您愿意在页面中包含jQuery吗？我可以让我的答案在整个会话中更容易理解，直到用户不注销。@sam yes我使用jquery json和googlemapsI，就像4与1、2和3相矛盾一样，通过将链接放到外部文件，而不是实际的JS和CSS@Anand关于YUI Get实用程序的有趣编辑。当我有空闲时间的时候，我会看一看，这实际上是正确的解决方案。如果您只想将其他Javascript放入缓存，则无需动态（使用Javascript）加载它。您所要做的就是将指向相关css文件的所有链接（最好是1）放在标题中，并将指向相关javascript文件的所有链接（最好是1）放在结束正文标记的正上方。有关示例和解释，请参见HTML5样板文件。脚本标记的一些HTML5功能（async和defer）可能会有所帮助（请参见：），但据我所知，除了下载脚本并将其作为文本存储到本地存储中，然后在以后对其进行求值之外，无法简单地将脚本放入缓存而不执行它。但是，除非你正在构建一个世界级的超重型客户端，否则我怀疑你是否需要接近这类东西。可以尝试一下。但是如果两个页面的css不同怎么办。我可以在登录期间下载未来页面的css吗？

$(document).load(function() {
    function preloadFile(filename, filetype){

        //For javascript files
        if (filetype=="js"){
            var fileref=document.createElement('script');
            fileref.setAttribute("type","text/javascript");
            fileref.setAttribute("src", filename);
        }

        //For CSS files
        else if (filetype=="css") {
            var fileref=document.createElement("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", filename);
        }

        document.getElementsByTagName("head")[0].appendChild(fileref)
    }

    //Examples of how to use below
    preloadFile("myscript.js", "js"); 
    preloadFile("javascript.php", "js");
    preloadFile("mystyle.css", "css");
});