针对低网速的性能优化

此文已由做者吴维伟受权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

在过去的一段时间，队友在性能优化方面作了不少工做。我如今在这里默默总结，但愿可以追上队友的脚步~ 这次优化主要针对的是漫画手机站。相比于PC端的网络，移动端的网络环境有着本身的特色：网络不稳定，低网速的状况出现的比较频繁。这次优化的目的是为了让用户在低网速的状况下也可以拥有更好的体验。

做为一个以漫画为主题的网站，图片一直是流量的大头。若是可以提升图片的加载速度，那么页面的性能就可以有一个显著的提高。因此此次优化的思路很简单：在低网速的状况下选择加载质量更低的图片。

那么，如何去测量网速呢？

图片的加载时机必定是越早越好，因此咱们指望能拿到从浏览器发起请求到页面开始加载前的那段时间的网络情况。恰巧window.performance提供的API能够实现这个功能。window.performance上的每个属性都有一个默认值0。当对应的事件发生时，对应属性的值被赋予事件发生时的时间戳。为了测量网速，咱们考虑了如下事件：

• fetchStart 浏览器开始请求资源的事件

• responseEnd 响应报文接收结束时的事件

注：其中有一个requestStart事件，看起来与fetchStart相似。其中fetchStart事件发生在DNS查找和创建TCP链接以前，而requestStart发生在创建TCP链接以后，开始发送请求报文的时候。

经过计算fetchStart和responseEnd的差值，就可以大体估算出用户当前的网络情况。

主要步骤

• 图片存储在NOS上，能够经过URL中的参数控制请求图片的质量

• 经过轮询的方式监听responseEnd事件是否发生，为当前网络情况定性，快或慢。

• 采用懒加载的方式加载图片。根据网络情况的不一样，加载不一样质量的图片。

部分代码

// 测量网络情况if (typeof performance != 'undefined' && typeof performance.timing != 'undefined') {   
 window.detectPerformance = function () {       
  var performanceTiming = performance.timing;      
    if (performanceTiming.responseEnd == 0) {
            setTimeout(window.detectPerformance, 20);       
                 return;
        }       
         var latency = performanceTiming.responseEnd - performanceTiming.fetchStart;     
            if (latency >= 550) {       
                 window.SLOW_NETWORK = true;
        }
    }    
    window.detectPerformance();
}

写在最后

这种优化方案实现起来简单，并且玩法不只限于控制图片质量。你们能够一块儿发掘出更多的玩法~

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 深刻浅出“跨视图粒度计算”--三、EXCLUDE表达式