优化JavaScript CSS下载

Question

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

Answer 1

我的想法是在动态加载js和css文件之后document.load.这不会影响登录页面的加载时间,同时还会在用户登录后缓存您的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:优化WebSite的最佳实践