如何加速网页

2016-08-23  本文已影响0人  与时光流浪

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】这一部分考虑采用滚动加载吧 用户滚动到这里才加载

先测试一下滚动加载 如果到时候效果不好 就考虑最后加载

上一篇下一篇

猜你喜欢

热点阅读