美文网首页
如何加速网页

如何加速网页

作者: 与时光流浪 | 来源:发表于2016-08-23 16:45 被阅读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】这一部分考虑采用滚动加载吧 用户滚动到这里才加载

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

    相关文章

      网友评论

          本文标题:如何加速网页

          本文链接:https://www.haomeiwen.com/subject/oaknsttx.html