前端页面的加载速度,毫无疑问这关系到整个产品的命运,好的网站,一定是请求少,页面大小小,。下面列出几条优化建议。
1,图片合并,脚本合并,css样式合并,这些老掉牙的就不说了。
2,js脚本优化,尽量让脚本执行时不消耗太多客户端资源,例如for(var i=0;i<a.length;i++){....} 一个小小的for循环,它每次循环的时候会定义一个变量i,如果循环次数很大的话,那就会耗资源,虽然不多,但既然耗资源就得想更优化的办法,常用的做法是把i声明单独拿出来。var i=0;for(i=0;i<a.length;i++){....} 这样就不用每次循环都声明一个变量。
3,避免空的href 和src属性,a,img,frame等有路径属性的标签要注意其路径的完整性
4,少点试用css表达式,连样式表都要做计算,太扯了,如果硬是要用到,那直接写在脚本里更好
5,图片的压缩处理,无论脚本在怎么优化,它起到的作用还不如压缩小一点图片来得更明显。
6,但页面需要出现多张图片时候,考虑使用图片预加载还有可以用setTimeout做延时加载。
7,关于css spirite,在Spirite中水平排列你的图片,垂直排列会稍稍增加文件大小;
Spirite中把颜色较近的组合在一起可以降低颜色数,理想状况是低于256色以便适用PNG8格式;便于移动,不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。 100×100的图片为1万像素,而1000×1000就是100万像素。
8,使用json作为数据交换格式,json在浏览器的解析效率要比xml高一个数量级,高级浏览器中内置的有生成和解析json的方法,IE6中要用额外的方法(http://json.org ),不要用eval,容易引发性能和安全问题。
9,对图片标签和table设置高度,如果浏览器知道了他们的高度,就不用去根据内容大小而去计算标签的高度,减少浏览器重绘的计算量。
10,尽量不要table,表格不利于seo不说,还会让层次越陷越深,多层表格嵌套的话会很晕。
11,用能css做到的效果尽量不麻烦js,比如要点击隐藏和打开一个层,可以为一个层设置一个css样式名,如.hidden{display:none},然后就可以通过js来控制该元素的className属性而不是动用obj.style.display='none';
关于js脚本的优化,有时间得再总结一下。