我的网站有许多页面都使用 jQuery 和 JSON 以及相同的 CSS，除了少数页面。第一个页面是用户登录。由于用户需要花时间输入他的用户名和密码，我想在登录期间下载整个用户会话所需的所有 JavaScript 和 CSS 文件。如何才能做到这一点？所有页面的标题都相同。如何优化？
【问题讨论】：
for entire user session
标签： php javascript jquery 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");
});
参考文献
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
【讨论】：
还将您的 Javascript 和 CSS 作为外部文件，因为它们被浏览器缓存（而不是编写内联的 javascript 和 css 在页面中）。
缩小 Javascript 和 CSS
更新 2
JS和CSS的后期加载也可以使用YUI GET UTILITY来完成
【讨论】：
我想在登录期间下载整个用户会话所需的所有 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">
【讨论】：
我建议使用异步加载器，例如需要JS。
创建并压缩 javascript 和 css 后，将其加载分配给一个事件，例如当用户关注用户名字段时。
Facebook 在他们的预输入查询中使用了类似的技巧：当搜索框获得焦点时加载与用户相关的数据。
【讨论】：