0.目前加载慢的原因
0.1 图片太多 需要大量时间加载
0.2 第三方api,动态效果页面 有时候会因为网络原因加载慢卡死页面
0.3 新修改的 有时候html更新了 css文件 js文件没有更新导致 页面效果和想要的效果不一致
1.优化方案
1.1 合并网站所有小图标(包括log 顶上广告)
1.2 合并必要的js文件,css文件( 这个工作可以使用php自动完成 )
建议在上传首页的时候自动完成 这一步,
建议每次上传(如果css js文件被修改的话 就是用不同的js css文件名 这样可以保证 html请求到最新的css js文件,如果页面修改了 图标 也不要使用相同的文件名)
上传文件的时候 先上传css js文件
js文件 css 的话建议分割为 基本不修改的(比如第三方库 稳定的代码比较长的功能模块),经常修改的部分
1.3 修改页面加载顺序
1.4 压缩css js html代码(使用php在生成的时候压缩代码,http://www.jb51.net/article/57314.htm )
1.5 看看页面是否存在不需要的js css代码(暂时删除(备份))
1.6 jquery-ui.min.js 看看是哪儿用的 可不可以考虑不使用
1.7 有的数据使用的js(ajax加载),但是数据本身就是一个json 或者js文件(static的),可以考虑和其他js 或者 html合并
1.8 统计功能的js 靠后一点加载
1.9 所有需要点击才能触发的部分所需要的图片,根据图片大小决定是延后加载 还是 点击后加载 或者 合并到 网站图标中
2.0 合并页面 jquery(页面发现多个 jquery , 如果能够合并的话 就合并)
2.注释在代码关键位置 尽量加上必要的注释(最终显示在网站上面的 会删除这些不影响加载速度)
3.加载速度
3.1根据图片标注
【1 】图标上面标注为1的部分必须最先加载(包括 对应 html css js)
【1.5】图片上面标注为1.5的部分效果是和 1一起加载的 但是对应的js文件
(点击效果可以考虑延后加载,具体看这部分代码对页面影响大不大)
换肤功能(看看相关代码 和图片多不多),如果用户设置了皮肤,显示皮肤效果这一部分必须最先执行,换肤相关的代码可以靠后执行(里面的图片应该是点击后才加载的)
【2】这一部分 需要在1 1.5加载后加载
【3】这一部分 需要在2加载后加载
这一部分的数据是我们自己的js文件,可以考虑合并js数据文件,
这一部分的图片需要使用 jauery.lazyload 加载
天气部分我们不能要修改 只是修改一下加载顺序就行
【4】这一部分考虑采用滚动加载吧 用户滚动到这里才加载
先测试一下滚动加载 如果到时候效果不好 就考虑最后加载