性能优化

图片源压缩（戳我）

• 阿里云对象存储 OSS -> 图片处理
• 图片压缩 & 图片水印 & 图片格式
  
  • 根据页面需要采用规定大小的图片，避免消耗不必要的流量
  • 根据浏览器采用最优图片格式（如 webp）

使用方法

萌小店商品图片服务域名：img.shopping.vd.cn

http://img.shopping.vd.cn/online/upload/20161021/20161021152057_676.png?x-oss-process=style/160

http://img.shopping.vd.cn/online/upload/20161021/20161021152057_676.png?x-oss-process=style/320

http://img.shopping.vd.cn/online/upload/20161021/20161021152057_676.png?x-oss-process=style/640

判断浏览器是否支持 webp

• 方法一

function checkWebp() {
    try {
        return(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    } catch(err) {
        return false;
    }
}
console.log(checkWebp()); // true or false

• 方法二

var d = document;
function check() {
    var supportWebp;
    try {
        var ele = d.createElement('object');
        ele.type = 'image/webp';
        ele.innerHTML = '!';
        d.body.appendChild(ele);
        //奇妙所在,如果浏览器支持webp,那么这个object是不可见的(offsetWidth为0),
        //否则就会显示出来,有可视宽度.
        supportWebp = !ele.offsetWidth;
        d.body.removeChild(ele);
    } catch (err) {
        supportWebp = false;
    }
    return supportWebp;
}

接口 AJAX

接口提前调用

• 在用户使用前调用，减少页面等待时间

http://m-dev.renrendian.com/buyer/order/scanPay?wid=700000850&pay_amount=0.01

接口不等待

• 接口数据不是必要数据，页面可以先展示，等接口响应后再接着显示数据内容

http://m-dev.renrendian.com/buyer/user/center

文件延迟加载

• JS 文件
  
  • 异步加载，不影响页面初始化的文件，异步延迟加载（require.async）
    
    • vue-recommend-cmd
  • 按需加载 需要使用再加载文件
    
    • addressSelect-cmd
• 图片文件
  
  • background-image，网页结构和内容加载完成之后，才开始加载背景图片

---

其他

• Make Fewer HTTP Requests
  
  • 雪碧图
  • data:ur（SVG，base64）http://m.vd.cn/vd/coupon/list
  • 合并页面代码
• 静态资源 CDN
  
  • 一个域名并发请求限制
  • 网络请求带 cookie 问题（一级域名和二级域名均会带）
  • 分流 & 缓存
• 代码合并压缩 gulp
• 图片压缩 gulp