这两天一直在谈页面优化提高页面性能,以下一个小tip供参考。
1、减少页面请求数。
a、图片、外联css/js都需要向服务器请求(本地缓存除外),如果小图片很多或者外联文件很多的时候,往往花去大量的时间去发送和接收这些文件,尽量合并图片和css/js文件。
b、把相同域名的请求放在一起。
如果页面上这样引用:
<script language=”javascript” type=”text/javascript” src=”http://img.china.alibaba.com/a.js“></script>
<script language=”javascript” type=”text/javascript” src=”http://style.china.alibaba.com/b.js“></script>
<script language=”javascript” type=”text/javascript” src=”http://img.china.alibaba.com/c.js“></script>
<script language=”javascript” type=”text/javascript” src=”http://style.china.alibaba.com/d.js“></script>
注意加粗部分,应该已经看出问题在哪里了吧。
改正如下写法,页面请求会快很多:
<script language=”javascript” type=”text/javascript” src=”http://img.china.alibaba.com/a.js“></script>
<script language=”javascript” type=”text/javascript” src=”http://img.china.alibaba.com/c.js“></script>
<script language=”javascript” type=”text/javascript” src=”http://style.china.alibaba.com/b.js“></script>
<script language=”javascript” type=”text/javascript” src=”http://style.china.alibaba.com/d.js“></script>
2、提高页面渲染效率。
例如,写table的时候设置table-layout:fixed,写图片的时候设定图片的宽度和高度比让页面自己去计算宽度来的更高效。总而言之,不要给浏览器太多东西去“思考”。
3、提高js的执行效率。
例如,在js中合并数组尽量使用join(),而不是str+=””。尽量避免使用document.write等比较低效的函数。
4、优化页面url
优化页面url路径,减少url字节数,url不要埋的太深。对比以下两个路径同样是条资讯但从字节少上相差了一倍。当url数量巨大的时候,复杂、冗长的url会造成页面巨大的负担。