Qzone首页Web前端性能优化

性能优化⽆无末⽇日Qzone⾸首⻚页Web前端性能优化112年12月8⽇日星期六过去我们所做的212年12月8⽇日星期六过去我们所做的312年12月8⽇日星期六过去我们所做的412年12月8⽇日星期六过去我们所做的512年12月8⽇日星期六还能做点什么？612年12月8⽇日星期六712年12月8⽇日星期六多⽅方向挖掘性能瓶颈客户端逻辑接⼊入⺴⽹网访问浏览器特性协议栈能⼒力.....812年12月8⽇日星期六多⽅方向挖掘性能瓶颈客户端逻辑接⼊入⺴⽹网访问912年12月8⽇日星期六前端逻辑性能优化1012年12月8⽇日星期六前端逻辑性能优化定量分析1112年12月8⽇日星期六前端逻辑性能优化缺乏了重要维度？1212年12月8⽇日星期六前端逻辑性能优化1312年12月8⽇日星期六前端逻辑性能优化样本分布视图！1412年12月8⽇日星期六前端逻辑性能优化样本分布视图★透过平均值看细节★关注细分⽤用户情况1512年12月8⽇日星期六前端逻辑性能优化1612年12月8⽇日星期六前端逻辑性能优化CPU消耗？1712年12月8⽇日星期六前端逻辑性能优化JS等效“繁忙度”1812年12月8⽇日星期六前端逻辑性能优化运营监控1912年12月8⽇日星期六前端逻辑性能优化智能调度2012年12月8⽇日星期六前端逻辑性能优化2112年12月8⽇日星期六前端逻辑性能优化传统与现代JSONPXHR+JSON原⽣生执⾏行需要反序列化Unicode/GBxUTF-8不便于监控各状态可识别2212年12月8⽇日星期六JSONPXHR+JSONGET彻底跨域(tagscript注⼊入)GET⼀一级域内(⽆无CORS/XDR)POST⼀一级域内(formpost到隐藏frame)POST⼀一级域内(⽆无CORS/XDR)GET/POSTTEXT多种请求Method各种数据类型2312年12月8⽇日星期六2412年12月8⽇日星期六IE2512年12月8⽇日星期六⾮非IE2612年12月8⽇日星期六⾮非IEX2712年12月8⽇日星期六仔细尝试★⾮非IE下tagscript准确的onload和onerror事件★浏览器Javascript执⾏行没有真正并⾏行处理(WebWorker除外)★仔细处理执⾏行时序2812年12月8⽇日星期六仔细尝试2912年12月8⽇日星期六多⽅方向挖掘性能瓶颈客户端逻辑接⼊入⺴⽹网访问3012年12月8⽇日星期六⽤用户接⼊入的瓶颈3112年12月8⽇日星期六从SDCH实验讲起3212年12月8⽇日星期六从SDCH实验讲起3312年12月8⽇日星期六从SDCH实验讲起3412年12月8⽇日星期六整体速度提升却不⼤大3512年12月8⽇日星期六样本分析3612年12月8⽇日星期六结论★⾼高级压缩带来的下载量降低只会使较快⽤用户受益★绝⼤大部分慢⽤用户主要代价在⺴⽹网络连接消耗3712年12月8⽇日星期六⽤用户接⼊入穿越3812年12月8⽇日星期六基础矫正3912年12月8⽇日星期六基础矫正4012年12月8⽇日星期六国内运营商情况复杂★ISP间穿越质量越发不⾼高★IP名址库变更越发频繁4112年12月8⽇日星期六以实测速度为准4212年12月8⽇日星期六以实测速度为准4312年12月8⽇日星期六CDN⾮非静态资源加速★⻓长连接复⽤用★内容深层压缩★TCP优化★智能路由4412年12月8⽇日星期六CDN⾮非静态资源加速4512年12月8⽇日星期六CDN⾮非静态资源加速4612年12月8⽇日星期六将实测数据作⽤用于GSLB★Web前端记录实测信息分时上报★挖掘分析⽤用户IP到各个节点性能作⽤用于GSLB4712年12月8⽇日星期六访问接⼊入的演进设想4812年12月8⽇日星期六访问接⼊入的演进设想★统⼀一CDN加速代理接⼊入，消除数据服务多域名★减少DNS代价、控制TCP连接数★前端异步数据统⼀一到XHR(NOCORS)★代理服务器业务逻辑相关优化4912年12月8⽇日星期六访问接⼊入的演进设想★统⼀一接⼊入代理下实现全站HTTPS★提⾼高安全壁垒★站点基于证书的可识别性★喜迎SPDY,SDCH5012年12月8⽇日星期六访问接⼊入的演进设想★同样适⽤用于MobileWebApp5112年12月8⽇日星期六回顾★挖掘性能优化点的前提是数据依据★关注和细化⽤用户端监控★多维度深挖优化点★深⼊入到前端代码语句级别★纵观整个⽤用户访问路径5212年12月8⽇日星期六我们能做的很多THANKYOUQ&A5312年12月8⽇日星期六