12

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

4

4 回答 4

15

我的想法是在 .js 之后动态加载 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

于 2012-07-31T08:31:41.697 回答
6
  • 在您的登录页面上添加您所有的 css/javascript。
  • 将所有的 CSS 放在 HEAD 部分的顶部。
  • 将所有 Javascript 放在底部。

  • 还将您的 Javascript 和 CSS 作为外部文件，因为它们被浏览器缓存（而不是在页面中编写内联 javascript 和 css）。

  • 缩小你的 Javascript 和 CSS

更新 2

也可以使用YUI GET UTILITY来完成 JS 和 CSS 的后加载

有关更多详细信息，请查看此Yahoo：优化网站的最佳实践

于 2012-07-31T08:28:53.477 回答
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">
于 2012-07-31T08:25:13.210 回答
2

我推荐一个异步加载器，例如requireJS。

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

Facebook 在他们的预输入查询中使用了类似的技巧：当搜索框获得焦点时加载与用户相关的数据。

于 2012-07-31T08:34:16.000 回答