针对低网速的性能优化

在过去的一段时间，队友在性能优化方面做了很多工作。我现在在这里默默总结，希望能够追上队友的脚步~
此次优化主要针对的是漫画手机站。相比于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();
}

写在最后

这种优化方案实现起来简单，而且玩法不仅限于控制图片质量。大家可以一起发掘出更多的玩法~