地 址：上海市宝山66号
电 话：19974139831
网址：358265.com
邮 箱：18747567@qq.com
一、面对慢体背景介绍
智能手机的效率性普及、移动(dong)互联网的验差发展、微信异军突起，前端都为 H5 的测试发展提供了良好的环境。当前，该何H5 已被广泛应用于营销、把控广告、面对慢体传播之中。效率性而针对 H5 效率慢、验(yan)差体验差的前端硬伤，如何做好性能测试并优化其性能就显得尤为重要。测试
红豆 Live 是该何微博子公司有信旗下的一款语音直播产品，有各种(zhong) H5 页面。把控我们在做 H5 性能测试时进行了总结，面对慢体(ti)本文将为大家详细介绍 H5 性能(neng)测试的关注点、测试工具(ju)及常见问题。
二、H5 页面的(de)劣势
HTML5 作为一门重要的开发语言，有着显著的优势，其开发速度快、运行(xing)效率高、安全性好、可扩展性强(qiang)、开源自由等，但与手机端原生(sheng) APP 相比，H5 页面还具有以下(xia)劣势：
不稳定性比较强，页面跳转时(shi)更(geng)加复杂，运行速度容易受网络影响，很容易造成不流(liu)畅，甚至出现卡顿或卡死现象。
由于浏览器的导航本身占用一部分(fen)屏幕空间，H5 页面空间比 APP 小(xiao)，在本身就小的(de)移动设备屏幕中，容易造成信息记忆负担。虽然可以利用滚屏扩大页面，但人脑的短期记忆是不稳定的，用户在滚动屏幕的过程中需要临时记忆的信息越多，他们的表现就会越差。
导航不明显，原有(you)底部导航消失，有效的导航遇到挑战等。
交互动态效果受到限制，影响一些页面场景、逻辑的理解。
功能实现相比 APP 存在差距，用户重复使用难度大，用户粘性差。
三、H5 性能优化技巧1. 代码结构和设计 压缩组件
用户使用 H5 功能过程中，绝大多数时间都花在网络请求上，所以减少使用紧张的网络资源在提高性能上能取(qu)得良好的收益。组件压缩就是一种减少网络传输消(xiao)耗的办法。
从 HTTP 请求返回资(zi)源中的(de) HTML，JS，CSS，XML 等(deng)都可以设置压缩。对于已经压缩过的资源(如图片音乐等)不需要再次压缩，收益不高，而(er)且增加 CPU 负担。
JS，CSS 可以常通过去掉空格和(he)回车来压缩，再经过 GZIP 压缩，能达到良好的压缩效果(guo)。
压缩方法：在 HTTP 请求中设置所接受(shou)到压缩方式，在 Server 端对 Response 资源进(jin)行压缩再传给浏览器。一般使用 GZIP 设置 content-Encoding 字段。
设计技巧
CSS 放在顶部、Java 写在(zai)底部或异步：DOM 树构建完成后，CSS 要放到 HTML 代码的(de)开头的 head 标签结束前(qian)。如果网页是动态生成的，那么在 head 代码完成后可以页面输出，这样浏览器就会更快地解析出来 head 中的内容，开始下(xia)载 CSS 文(wen)件资源。而(er) CSS 放(fang)在(zai)底部则会(hui)引起重新绘制，用户会感受到“闪屏”的不好(hao)体验。
CSS 使用(yong)技巧
正确使用 Display 属性，因为 Display 属性会影响页面的渲染
避免图(tu)片和 iFrame 等空 Src
尽量避免重(zhong)设图片(pian)大小
移除空的 CSS 规则
不滥用 Web 字体、Float
不(bu)声明过多的 Font-Size
值为(wei) 0 时不需要单位
标准化各种浏览器的前缀
避免让选择符看起(qi)来像正则表达式
JS 在下载的时候会引起两(liang)个问题：阻止网页内容(rong)的展示并组织其他资源下载。下载 JS 时候，并行下载机制失效。并且在(zai) JS 中可能包括 Document.write 等改变页面布局的操作，所以渲染引擎会等待 JS 下载完成再开始渲染。用(yong)户侧页面加载时间会因为等待而变得更长。
添加缓存的最(zui)终目的是为了减少 HTTP 请求，最终达到提升性能的效果，所有(you)静态资(zi)源都要在服务器端设置缓存，并且尽量使用长 Cache 缓存(cun)一切可缓存(cun)的资源。
有统计证明：一个网页最终到达终端用户有(you) 80% 的时间都(dou)是在(zai) JS，CSS，图(tu)片，MP3，Flash 等资源的 HTTP 请求。另一方面，HTTP 请求的数量也是有限制的，浏览器对(dui)同一个域名有连接数限制，不同浏览器内核、不同版本的请求数不尽相同，大部分的并发请求数是 6 个。通过够控制(zhi) HTTP 请求的数量，减少 HTTP 请求时(shi)间，达到减少网页加载和呈现的时间，能带来更(geng)好的用户体验。
图(tu)片格式和大小(xiao)是否合适
图片格式(shi)：H5 中常(chang)用(yong)的图片格式有 WebP、JPG 和 PNG8。其中 WebP 的图片最小，但在(zai) IOS 或者 Android4.0 以下的系统中可能会有兼容性问题需要解决。JPG 是最常使(shi)用的方(fang)案，大小(xiao)适中，解码速度快，兼容性问题(ti)也基本不存(cun)在，在 H5 的应用中使用起来性价比最高的方案。如果有 PNG24|32 图片，尽量(liang)将其转换层 PNG8，能(neng)极(ji)大减少图片大小。BMP 是未压(ya)缩的图片(pian)格式，应(ying)该避免使(shi)用。
图片(pian)尺寸：当前移动设备中常用个尺寸规格为 480×800、600×1024、720×1280，800×1280 等，保证提供的原图能(neng)够被呈现，避免在代码中调整图(tu)片(pian)大小。
避免非 200 返回值
每(mei)一个 HTTP 请求都(dou)有(you)一个相对于的返回状态标志当次请求是否如期完成，如：
1：请求收到，这些状态代码表示临时(shi)的响应。
2：操作成功，这类(lei)状态代码表明(ming)服务器成功地接(jie)受了客户端请求。
4：客户端错误，发生错误，客户端似乎有问题。
5：服务器错误，服务器由于遇到错误而(er)不能完成该请求。
所以，如果有 HTTP 请求返回为非 200 的状态码，我们认为这(zhe)一次请求时(shi)无意义的，占用了稀缺的网络资源，所应该避免非 200 的返回状态码。
四、性(xing)能测试工(gong)具
支持移动端 H5 在 PC 端远程调(diao)试，能够对具体的移动(dong)端设备进行测试;
集成了 Page Speed;
提供 Network 面板，展示瀑布流视图，各类资源清晰罗列，还提供图的(de)缩略图，方便查看图片大小(xiao)尺寸和冗余或缺失;
提供 TimeLine 面板，展示 CPU、内存、FPS 等性能数据。
下面看下参考 Google 官方网站，重点介绍 Chrome 开发(fa)者工具中的 Network 和(he) Timeline 面板。
1.Network 面板
Network 面板可以记录页面上的网络请求的详情信息，从发起网页页面请求 Request 后分析 HTTP 请求后得到的(de)各个请求资源信息(包括状态、资(zi)源类(lei)型、大小、所用时间、Request 和 Response 等)，可以根(gen)据这个进(jin)行网络性(xing)能优化。该面板主要(yao)包括 5 大块窗格 (Pane)：
controls 控制 Network 的外观和功能。
Filters 控制 Requests Table 具体显示哪些内(nei)容。
Overview 显示获取(qu)到资源的时间(jian)轴信息。
Requests Table 按资源获取的前(qian)后顺序显示所有(you)获取到的资源信息，点击资源名可以查看该资源的详细信息。
Summary 显示总的请求数、数据传输量、加载时间信息。
其中 Requests Table 显示(shi)如下信息列：
• Name 资源名称，点击名称可以查看资源的详情情况(kuang)，包括 Headers、Preview、Response、Cookies、Timing。
• Status HTTP 状态码。
• Type 请求的资源 MIME 类型。
• Initiator 标记请求是由哪个对象或进程(cheng)发起的(de)(请求源)。• Parser： 请求由 Chrome 的 HTML 解析器时发起的。
• Other：请求是由其他进程发起的，比如用户点击一个(ge)链接跳转到另一个页面或者在地址栏输入 URL 地址。
• Size 从(cong)服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示 (from cache)
• Time 请求或下载的时间，从发起 Request 到获取到 Response 所用的总时间。
• Timeline 显示所有网络请求的可(ke)视化瀑布流 (时间状态轴)，点(dian)击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定(ding)的字段可以排序。
2.Timeline 面板
在 Chrome 中点击开发者(zhe)工具，打开 Timeline 面板，这个工具真的很强大(da)，Timeline 工具栏提供了对于在装载(zai)你的 Web 应用的过程中，时间花费情(qing)况的概览，这些(xie)应用包括处理 DOM 事件, 页面布局渲染或者向屏幕绘制元素。Timeline 可以通过事件，框架，和(he)实时内存(cun)用(yong)量(liang) 3 个方面的数据来监测网页，通过(guo)这(zhe)些数据，我们可以(yi)方便的找出页面中存在问题(ti)的(de)地方。该面板主要包括 4 大块窗格 (Pane)：
Flame Chart CPU 堆栈轨迹的可视化图表 (火焰图)。在图表里面有 1 到 3 条虚竖线。
Details 当选择一个指定的事件后(hou)，会显示这个(ge)事件的更多信息;当没有选择事件时，会显示指定的时间帧信息。Flame Chart 里面的虚竖线含义：蓝色标记 DOMContentLoaded 事件;绿色标记第一次的绘制时间点;红色代(dai)表 load 事件。
其中第 2 块 Overview 显示了网页性能相关的概要信息，可(ke)以通过鼠标或者区域边界上的灰色滑块来拖出一个指(zhi)定区域范围，Flame Chart 会跟着局部放大显示指定区域内的详情信息。
可(ke)以通过键盘上的(de) W,S 来放大和缩小指定区(qu)域，通(tong)过 A,D 来向左或向右移动指定区域。这个窗格包含了三个图表：
FPS 每秒帧数 (Frames Per Second)。绿色柱状条越(yue)高，则每秒帧数越高。在 FPS 图表上方的红色块是标记一个长帧。
CPU 标记 CPU 资(zi)源的使用情况，这里的面积图标记着消耗 CPU 资(zi)源的各类事件。
NET 各种颜色的柱状条分别显示一种资源。柱状条(tiao)越长，代(dai)表获取这个资源的时间越(yue)长。
CPU 面积(ji)图(tu)中各颜色的含义：蓝色代(dai)表(biao) HTML 文(wen)件;黄色代表脚本文件;紫色代表(biao)样式文件;绿色代表媒体文件;灰色代表其它杂项文件。NET 图表(biao)柱状条两种颜色的含义：较亮的部分表示等待时(shi)间(当资源被请求时，直到第一个字节被下载(zai)的时间);较暗的部分表示传输时间 (在第一个和最(zui)后(hou)一个字节被下载之间(jian)的(de)时间)。
五、常(chang)见问题(ti)及优化方案
在请求的资源中有未使用(yong)的图片，造成不必要的(de)资源消(xiao)耗，应过滤掉，如下图所示。
接口请求次数太多。
事件处理时间长，每项事件最好控制在(zai) 500ms 以内。
优化方案：
• 减少(shao)重(zhong)绘和回流
• 缓存 Dom 选择与计算
• 缓存列表.length
• 尽量使用事件代理，避免批量绑定事件
• 尽量使用 ID 选择器
• 使用 touchstart、touchend 代替 click，因快影(ying)响(xiang)速度快。
帧率低(di)。应用的帧率最好一直保持在 30-60fps，如果太低了(le)，应用就(jiu)会因为丢帧看上去混乱或者抖动(dong)。
点击界面按钮后，二级页面弹出慢。
优化(hua)方案：可以调(diao)整请求的顺序，由拿到数据再弹层，变成弹层的同时取数据(ju)，加快弹层展示时间.
六、总结
目前 H5 的应用非常广泛，如何把控好 H5 的性能是一门重要的课程。从代码设计可以优化 CSS、JS、图片、缓存等。还可以通过 Chrome 开(kai)发者工具，监控 H5 的网络请求和加载时间，找到性能(neng)消耗较大的根源，优化(hua)网络请求数(shu)、网络加载时间以(yi)及渲染优化。
本文作者 | 蔡媚霞 (红豆 Live 软件测试工程师)
