Question

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

Answer 1

我的想法是在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");
});

参考

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Answer 2

在您的登录页面上添加所有css / javascript。
将所有css放在HEAD部分的顶部。
将所有Javascripts放在底部。
还可以将Javascripts和CSS作为外部文件，因为它们是由浏览器缓存的（而不是编写内联的javascript和css）在页面中。
缩小您的Javascript和CSS

更新2

使用YUI GET UTILITY

也可以加载JS和CSS

有关详细信息，请查看此Yahoo : Best Practises for Optimizing your WebSite

Answer 3

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

<title>Login</title>
<script src="foo.js"></script> <!-- This line might be better placed just before </body> -->
<link rel="stylesheet" type="text/css" href="foo.css">

Answer 4

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

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

Facebook使用类型技巧进行类型搜索：在搜索框获得焦点时加载与用户相关的数据。

优化JavaScript CSS下载

4 个答案: