转载

前端技术的双11极限挑战“秒开”

以“2016双11技术创新”为主题的阿里巴巴技术论坛（Alibaba Technology Forum，简称ATF）将于12月6日-7日举办，这次活动由阿里巴巴集团、阿里巴巴技术发展部、阿里云云栖社区联合主办，也是ATF首次以在线方式展现。12月7日晚20：00，舒文将在线发表《面对双11的前端“极限挑战”》的演讲。

演讲内容简介：

2016年是双11历史上对前端挑战最大的一年，来自各个维度的技术挑战当汇聚到一个不容有失的项目，我们的前端们在哪些领域上做了深入？

1.100%的服务能力：由前端主导的服务端渲染构（Wormhole）成为了电商系的基础渲染构架，当它面临瞬间十数倍的负载来如何要实现从前到后100%可用、全链路的稳定性？

2. 秒级的终端体验：双11团队推进了“秒开项目”，目标是90%的页面能实现秒级体验，前端们进行了HTTP协议、WebP、埋点、Zcache等方案的改进，并将Weex升级为终端渲染的基础方案，在这个过程中有什么哪些经验和雷区？

3. VR&3D互动体验：VR和3D的兴起、声势浩大的双11晚会，让双11中的互动技术在难度及稳定上有了更严苛的目标，作为电商领域的吃螃蟹者，我们做了什么？

4. 可视化的前端监控：如何量化和评估性能、稳定性、体验，将抽象变为具象并落地到做到系统可视？对以往专注在开发领域的我们来说是新的难题。

5. 无障碍的端体验（Accessibility）：600万拥有智能设备的视力障碍人士如何做到在双11中拥有购物的平权？这个挑战也让激烈热血的双11蕴含了人文气息。

字想了解ATF更多内容，欢迎报名参会！请立即报名！ https://atf.alibaba.com/?channel=302 ，

从H5到React Native，再到Weex，阿里在性能、体验优化的道路上尝试了各种方案，从2015年双11到今年双11，在底层上我们完成了许多重要优化，保障双11的秒开目标。

一、目标

1、页面加载时间pageLoad

天猫Mobile性能优化的核心衡量指标是pageLoad，它是一个webview实现的类似JS的onload的事件，在iOS下对应webViewDidFinishLoad，在android下对应onPageFinished。

onload和pageLoad的差异主要是在onload事件里同步执行的js、加载的资源都会被计入到pageLoad内，而onload事件里执行代码通常就是特意做了懒加载处理，我们可以在onload里包一层setTimeout来解决：

window.addEventListener(‘load’, ()=>{

setTimeout(()=>{

//load assets/data…

}, 0)

})

天猫pageLoad目标经历了多个阶段，从15年2月之前的2s到15年5月的1.5s，一直到目前的1s。

前端技术的双11极限挑战“秒开”

2、首屏可交互时间

pageLoad和onload一样都是一个浏览器实现的通用事件，和onload一样事件促发不等于页面真实加载完成。我们需要又一个可以衡量用户真实感受的首屏渲染时间指标，最终选择了基于代码埋点，代码中加入埋点并上报，在模块加载容器上添加setter来监听模块加载状态变化的方案尽可能减少对业务的侵入，且不受模块删减、调整影响，模块的大致写法如下：

class Module{

constructor(){

…//数据加载 & 渲染

this.readyState = ‘rendered’; //标识该模块已经渲染完成

…//事件绑定

this.readyState = ‘complete’; //标识该模块已经处于可交互状态

}

3、体验指标FPS

除了以上2个描述加载速度的指标以外，我们还实现了一个FPS指标，用户衡量页面的滚动流畅性。对于FPS的统计方案和业界一致，根据requestAnimationFrame之间的时间差值来计算。

因为用户浏览的过程会持续滚动，而埋点上报的数据量有限，我们选择在客户端完成统计计算，上报计算后的统计学指标的方案，包括：最小值、最大值、均值、众数和中位数，而上报的时机选在了每一次页面离开的时候，实现上结合了visibilitychange和pagehide这2个事件，保证覆盖各个移动端环境。

二、底层优化点

1、HTTP2

HTTP2可以带来多路复用、头部压缩、服务端推送能力、请求优先级控制等优点。这一年我们完成了阿里CDN和统一接入层的HTTP2部署，同时在客户端优化了HTTP2的命中率（从59%上升到97%），目前天猫核心域名的HTTP2命中率已经达到97%+，再加上我们完成了大范围的域名收敛，整个页面的域名收敛到了5个以内，更好得发挥了HTTP2多路复用的优势，最终HTTP2带来的性能收益在250ms+。

2、HTTPDNS

域名解析在移动端是一个非常耗时的过程，且根据网络情况波动很大，手淘猫客对此做了优化：由服务端下发一份域名和ip的对应关系，然后客户端直接通过ip访问，跳过域名解析的过程，在这套现成技术上，我们完成了天猫核心域名的下发，同时完成域名收敛，保证页面用到的域名均在HTTPDNS执行列表之中，最终性能提升100ms+。

3、自动化的预加载

手淘猫客提供了2种预加载方案zcache和packageApp，目前用的主要是zcache，因为平台默认提供的是人肉的发布流程，导致线上使用率很低，即使用了也难以坚持长期更新，为此我们开发了一套自动化的预加载策略：按页面访问流量进行排序，自动预加载前N个页面用到的资源，大致流程如下：