以昆明大首页为例(http://map.fang.com/km3.html),主要优化的地方是:
(1)JS代码 改为模块化压缩异步合并加载,优化JS文件加载顺序。(用seajs作为js文件加载管理工具)修改网页中的onclick为事件绑定形式。(例如去掉onmouseover="show_menuc(‘t01‘,‘ti01‘,1,3,‘s1‘,‘s2‘)"代码,改为new menu(‘t01‘,‘ti01‘,‘s1‘,‘s2‘);)
(2)图片改为延迟加载(除首屏外)(具体详见下面说明)
(3)CCS 压缩处理
(4)HTML部分压缩处理
(5)对科捷JS广告也做分级处理。(具体详见下面说明)
(6)网页中用到的JS文件也作了分级处理(首屏JS优先加载)
附1:图片具体处理方式:
其中图片延迟加载的具体逻辑是图片作了分级区别处理:
0级:首屏的图片,及时加载。
1级:除首屏外的图片,延迟加载。具体做法就是当网页加载完成后,不再自动加载,而改为事件侦听的方式,当侦听到鼠标移动(mousemove)或者页面滚动条滚动(scroll)才开始逐步加载。
附2 :科捷JS广告处理方式(通过对网页的分析,发现首页中科捷JS广告比较多有41处调用。占用了很大部分加载时间,因此优化广告加载方式是首页优化的一个重要组成部分)
(1).修改目前JS方式调用方式(<script language="JavaScript1.1" src="http://show3.fang.com/afp/door/;ap=s45c63155cf174460001;ct=js;pu=p28ed0b92e3713250001;/?" charset="utf-8"></script>)为后端接口形式,并缓存5分钟(已问过于总,可以接受5分钟缓存时间)
http://show3.fang.com/afp/door/;ap=s45c63155cf174460001;ct=xml;pu=p28ed0b92e3713250001;/?
这种方式需要科捷那边配合修改。
(2).广告也做分级处理,(首屏相关的广告为0级,其他部分的为1级),广告中的图片采用和附1中描述的相同的图片处理策略,将会明显提升首屏用时,整体性能也会有所提升。
(3).大首页首屏,大搜索框背景广告有多个时,第一个广告图片作0级处理,其他图片作1级处理。
附3:相关工具
JS & CSS压缩处理 http://gpbmike.github.io/refresh-sf/
HTML压缩处理 http://kangax.github.io/html-minifier/
seajs 官网 http://seajs.org/