标签：
以昆明大首页为例（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/
标签：
原文地址：http://www.cnblogs.com/yueyanlei/p/4210811.html
