大首页的优化修改方案

以昆明大首页为例（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/

转载于:https://www.cnblogs.com/yueyanlei/p/4210811.html