Liu Yongsheng

页面性能测量监控系统应用

25 July 2014

PPT链接：iQiYi页面性能自动化测量系统

背景

Q2季度产品部门要针对iPad单独做一套播放页产品设计方案，主管打算趁此机会把前端界最先进技术和理念（因为业务的原因，在Pc Web端很多都不能实施）都给应用到这次改版实践中。网站技术部给前端组定的KPI之一就是：iPad播放页改版上线之后视频播放性能优化至少提高一倍以上，同时主管也对外“鼓吹”这次改版性能优化方面能做到“业界第一”！。

所以，为了配合这次iPad改版性能优化实践，最终在数据上证明性能优化是否做到了“业界第一”，就需要做一个系统测量iQiYi改版后的iPad播放页，和竞争对手优酷、土豆、搜狐视频、腾讯视频和乐视的iPad播放页性能数据（包括播放性能数据与页面性能数据）。

解决方案

需求最终分解为两个：

1.能测量播放页的播放性能和页面性能

2.能测量竞争对手的播放/页面性能

对于自己的页面，插入测量统计的JS代码上线之后就能拿到性能数据。但是对于竞争对手的页面，这种手段就不行了。所以我们采用非侵入式的测量工具WebPageTest，并在公司内网搭建了一台Private Instance，自己写bash脚本驱动wpt进行自动化测量，并出报表显示性能数据。

测量系统应用效果

证明pad播放页播放性能业界地位。

测量系统的新应用

播放器性能优化测量

为了配合Flash团队做播放器性能优化，测量系统新开发了ABTest的功能：自动测量多个不同页面（优化之前的页面和各种采用不同优化方案的页面）的性能数据，进行对比并给出报表，供Flash团队识别性能瓶颈，评估优化方案的效果，和最终是否将优化方案落地实施。

对比场景包括：正常播放器与精简广告播放器，wmode取值window与opaque对比，正常播放器与去除sharedobject操作的播放器对比。

WebPageTest相关经验

1. WebPageTest每次测量first view之前会清除Cookie和缓存数据，flash的本地存储会一并被清除掉吗？

这个是flash团队比较关心的事情。wpt的文档上对于first view的说明是这样的：

The First View row is a test that was done with a browser that had its cache and cookies cleared out and represents what a first­ time visitor to the page will experience.

没有特殊提到flash本地存储。flash本地存储的特殊之处在于可跨浏览器访问，普通的浏览器缓存清理手段都动不到flash本地存储。wpt在测量first view之前，会去专门把flash的本地存储也给清理掉吗？文档上没有写。

在Flash团队同事的协助下，我们验证了一下，打开UserHome\AppData\Roaming\Macromedia\Flash Player\#SharedObjects目录(已清空，Win7系统)，开始测量播放页在IE8下的first view, 测量过程中#SharedObjects目录有文件写入。第一次测量完成之后，再次测量时，在wpt agent打开浏览器之前，#SharedObjects目录被清空了。

结论： wpt agent在测量first view之前，会把flash 本地存储也给清理掉。

后来Google了一下，发现了wpt作者写的一篇博客Clearing IE's Caches - Not as simple as it appears，里面提到，在开始测量first view之前，wpt agent会清理浏览器历史记录、cookies、资源（html/css/js/flash等）缓存，另外还会清理：

  1. DNS Cache - 相当于执行ipconfig /flushdns

  2. Flash Storage - 清空 "\Macromedia\Flash Player\#SharedObjects" 目录

  3. Silverlight Storage - 清空 the "\Microsoft\Silverlight" 目录

除此之外，还会对SSL/TSL认证过程中缓存也给清理掉。

wpt agent在清理掉这些东西之后，在真正打开测试页面开始测量first view之前，还会先打开一个about:blank页面和http://127.0.0.1:8080/blank.html页面进行热身。因为缓存被清理了之后，浏览器第一次打开新页面还需要初始化缓存，而这个过程可能会有性能损耗，所以wpt在热身阶段让浏览器做缓存初始化工作。

花絮

1. 测量系统在Pad版播放页应用之后，立即就用于Flash性能优化测量了，为什么不是接着对主站（PC Web）做性能优化测量呢？

原因是这样的：pad播放页比较简单，主站播放页太复杂，复杂的原因在于有Flash播放器（pad和手机端都是原生video标签），而且播放器做的事情比JS更多，更重要，也更耗费资源！

JS团队曾经尝试过做自我牺牲，延迟JS业务代码加载和执行，来换取播放器更快的加载和和播放流程的提前完成，但是最后发现：性能瓶颈根本不在JS这边。按照前端主管的说法是：主站性能优化，还轮不到JS来搞！JS再怎么折腾也是白搭，因为性能瓶颈在Flash方面。（当然，Flash组的主管说法是，播放器性能瓶颈在广告相关流程，他们播放器本身不是瓶颈）

这个post有的写...

blog comments powered by Disqus