决战双11:亿级访问量的Web前端页面优化技巧

  • 对原始图片进行压缩处理、调整图片的分辨率和尺寸;

  • 服务器开启Gzip压缩功能压缩页面文本。

  • 二、降低总请求次数

    决战双11:亿级访问量的Web前端页面优化技巧

    webpack

    直接减少服务器HTTP请求总次数的方式通常有以下的方式:

    1. 通过gulp或webpack组件打包相关的js文件和css文件,合并文件,减少请求次数;

    2. 将icon做成矢量字体,减少图片数量;

    3. 合并页面所需的小图标,生成css sprites;

    4. 图片采用懒加载方式,加速页面显示,页面中途关闭则可减少请求。

    决战双11:亿级访问量的Web前端页面优化技巧

    矢量小图标

    间接减少服务器请求的方式如下:

    1.使用HTTP缓存

    通过设置Expires或Cache-Control文件头让浏览器将页面缓存在浏览器中,缓存未到期之前只需从缓存中读取数据而不需要向服务器发送请求。

    2.使用CDN

    决战双11:亿级访问量的Web前端页面优化技巧

    将静态资源部署到CDN上,实现内容分发处理,这样无需向服务器请求静态资源,可有效降低服务器压力,加快页面显示速度。通常,CDN还会部署在多个节点,用户请求时自动将请求导向附近最近节点,相比于向远程服务器请求,效率也更高。

    除了以上两大方式优化web页面之外,还有其他的一些手段,例如优化css和js加载顺序,减少页面死链接等方式。

    结语:成功并非一蹴而就,贵在点滴积累!


    分享到:


    相關文章: