我的网站有很多页面都使用jQuery和JSON以及相同的CSS，除了少数页面。第一个页面是用户登录。由于用户需要时间输入用户名和密码，我想在登录期间下载整个用户会话所需的所有JavaScript和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
- 在登录页面上添加所有css/javascript
- 将所有css放在HEAD部分的顶部
- 把所有的Java脚本放在底部
-
还可以将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">
我建议使用异步加载程序，例如requireJS。
创建并压缩javascript和css后，将其加载分配给一个事件，例如当用户关注username字段时。
脸书在预编查询中也使用了类似的技巧：当搜索框获得焦点时，加载与用户相关的数据。