--------------------------------------------------------------------------------
/System-Design/mobile-testing.md:
--------------------------------------------------------------------------------
1 | # 移动测试
2 |
3 | 对于移动测试，有几个网络连接选项：
4 | + 实际移动网络具有实际载体
5 | + WiFi没有流量整形
6 | + WiFi具有固定的流量整形配置文件
7 | + WiFi具有每个测试流量整形
8 |
9 | [流量整形](http://baike.baidu.com/link?url=tl7WeKr3B-0Vr0NkUUNY1iqky_R1lsFOYRb2WwGq3dY6VMrkOecrrhKL3-fw4gP8SgMNQqgLm8x8XUU-ZtElqNHJshaVCndxJYQJLcy03epoEDFZvIx6zwHnjeAmm9gF)(traffic shaping)典型作用是限制流出某一网络的某一连接的流量与突发，使这类报文以比较均匀的速度向外发送。
10 | 移动测试网络对于WebPagetest的公共实例来说是至关重要的（至少在2014年的这篇文章中）：
11 |
12 | 
13 |
14 | 不同的配置建立在彼此之上：
15 |
16 | ## 一、设备
17 | 使用新的Node.js代理进行测试需要运行4.4（Kit Kat）的Android设备或更高版本，iOS设备运行最新版本的iOS（更多的iOS文档和更新的支持即将推出）。在这两种情况下，设备需要刷机（在iOS的情况下越狱）才能删除浏览器缓存。对于Android，Nexus和Motorola设备的工作效果很好，并提供广泛的功能。需要单独的设备来测试人像与景观（主要是平板电脑测试的问题）。
18 |
19 | ## 二、实际移动网络具有实际载体
20 | 最简单的设置是在运营商网络上运行设备。在这种情况下，您只需要手机和有线主机来控制它们。可以从单个主机控制多个设备（OS将允许USB连接）。任何支持adb和Node.js的操作系统都可以通过Windows和Linux进行测试。
21 | 如果主机有USB 3控制器，并且想要使用Linux，则需要确保它是一个比较新的内核，因为早期版本中的USB 3支持是非常差。
22 | 对于Windows，还有一个支持应用程序[adbwatch](https://github.com/WPO-Foundation/adbwatch/releases)来监视adb，如果它死机（有时会停止响应），它将自动重新启动，允许系统运行，而不需要人为干预。
23 | 公共实例目前有10台设备连接到运行Windows 7的英特尔i5 NUC，具有管理代理实例并保持adb运行的adbwatch。将NUC作为无头服务器（对于不支持AMT的较新的haswell型号）运行的一个提示是使用Windows附带的VNC和Microsoft视频驱动程序，而不是Intel。如果使用英特尔驱动程序，显示屏将被禁用，VNC将无法正常工作。
24 | 测试结果和代理服务器通信的数据流全部发生在系统主机上，因此唯一使用的数据连接将是实际的测试数据（以及任何软件更新）。
25 |
26 | ## 三、WiFi没有流量整形
27 | 通过WiFi连接进行测试可以更好地控制结果的稳定性，通常会产生比运营商网络上测试更加一致的结果。运行稳定WiFi测试连接的主要问题是：
28 | + **使用稳定的接入点**：大多数消费者WiFi设备是可怕的，一直存在，并且不能长时间保持连接。业务设备往往更加可靠，但我发现，苹果Air Port设备的工作非常好，只能使用它们。它们是坚如磐石的，永远不会`冻结/挂起/重新启动`，允许在接入点模式下运行，同时支持2.4和5GHz频段。
29 | + **使用清晰的WiFi频率**：在办公室或城市环境中，这可能是要解决的最困难的问题。我使用inssider找到一个清晰的非重叠频段用于测试网络。对于公共实例，我很幸运，因为没有邻居网络干扰，所以我选择了全方位。
30 | + **不要超载WiFi网络**: 将单个通道上的设备太多或使用相同的网络用于其他流量可能会导致争用，并可能限制实际带宽。使用可以与802.11n或802.11ac通话的设备变得不那么简单，但如果正在部署大量设备，那么值得牢记。解决这个问题的唯一方法是跨多个网络分流流量，将设备和接入点（将它们放在法拉第笼中）或使用rndis有线网络而不是WiFi绝缘。
31 |
32 | 测试未定义的WiFi连接的主要缺点是以ISP的完全连接速度运行，并且可能与最终用户的体验不符。
33 |
34 | ## 四、WiFi具有固定的流量整形配置文件
35 | 将流量整形添加到WiFi测试配置，允许测试用户连接特性，保持常规WiFi测试的一致性。流量整形必须在接入点的远端完成，最好使用将网络连接从接入点桥接到有线网络的其余部分的FreeBSD机器（还有一个dummynet的linux端口，但FreeBSD的实现在我们的测试中已经更加一致了）。
36 | 使用固定流量整形配置文件，必须选择一个配置文件，并将其用于给定设备（或所有设备）的所有流量。设置dummynet配置时，务必记住给每个设备自己的“管道”，以使它们不共享虚拟连接。
37 | 就硬件而言，任何支持FreeBSD并具有2+网络接口的机器都可以工作。我喜欢Supermicro Atom服务器，因为它们便宜，超低功耗，支持远程管理。
38 | 以下是公共实例使用的ipfw配置：
39 | ```bash
40 | # 3G配置文件 - 1.6Mbps下行，768Kbps上行，300ms RTT
41 | # src-ip和dst-ip掩码确保每个客户端都获得自己的管道
42 | ipfw pipe 1 config bw 1600Kbit/s delay 150ms noerror mask dst-ip 0xffffffff
43 | ipfw pipe 2 config bw 768Kbit/s delay 150ms noerror mask src-ip 0xffffffff
44 |
45 | # em1是连接到接入点的网络接口。
46 | # 数据“transmitted”到接入点是设备上的“in”数据。
47 | ipfw add pipe 1 ip from any to any out xmit em1
48 | ipfw add pipe 2 ip from any to any out recv em1
49 | ```
50 |
51 | ## 五、WiFi具有每个测试流量整形
52 | 不用为所有设备使用固定的连接配置文件，可以使测试代理程序在每个测试的基础上进行配置。Node.js代理可以调用代理上的ipfw shell脚本，其中包含要配置的测试代理和连接配置文件的信息。[github中有示例代码](https://github.com/WPO-Foundation/webpagetest/blob/master/agent/js/ipfw_config) 动态创建管道并分配相应的配置文件。
53 | 对于公共实例，静态配置多个管道，每个设备一对，然后当脚本配置整形时，它将只设置与该设备相关联的管道参数。这就是桌面代理的工作原理，并避免了任何边缘情况，如果某些事情死机，那么在配置中会留下规则。一旦设置和工作，我将提供在公共实例上实现的脚本和配置。
54 |
55 | ## 六、rndis替代WiFi
56 | 配置更大的实验室的一个更困难的问题是管理WiFi网络。可以反转系统的设备，使其网络流量通过USB连接路由到有线主机。这可以提供更一致的结果，但是需要注意不要超载USB总线（这也会传输其他系留设备的视频和测试结果），并且可靠性还不如WiFi（设备往往脱机）。
--------------------------------------------------------------------------------
/System-Design/overview.md:
--------------------------------------------------------------------------------
1 | # 概述
2 |
3 | 以下是WebPagetest的整体系统设计：
4 |
5 | 
6 |
7 | 所有通信均通过HTTP完成，箭头方向表示HTTP请求的方向。
8 | 测试代理人轮询找到工作的服务器，并在测试完成后将结果发回服务器。
9 |
10 | 有关特定系统的更多信息，请参阅相关文档（即将推出）：
11 | + 服务器架构
12 | + 自动化API
13 | + 代理API
14 | + 代理架构
15 | + 旧代理（IE8以下使用的UrlBlast）
16 | + 新代理（Chrome/Firefox等使用的WPTDriver）
--------------------------------------------------------------------------------
/System-Design/webpagetest-relay.md:
--------------------------------------------------------------------------------
1 | # WebPagetest中继
2 |
3 | 目前的系统架构有每个测试代理直接连接到WebPagetest服务器，用于检索工作和发布结果：
4 |
5 | 
6 |
7 | 这适用于很多用例，但它要求所有代理可访问服务器，并且每个代理只能为单个服务器运行测试。添加对中继服务器的支持是有用的，该中继服务器一方面公开相同的代理接口，另一方面为WebPagetest服务器提供API来进行通信。
8 | 在简单的用例中，这将允许继电器放置在不安全的位置（例如公共互联网）。但服务器本身可以在防火墙或其他安全区域内运行，在公共互联网上以及防火墙内都有测试代理：
9 |
10 | 
11 |
12 | 假设WebPagetest服务器上每个定义的“位置”都可以引用不同的中继服务器，并且每个中继服务器可以支持连接到它的多个服务器（使用基于密钥的身份验证），这样可以打开很多有趣的可能性：
13 | + 多个系统可以共享测试代理池（拥有控制对它们的访问的中继器）。 分享可以是直接的协作或更复杂的地方，每个用户对于他们的使用份额进行收费，甚至是直接订阅模式，其中所有者以每个测试的方式销售能力
14 | + 中继服务器可以优先处理服务器请求测试的请求（基于任何对系统有意义的优先级排序）
15 | + 给定的WebPagetest实例可以利用公共和私有测试代理，甚至通过使用多个继电器从多个公共代理池中抽取
16 |
17 | 
18 |
19 | ### 实施细节
20 |
21 | 任何完整的WebPagetest实例可以作为中继器运行，并进行一些调整
22 | + `runtest.php` - 添加对直接上传的测试作业的支持（并将作业绑定到所使用的API密钥）
23 | + `common.inc` - `getTestPath()` - 组合API密钥和测试ID，形成新的测试ID，并将测试结果存储在不同的树中
24 | + `downloadtest.php` - 添加一个新界面来下载给定测试的zip存档（基本上与发布相同，但在`pull`模式中）
25 | + `deletetest.php` - 添加一个新的界面来显式删除测试（基于匹配的API键）
26 |
27 | WebPagetest接口
28 | + 可以将locations.ini中的任何位置配置为与中继服务器通信，具有以下设置：
29 | + Relay server URL (base URL)
30 | + Relay location ID (中继服务器的位置ID)
31 | + Relay Key (API与中继服务器连接时使用的密钥)
32 | + 当测试提交到本地服务器时，不是将测试作业写入本地文件，而是将其发布到中继服务器
33 | + 检查测试状态时，如果测试不完整，则WebPagetest会询问中继服务器的状态
34 | + 如果中继服务器指示测试完成，则WebPagetest会将中继服务器的结果作为zip压缩并将其解压缩
35 | + 下载/提取后，WPT将表明它已经完成了测试，所以中继服务器可以删除它的副本
36 |
37 | 代理接口
38 | + 代理将与中继进行通信，就像他们正在与WebPagetest进行通信（`work/getwork.php`，`work/resultimage.php`，`work/workdone.php`）
39 |
40 | 中继服务器实施
41 | + 一个专用的中继服务器将只是一个完整WPT的一部分，不需要UI支持（SVN用于将选定的文件放在dist版本的wptrelay目录中）
--------------------------------------------------------------------------------
/Using-WebPagetest/custom-metrics.md:
--------------------------------------------------------------------------------
1 | # 自定义指标
2 | WebPagetest可以在测试结束时执行任意的JavaScript来收集自定义指标。这些可以在服务器配置中静态地定义，或者在运行时每个测试中指定。
3 | JavaScript应该写得像是在执行一个函数调用，最后返回自定义指标。下面是一个查找页面的元视口并提取它的示例：
4 | ```javascript
5 | var viewport = undefined;
6 | var metaTags=document.getElementsByTagName("meta");
7 | for (var i = 0; i < metaTags.length; i++) {
8 | if (metaTags[i].getAttribute("name") == "viewport") {
9 | viewport = metaTags[i].getAttribute("content");
10 | break;
11 | }
12 | }
13 | return viewport;
14 | ```
15 |
16 | ## 一、支持的浏览器
17 | + Internet Explorer
18 | + Chrome
19 | + Firefox
20 |
21 | ## 二、注意事项
22 | + 脚本必须阻塞，并直接返回感兴趣的数据。不支持异步操作（计时器，RequestAnimationFrame，Ajax请求等）。
23 | + 自定义指标与内置指标存在于同一命名空间中，如果它们具有相同的名称，则可以覆盖内置指标。
24 | + 指标名称应该是简单的字母数字，并且可能没有空格。
25 |
26 | ## 三、在测试时指定自定义指标
27 | 为了简单起见，度量的文本输入框以ini文件的形式定义：
28 | ```bash
29 | [metric-name]
30 |
31 |
32 | [metric-2-name]
33 |
34 | ```
35 |
36 | 下面是一个收集3个不同指标的示例（2个数字和一个字符串）：
37 | ```javascript
38 | [iframe-count]
39 | return document.getElementsByTagName("iframe").length;
40 |
41 | [script-tag-count]
42 | return document.getElementsByTagName("script").length;
43 |
44 | [meta-viewport]
45 | var viewport = undefined;
46 | var metaTags=document.getElementsByTagName("meta");
47 | for (var i = 0; i < metaTags.length; i++) {
48 | if (metaTags[i].getAttribute("name") == "viewport") {
49 | viewport = metaTags[i].getAttribute("content");
50 | break;
51 | }
52 | }
53 | return viewport;
54 | ```
55 | 如果使用API，自定义指标的表单字段为“custom” - 只需确保正确编码内容（如果使用GET，则为url encode，如果POST，则为form encode）。
56 |
57 | ## 四、静态指定自定义指标（私有实例）
58 | 每个指标在`settings/custom_metrics`下以`.js`扩展名作为单独文件存在。文件名将是度量的记录名称，执行代后返回一个值。
59 | 例如，`settings/custom_metrics/meta-viewport.js`将定义一个自定义变量`meta-viewport` ，内容将如下所示：
60 | ```javascript
61 | var viewport = undefined;
62 | var metaTags=document.getElementsByTagName("meta");
63 | for (var i = 0; i < metaTags.length; i++) {
64 | if (metaTags[i].getAttribute("name") == "viewport") {
65 | viewport = metaTags[i].getAttribute("content");
66 | break;
67 | }
68 | }
69 | return viewport;
70 | ```
--------------------------------------------------------------------------------
/Using-WebPagetest/metrics-speed-index.md:
--------------------------------------------------------------------------------
1 | # 首屏展现平均值（速度指数）
2 | `Speed Index`是显示页面的可见部分的平均时间。它以毫秒为单位表示，会受视图端口大小的影响。
3 | `Speed Index`已于2012年4月添加到WebPagetest，衡量页面内容填充的速度（越低越好）。它特别适用于比较不同页面之间的差别（在优化之前/之后，我的网站与竞争对手等），与其它指标（`Load Time`，`Start Render`等）结合使用，可以更好地了解网站的性能 。
4 |
5 | ## 一、问题
6 | 过去，我们依赖里程碑计时来确定网页速度的快慢。其中最常见的是浏览器到达主文档（onload）的加载事件之前的时间。这个时间很容易在实验室环境和现实世界中测量到。不幸的是，它不是一个非常好的实际用户的体验指标。随着页面的增长，内容的增多（超过当前屏幕的内容），这个加载事件将会被延迟执行。我们引入了更多的里程碑，尝试更好的表示时间，第一次渲染（First Paint）时间、 DOM内容准备（DOM Content Ready）时间等，但都有根本的缺陷，它们只测量单个点，并不能传达实际用户的体验。
7 |
8 | ## 二、引入Speed Index
9 | `Speed Index`采用可视页面加载的视觉进度，计算内容绘制速度的总分。为此，首先需要能够计算在页面加载期间，各个时间点“完成”了多少部分。在WebPagetest中，通过捕获在浏览器中加载页面的视频并检查每个视频帧（在启用视频捕获的测试中，每秒10帧）来完成的，这个算法在下面有描述，但现在假设我们可以为每个视频帧分配一个完整的百分比（在每个帧下显示的数字）。翻译的比较生硬，下面是原文：
10 | >The speed index takes the visual progress of the visible page loading and computes an overall score for how quickly the content painted. To do this, first it needs to be able to calculate how "complete" the page is at various points in time during the page load. In WebPagetest this is done by capturing a video of the page loading in the browser and inspecting each video frame (10 frames per second in the current implementation and only works for tests where video capture is enabled). The current algorithm for calculating the completeness of each frame is described below, but for now assume we can assign each video frame a % complete (numbers displayed under each frame):
11 |
12 | 
13 |
14 | 如果我们绘制一个页面的完整性与时间的折线图，我们将最终得到如下所示的东西：
15 |
16 | 
17 |
18 | 然后，我们可以通过计算曲线下的面积将进度转换为数字：
19 |
20 | 
21 | 
22 |
23 | 如果页面在达到视觉上完成后旋转10秒，分数将继续增加。下图中，涂色的是渲染部分，面积越小，页面载入速度越快。原文如下：
24 | >This would be great except for one little detail, it is unbounded. If a page spins for 10 seconds after reaching visually complete the score would keep increasing. Using the "area above the graph" and calculating the unrendered portion of the page over time instead gives us a nicely bounded area that ends when the page is 100% complete and approaches 0 as the page gets faster:
25 |
26 | 
27 | 
28 | 
29 |
30 | `Speed Index`是以“ms”为单位计算的“曲线上方区域”，在视觉完成范围内使用0.0-1.0。间隔分数计算公式如下：
31 | > IntervalScore = Interval * (1.0 - (Completeness / 100))
32 |
33 | Completeness是该帧的完成百分比，Interval是该视频帧以毫秒为单位的间隔时间（这里为100）。总分是各个间隔的总和：SUM（IntervalScore），原文如下：
34 | >The Speed Index is the "area above the curve" calculated in ms and using 0.0-1.0 for the range of visually complete. The calculation looks at each 0.1s interval and calculates IntervalScore = Interval * (1.0 - (Completeness/100)) where Completeness is the % Visually complete for that frame and Interval is the elapsed time for that video frame in ms (100 in this case). The overall score is just a sum of the individual intervals: SUM(IntervalScore)
35 |
36 | 为了比较，下面是两页的视频帧（上面是“A”，下面是“B”）：
37 |
38 | 
39 |
40 | ## 三、测量视觉进展(Measuring Visual Progress)
41 | 我用手挥舞着如何计算每个视频帧的“完整性（completeness）” ，`Speed Index`本身的计算是独立的技术，用于确定完整性（可以与其它计算完整性的方法一起使用）。目前使用两种方法：
42 | ### 1. 视频捕获的可视进度(Visual Progress from Video Capture)
43 | 简单方法是将图像的每个像素与最终图像比较，然后计算每个帧匹配的像素百分比。这种方法的主要问题是，网页是流动的，像广告加载可以导致页面的其余部分移动。在像素比较模式下，屏幕上的每个像素的移动都会改变比对结果，即使实际内容只是向下移动一个像素。
44 | 目前的技术是采取图像颜色的直方图（红色，绿色和蓝色各一个），只看一下页面上颜色的整体分布。计算起始直方图（对于第一个视频帧）和结束直方图（最后一个视频帧）之间的差异，并使用该差异作为基线。将视频中的每个帧的直方图与第一个直方图的差异和基线进行比较，以确定该视频帧“完成”了多少。在某些情况下，可能不准确，但大部分情况下，这种方法还是值得做的。
45 | 这是原始机制，用于计算`Speed Index`的视觉进度，但在某些情况下，它有问题（视频播放页面，幻灯片动画或大的插页式广告）。它对结束状态非常敏感，根据最终图像计算进度。它也只能在实验室中测量，并且依赖于视频捕获。
46 |
47 | ### 2. 从绘画事件的可视进展(Visual Progress from Paint Events)
48 | 最近，我们（成功地）试验了Webkit开发者工具时间线（也可以通过扩展和远程调试协议）公开的Paint事件。它适用于所有最新的基于webkit的浏览器，包括桌面、移动所有平台。也非常轻量级，不需要捕获视频。但它依赖给定浏览器中的渲染器，因此不能用于比较不同浏览器的性能。
49 | 为了获得有用的数据，它需要一个公平的过滤和加权。
50 | 我们使用特定算法来计算从dev工具绘制rects的`Speed Index`：
51 | + 在基于Webkit的浏览器的情况下，收集时间线数据，其中包括绘制矩形以及其他有用的事件。
52 | + 过滤掉在接收到第一个响应数据之后，第一个布局之前的任何绘制事件。
53 | + ResourceReceiveResponse -> Layout -> Paint事件.
54 | + 这是因为浏览器在实际处理任何数据之前会执行多个绘制事件。
55 | + 将所有`Paint`事件按他们正在更新的矩形分组（帧ID，x，y，width，height）。
56 | + 绘制的最大`Paint`矩形是“全屏”矩形。
57 | + 每个矩形贡献一个分值。给定矩形的可用点是矩形的面积（width x height）。
58 | + 全屏绘制（最大矩形的任何`Paint`事件）计为50％，以便它们仍然有贡献但不支配进度。
59 | + 总和是每个矩形的点的总和。
60 | + 给定矩形的点在绘制该矩形的所有`Paint`事件上均匀分布。
61 | + 一个带有单个`Paint`事件的矩形将贡献全部区域。
62 | + 具有4个`Paint`事件的矩形将为每个`Paint`事件贡献其区域的25％。
63 | + 任何给定`Paint`事件的结束时间用于该`Paint`事件的时间。
64 | + 通过将每个`Paint`事件的贡献添加到运行总计中，接近总体（100％）来计算视觉进展。
65 |
66 | >+ In the case of Webkit-based browsers, we collect the timeline data which includes paint rects as well as other useful events.
67 | >+ We filter out any paint events that occur before the first layout that happens after the first response data is received.
68 | > + ResourceReceiveResponse -> Layout -> Paint events.
69 | > + This is done because the browser does several paint events before any data has actually been processed.
70 | >+ We group all paint events by the rectangle that they are updating (frame ID, x, y, width, height).
71 | >+ We consider the largest paint rectangle painted to be the "full screen" rectangle.
72 | >+ Each rectangle contributes a score towards an overall total. The available points for a given rectangle is that rectangle's area (width x height).
73 | >+ Full screen paints (any paint events for the largest rectangle) are counted as 50% so that they still contribute but do not dominate the progress.
74 | >+ The overall total is the sum of the points for each rectangle.
75 | >+ The points for a given rectangle are divided evenly across all of the paint events that painted that rectangle.
76 | > + A rectangle with a single paint event will have the full area as it's contribution.
77 | > + A rectangle with 4 paint events will contribute 25% of it's area for each paint event.
78 | >+ The endTime for any given paint event is used for the time of that paint event.
79 | >+ The visual progress is calculated by adding each paint event's contribution to a running total, approaching the overall total (100%).
80 |
81 | ## 四、参考Speed Index结果
82 | ### 1. 5Mbps电缆
83 | Alexa排名前30万来自[HTTP Archive](http://httparchive.org/)的测试：
84 |
85 | 
86 |
87 | ### 2. 1.5Mbps DSL
88 | Alexa排名前10万来自[HTTP Archive](http://httparchive.org/)的测试：
89 |
90 | 
--------------------------------------------------------------------------------
/Using-WebPagetest/metrics.md:
--------------------------------------------------------------------------------
1 | # 指标
2 |
3 | ### 1. 网页级指标(Page-level Metrics)
4 | 这些是为整个页面捕获并显示的顶级度量值。
5 |
6 | ### 2. 整页加载时间(Load Time)
7 | 测量的时间是从初始化请求，到开始执行`window.onload`事件。
8 | >The Load Time is measured as the time from the start of the initial navigation until the beginning of the window load event (onload).
9 |
10 | ### 3. 页面所有元素加载时间(Fully Loaded)
11 | 从初始化请求，到Document Complete后，2秒内（中间几百毫秒轮询）没有网络活动的时间，但这2秒是不包括在测量中的，所以会出现两个差值大于或小于2秒。
12 | > The Fully Loaded time is measured as the time from the start of the initial navigation until there was 2 seconds of no network activity after Document Complete. This will usually include any activity that is triggered by javascript after the main page loads.
13 |
14 | ### 4. 第一个字节加载时间(First Byte)
15 | 第一个字节时间（通常缩写为TTFB）被测量为从初始化请求，到服务器响应的第一个字节，被浏览器接收的时间（不包括DNS查询、TCP连接的时间）。
16 | 我理解TTFB的计算是从下图中requestStart到responseStart这之间的时间。
17 |
18 | 
19 |
20 |
21 | ### 5. 页面渲染时间(Start Render)
22 | 测量的时间是从初始化请求，到第一个内容被绘制到浏览器显示的时间。在瀑布图中有两个参数指标`Start Render`和`msFirstPaint`。
23 | + `Start Render`是通过捕获页面加载的视频，并在浏览器第一次显示除空白页之外的其他内容时查看每个帧来衡量的。它只能在实验室测量，通常是最准确的测量。
24 | + `msFirstPaint`（IE专用属性）是由浏览器本身报告的一个测量，它认为绘制的第一个内容。通常是相当准确，但有时它报告的时候，浏览器只画一个空白屏幕。
25 |
26 | ### 6. 首屏展现平均值(Speed Index)
27 | 表示页面呈现用户可见内容的速度（越低越好）。有关如何计算的更多信息，请参见：[Speed Index](/Using-WebPagetest/metrics-speed-index.md)。
28 |
29 | ### 7. DOM元素数量(DOM Elements)
30 | 在测试结束时测试页面上的DOM元素的计数。
31 |
32 | ### 8. 请求级度量标准(Request-level Metrics)
33 | 这些是为每个请求捕获和显示的度量。
--------------------------------------------------------------------------------
/Using-WebPagetest/quick-start-guide.md:
--------------------------------------------------------------------------------
1 | # 快速入门指南
2 | WebPagetest的核心是用于测量和分析网页的性能。有很多选项，看着很吓人，但其实做快速测试是很简单的。
3 | 本指南将引导你提交测试和结果解释。
4 |
5 | ## 一、运行性能测试(Running a Performance Test)
6 | ### 1.1 输入网页网址(Enter The Page URL)
7 |
8 | 你需要做的第一件事是决定一个页面来测试。大多数人从他们的网站的主页开始（但不要忽视人们访问的其他页面）。确定要测试的页面后，转到WebPagetest并为其指定要测试的页面的URL：
9 |
10 | 
11 | ### 1.2 选择位置(Select a Location)
12 | 接下来，应该决定从哪里运行测试。WebPagetest具有位于世界各地的测试机器，你应该从接近用户访问的位置进行测试，从列表中选择一个位置，或者单击`Select from Map`按钮，从地图视图中选择一个位置（只需单击气球，然后确定）。如果将指针放在气泡上，它们将显示一条消息，提示位置信息：
13 |
14 | 
15 | ### 1.3 选择浏览器(Select a Browser)
16 | 最后，需要决定使用什么浏览器进行测试。**不同的位置支持不同的浏览器**，如果给定的位置没有正在寻找的浏览器，可以尝试不同的位置。 Dulles，VA USA位置支持WebPagetest工作的所有浏览器（IE 6,7,8和9）。现在忽略“dynaTrace”浏览器，这些用于更高级的分析。我们通常建议使用IE7进行初始测试，因为它几乎是最糟糕的情况，并且更容易看到很多问题，所以如果你不知道什么浏览器，开始只需使用IE7。
17 |
18 | 
19 | ### 1.4 提交测试(Submit the Test)
20 | 一切配置完成后，点击`START TEST`按钮，请求将发送到测试位置进行测试。测试可能需要一段时间才能运行，具体取决于有多少次测试（在测试之前至少有一分钟的测试时间，但是它的时间甚至更长）。一旦测试完成，你将得到结果。
21 |
22 | ## 二、解释结果(Interpreting the Results)
23 | 第一次看到结果信息可能有点吓人，信息量有点大，但首先可以先查看一些关键信息。
24 |
25 | ### 2.1 优化等级(Optimization Grades)
26 | 在结果页面的顶部是一组最关键的性能优化等级。涵盖了适用于所有网站的基本优化，任何不是A或B的都需要进行进一步的优化。
27 |
28 | 
29 |
30 | | 字母等级 | 占比 |
31 | | ------------ |:---------------|
32 | | A | 90%+ |
33 | | B | 80% ~ 89% |
34 | | C | 70% ~ 79% |
35 | | D | 60% ~ 69% |
36 | | F | 0% ~ 59% |
37 |
38 | #### 2.1.1 阻塞时间（First Byte Time）
39 | 首字节时间是指浏览器收到HTML内容的第一个字节时间，包括DNS查找、TCP连接、SSL协商（如果是HTTPS请求）和TTFB（Time To First Byte）。
40 | 关于First Byte Time和TTFB的区别在[Metrics](/Using-WebPagetest/metrics.md)一节中做了简单分析。
41 |
42 | 预期首字节 = RTT * 3 + SSL
43 | 比值 = 100 - (实际观测首字节 - 预期首字节) / 10
44 | 其中`RTT`的指往返通信时间。更多网络术语可以参考整理的[网络协议](http://www.cnblogs.com/strick/p/6262284.html)
45 |
46 | #### 2.1.2 长连接已启动(Keep-alive Enabled)
47 | 请求网页上的内容（图像、JavaScript、CSS、Flash等）需要与Web服务器建立连接。每次都重新连接会耗费一些时间，所以最好复用连接，`keep-alive`实现了这个方法。默认情况下，在配置中已启用，而且是HTTP 1.1标准的一部分，但有时它们将被破坏（可能是无意的）。启用`keep-alive`通常只是服务器上的配置更改，不需要对页面本身进行任何更改，通常可以将加载页面的时间减少40-50％。计算公式如下：
48 |
49 | 比值 = 实际复用连接数 / 预期复用连接数
50 |
51 | #### 2.1.3 压缩文本(Compress Text)
52 | 除了图片或视频，剩余的都是某种类型的文本（html，javascript，css等）。HTTP提供了一种以压缩形式传输文件的方法。启用文本资源压缩通常只是服务器配置更改，不需要对页面本身进行任何更改，提高性能降低服务内容的成本（通过减少传输的数据量）。由于文本资源通常在页面的开头（javascript和css）下载，因此，提供文本资源的快慢很影响用户体验。计算公式如下：
53 |
54 | 比值 = 资源压缩后的大小 / 实际资源的大小
55 |
56 | #### 2.1.4 压缩图片(Compress Images)
57 | 图像压缩检查仅查看照片图像（JPEG文件），确保质量不会设置得太高。JPEG图像可以在不降低视觉质量的情况下压缩。我们可以在Photoshop的“网络存储”模式中，使用一种质量级别为“50”的压缩图像的标准。在视觉质量不是很差的情况下，尽量多的压缩图像。在照片中经常包含其他数据，特别是如果照片来自数码相机（包含关于相机，镜头，位置，缩略图的信息），其中一些应该在被发布到网络之前就移除（小心保留任何版权信息）。计算公式如下：
58 |
59 | 比值 = 图片压缩后的尺寸 / 图片实际的尺寸
60 |
61 | #### 2.1.5 缓存静态内容(Cache Static Content)
62 | 静态内容是网页上不经常更改的内容（图片，javascript，css）。可以配置它们，以便用户的浏览器将它们缓存起来，浏览器决定一个资源被缓存多久取决于2个因素：`缓存寿命`和`过期时间`（TTL）。资源的寿命可以通过2个标签配置：实体标签（`ETags`）和首部标签（`Last-Modified`）。过期时间是根据2个TTL首部标签：`Cache-Control的max-age属性`和`Expires Header`。如果用户回到页面（或访问使用相同文件的其他页面），他们可以使用已经拥有的副本，而不是重新请求文件Web服务器。在用户浏览器中成功缓存静态内容可以显著提高重复访问的性能（高达80+％，具体优化率取决于页面），并能减少Web服务器上的负载。有时可能很难实现缓存而不改变页面，所以不要盲目地启用它（你需要能够更改希望改变的任何文件的文件名）。
63 |
64 | 比值 = 过期资源数得分 / 静态资源总数
65 |
66 | 这个评级需要一个缓存生命周期评分系统，如果一个静态资源的生命周期超过一周，就100分，超过一小时，最多50分，以上情况之外都是0分。
67 |
68 | #### 2.1.6 合并JS/CSS文件(Combine JS/CSS Files)
69 | 提高性能通常意味着减少对内容的请求数，最简单（最重要的）方法之一是减少在页面开头加载的css和javascript文件数量（在 中会阻塞页面显示）。一个简单的实现方法是将JavaScript和CSS分别合并到一个文件中（CSS最好在JavaScript之前加载）。减少用户从屏幕上看到东西的等待时间，对用户体验有巨大的影响。计算方式：
70 |
71 | #### 2.1.7 使用CDN(Use of CDN)
72 | 每个内容的请求都是从用户的浏览器到Web服务器，再返回。随着距离越来越远，这样一个往返可能消耗很多时间（页面上的请求越多，消耗的时间越多），把你的服务器建立在离用户比较近的地方就能解决这个问题，这正是内容分发网络（CDN）的作用。他们在世界各地都有靠近用户的服务器，从靠近用户的服务器提供网站的静态内容。使用CDN没有意义的唯一情况是如果网站的所有用户都已经接近Web服务器（例如社区网站）。计算方式：
73 |
74 | 比值 = 通过CDN服务获取的静态资源数 / 静态资源总数
75 |
76 | ### 2.2 高级度量(High-level Metrics)
77 | 结果页顶部的数据表提供了有关已加载页面的一些高级信息：
78 |
79 | 
80 | #### 2.2.1 首次视图(First View)
81 | 首次视图的测试，将会把浏览器的缓存和Cookie清除，表示访问者第一次访问该网页，将体验到的情况。
82 |
83 | #### 2.2.2 重复视图(Repeat View)
84 | 重复视图会在首次视图测试后立即执行，不会清除任何内容。浏览器窗口在`First View`测试后关闭，然后启动新浏览器以执行`Repeat View`测试。重复视图测试模拟的是用户离开页面后，马上再进入此页面的场景。
85 |
86 | #### 2.2.3 文档加载完毕(Document Complete)
87 | 从初始化请求，到加载所有静态内容（图片、CSS、JavaScript等），但可能不包括由JavaScript执行触发的内容，可以理解为开始执行`window.onload`。原文如下：
88 |
89 | >The metrics grouped together under the Document Complete heading are the metrics collected up until the browser considered the page loaded (onLoad event for those familiar with the javascript events). This usually happens after all of the images content have loaded but may not include content that is triggered by javascript execution.
90 |
91 | #### 2.2.4 页面所有元素加载时间(Fully Loaded)
92 | 从初始化请求，到Document Complete后，2秒内没有网络活动的时间，这包括在主网页加载后由JavaScript触发的任何活动。原文如下：
93 | >The metrics grouped together under the Fully Loaded heading are the metrics collected up until there was 2 seconds of no network activity after Document Complete. This will usually include any activity that is triggered by javascript after the main page loads.
94 |
95 | #### 2.2.5 整页加载时间(Load Time)
96 | 与`Document Complete`中的时间属性相同。原文如下：
97 | >The Load Time is the time from when the user started navigating to the page until the Document Complete event (usually when all of the page content has loaded).
98 |
99 | #### 2.2.6 第一个字节加载时间(First Byte)
100 | 这个时间表示从初始化请求到服务器响应后，接收到第一个字节的时间。此时的大部分时间通常称为“后端时间”，服务器为用户构建页面的时间量。原文如下：
101 | >The First Byte time is the time from when the user started navigating to the page until the first bit of the server response arrived. The bulk of this time is usually referred to the "back-end time" and is the amount of time the server spent building the page for the user.
102 |
103 | #### 2.2.7 页面渲染时间(Start Render)
104 | 渲染时间表示屏幕上显示东西的第一个时间点，在这个时间点之前，用户看到的是一个空白页。这并不表示用户看到了内容，可能只是一个简单的背景色，但这是用户开始看到内容的第一个指标，`我理解这个为白屏时间`。原文如下：
105 | >The Start Render time is the first point in time that something was displayed to the screen. Before this point in time the user was staring at a blank page. This does not necessarily mean the user saw the page content, it could just be something as simple as a background color but it is the first indication of something happening for the user.
106 |
107 | #### 2.2.8 DOM元素数量(DOM Elements)
108 | 在测试结束时测试页面上的DOM元素的计数。
109 |
110 | #### 2.2.10 HTTP请求数(Requests)
111 | 浏览器针对页面上的内容（图片，javascript，css等）发出的请求数。
112 |
113 | #### 2.2.11 传输的字节量(Bytes In)
114 | 浏览器加载页面下载的数据量。它通常也被称为“页面大小”。
115 |
116 | ---
117 | 以前曾写过《[前端页面性能参数搜集](http://www.cnblogs.com/strick/p/5750022.html)》的文章，大家可以探讨一下。
--------------------------------------------------------------------------------
/Using-WebPagetest/result-codes.md:
--------------------------------------------------------------------------------
1 | # 结果代码
2 | 结果代码为0（成功）或99999（内容错误）是成功的测试，所有其他结果都是错误。
3 |
4 | | 结果代码 | 描述 |
5 | | :------------ |:---------------|
6 | | 0 | 成功的测试 |
7 | | 4xx-5xx | HTTP结果（基页错误） |
8 | | 99996 | 测试失败等待指定的DOM元素/结束条件 |
9 | | 99997 | 测试超时（无内容错误） |
10 | | 99998 | 测试超时（内容错误） |
11 | | 99999 | 测试成功完成但个别请求失败（内容错误） |
12 |
13 | 其他错误代码是Wininet / IE特定的错误代码（通常是大的负数）。识别它们的最好方法是将其转换为十六进制。 如果您在找到它们时向我们发送新的错误代码，我们将它们添加到表中。
--------------------------------------------------------------------------------
/Using-WebPagetest/scripting.md:
--------------------------------------------------------------------------------
1 | # 脚本
2 | WebPagetest具有脚本功能，可自动执行多步测试（例如，登录网站或发送电子邮件）。脚本包含在文件中，其中单个文件构成浏览器会话（浏览器将在脚本完成后关闭）。文件是纯文本文件，可以由任何文本编辑器编辑。
3 | 你可以通过从“文件”菜单中选择“`Run Script`”来测试桌面版本中的脚本。
4 | 脚本文件的每一行包含一个命令和任何必要的参数，并且以制表符分隔（即命令之后是一个制表符，然后是第一个参数，然后是一个制表符和第二个参数等，直到该行结束）。 参数的数量及其控制取决于命令。
5 | 以//开头的空行和行将被忽略，因此您可以在脚本中嵌入注释。
6 | 对DOM元素操作的脚本命令标识具有`attribute = value`格式的DOM元素，其中该属性标识要作用的DOM元素的唯一属性。例如，如果正在填写表单，填充的元素看起来像这样：
7 | ```html
8 |
9 | ```
10 | 你可以将它标识为`id = lgnId1`，`name = loginId`或`tabindex = 1`
11 | 对于表单字段，通常最好使用名称属性，这些将被上传到服务器。类属性是特殊的，并且被引用为`className`而不是类。除了DOM元素属性匹配之外，还有两个特殊属性可用于匹配内容。 `innerText`和`innerHtml`，它们都将匹配DOM元素的内容，而不是它的属性。例如：
12 | ```html
13 | Delete
14 | ```
15 | 可以通过`innerText = Delete`来标识。 匹配区分大小写，并匹配完整字符串。
16 |
17 | ## 一、托管脚本（Hosted Scripting）
18 | 托管版本的WebPagetest支持执行上传的脚本，但有一些限制：
19 | + 托管的脚本只能有一个步骤产生数据（见下面的例子，如何抑制中间步骤的结果）
20 | + 不允许使用使用外部文件的命令（loadFile，loadVariables，fileDialog）
21 |
22 | 为了抑制中间步骤，您需要确保对于要记录的步骤，禁用数据记录。例如：
23 | ```bash
24 | logData 0
25 | // put any urls you want to navigate
26 | navigate www.aol.com
27 | navigate news.aol.com
28 | logData 1
29 | // this step will get recorded
30 | navigate news.aol.com/world
31 | ```
32 | 上面的脚本将导航到主要的aol门户，然后到新闻页面，最后到世界新闻特定页面（仅记录世界新闻页面的记录结果）。 这样就可以测试给定路径对网站的性能（例如，共享css和js缓存）的影响。
33 | 另一个重要的用例是，如果你想测试一个需要验证的网站。以下是验证脚本：
34 | ```bash
35 | logData 0
36 | // bring up the login screen
37 | navigate http://webmail.aol.com
38 | logData 1
39 | // log in
40 | setValue name=loginId someuser@aol.com
41 | setValue name=password somepassword
42 | submitForm name=AOLLoginForm
43 | ```
44 | 你不会得到很多关于脚本失败的反馈，所以请确保在桌面版本的WebPagetest（`File`->`Run Script`）中测试脚本，然后再上传它们进行托管测试。
45 |
46 | ## 二、命令参考（Command Reference）
47 | usage：用法，example：示例。
48 | ### 2.1 导航/ DOM互动（Navigation/DOM Interaction）
49 | #### 2.1.1 navigate
50 | 将浏览器导航到所提供的URL，并等待其完成。
51 | 浏览器支持：IE，Chrome，Firefox，Safari
52 | ```bash
53 | usage: navigate
54 | example: navigate http://webmail.aol.com
55 |
56 | - URL to provide the browser for navigation (same as you would enter into the address bar)
57 | ```
58 |
59 | #### 2.1.2 click
60 | 触发标识的DOM元素的点击事件。此版本没有暗示的等待，脚本将在事件提交后继续运行（请参阅clickAndWait等待版本）。
61 | 浏览器支持：IE, Chrome, Firefox
62 | ```bash
63 | usage: click
64 | example: click title=Delete (del)
65 |
66 | - DOM element to click on
67 | ```
68 |
69 | #### 2.1.3 clickAndWait
70 | 触发标识的DOM元素的点击事件，然后等待浏览器活动完成。
71 | 浏览器支持：IE, Chrome, Firefox
72 | ```bash
73 | usage: clickAndWait
74 | example: clickAndWait innerText=Send
75 |
76 | - DOM element to click on
77 | ```
78 |
79 | #### 2.1.4 selectValue
80 | 从给定DOM元素的下拉列表中选择一个值。
81 | 浏览器支持：IE
82 | ```bash
83 | usage: selectValue
84 | example: selectValue id=country usa
85 |
86 | - DOM element to select the value of
87 | - value to use
88 | ```
89 |
90 | #### 2.1.5 sendClick / sendClickAndWait
91 | 创建JavaScript `OnClick`事件并将其发送到指定的元素。
92 | 浏览器支持：IE
93 | ```bash
94 | usage: sendClickAndWait
95 | example: sendClickAndWait innerText=Send
96 |
97 | - DOM element to send the click event to
98 | ```
99 |
100 | #### 2.1.6 sendKeyDown / sendKeyUp / sendKeyPress (AndWait)
101 | 创建一个创建JavaScript键盘事件（`OnKeyDown`，`OnKeyUp`，`OnKeyPress`），并将其发送到指定的元素。
102 | 浏览器支持：IE
103 | ```bash
104 | usage: sendKeyDownAndWait
105 | example: sendKeyDownAndWait name=user x
106 |
107 | - DOM element to send the click event to
108 | - Key command to send (special values are ENTER, DEL, DELETE, BACKSPACE, TAB, ESCAPE, PAGEUP, PAGEDOWN)
109 | ```
110 |
111 | #### 2.1.7 setInnerHTML
112 | 将给定DOM元素的`innerHTML`设置为所提供的值。这通常用于填充类似可编辑的HTML面板（如webmail中的消息正文）。 如果要包括HTML格式，请使用此选项。
113 | 浏览器支持：IE, Chrome, Firefox
114 | ```bash
115 | usage: setInnerHTML
116 | example: setInnerHTML contentEditable=true %MSG%
117 |
118 | - DOM element to set the innerText of
119 | - value to use
120 | ```
121 |
122 | #### 2.1.8 setInnerText
123 | 将给定DOM元素的`innerText`设置为所提供的值。这通常用于填充类似可编辑的HTML面板（如webmail中的消息正文）。 如果您不想包括任何HTML格式，请使用此选项。
124 | 浏览器支持：IE, Chrome, Firefox
125 | ```bash
126 | usage: setInnerText
127 | example: setInnerText contentEditable=true %MSG%
128 |
129 | - DOM element to set the innerText of
130 | - value to use
131 | ```
132 |
133 | #### 2.1.9 setValue
134 | 将给定DOM元素的值属性设置为所提供的值。这通常用于填充页面上的文本元素（表单或其他形式）。当前只支持“`input`”和“`textArea`”元素类型。
135 | 浏览器支持：IE, Chrome, Firefox
136 | ```bash
137 | usage: setValue
138 | example: setValue name=loginId userName
139 |
140 | - DOM element to set the value of
141 | - value to use
142 | ```
143 |
144 | #### 2.1.10 submitForm
145 | 触发标识窗体的提交事件。
146 | 浏览器支持：IE, Chrome, Firefox
147 | ```bash
148 | usage: submitForm
149 | example: submitForm name=AOLLoginForm
150 |
151 | - Form element to submit
152 | ```
153 |
154 | #### 2.1.11 exec
155 | 执行JavaScript。
156 | 浏览器支持：IE, Chrome, Firefox
157 | ```bash
158 | usage: exec
159 | example: exec window.setInterval('window.scrollBy(0,600)', 1000);
160 | ```
161 |
162 | #### 2.1.12 execAndWait
163 | 执行JavaScript并等待浏览器完成从操作生成的任何活动。
164 | 浏览器支持：IE, Chrome, Firefox
165 | ```bash
166 | usage: execAndWait
167 | example: execAndWait window.setInterval('window.scrollBy(0,600)', 1000);
168 | ```
169 |
170 | #### 2.1.13 fileDialog
171 | 单击标识的按钮以操作本地文件，指定所提供的文件，然后关闭本地文件浏览对话框。 这主要用于上传本地文件（附加到邮件，上传图片等）。
172 | 浏览器支持：IE
173 | ```bash
174 | usage: fileDialog
175 | example: fileDialog type=file msg.gif
176 |
177 | - DOM element to click on.
178 | - file to attach/upload.
179 | ```
180 |
181 | 除非一个页面具有多个用于附加文件的按钮（极不可能），否则应该能够始终对DOM元素使用`type=file`。
182 | 文件的路径搜索顺序是首先检查脚本运行所在的同一目录，然后检查WebPagetest安装到的目录，然后最终将该文件作为绝对路径。
183 |
184 | ### 2.2 结束条件（End Conditions）
185 | #### 2.2.1 requiredRequest
186 | 强制测试在完成之前等待给定的请求。
187 | 浏览器支持：IE
188 | ```bash
189 | usage: requiredRequest
190 | example: requiredRequest adsWrapper.js
191 |
192 | - Part of the request URL to match (case-sensitive substring match)
193 | ```
194 | 你可以通过为每个新请求重复此命令来指定多个请求：
195 |
196 | ```bash
197 | requiredRequest www.aol.com
198 | requiredRequest www.google.com
199 | navigate www.google.com
200 | ```
201 |
202 | #### 2.2.2 setABM
203 | 设置“基于活动的测量（Activity Based Measurement）”模式。 有效值为：
204 | + 0 - 禁用（Web 1.0 - 基于文档完成的测量）
205 | + 1 - 启用（Web 2.0 - 测量直到活动停止）
206 | + 2 - 自动（测量直到活动停止，但记录是否应使用文档完成或完全加载数字）
207 |
208 | 如果在脚本中未指定，则默认值为2（自动）
209 | 浏览器支持：IE
210 | ```bash
211 | usage: setABM
212 | example: setABM 0
213 |
214 | - ABM mode to use
215 | ```
216 |
217 | #### 2.2.3 setActivityTimeout
218 | 覆盖在完成测试之前的，最后一次网络活动之后的，超时值（默认为2000秒，即2秒）。
219 | 浏览器支持：IE, Chrome, Firefox, Safari
220 | ```bash
221 | usage: setActivityTimeout
222 | example: setActivityTimeout 5000
223 |
224 | - Number of milliseconds after the last network activity (after onload) before calling a test done.
225 | ```
226 |
227 | #### 2.2.4 setDOMElement
228 | 设置下一个事件成功完成所需的DOM元素的属性。直到DOM元素出现或动作超时，测量才完成。此外，DOM元素出现的时间将记录在结果中。
229 | 浏览器支持：IE, Chrome, Firefox
230 | ```bash
231 | usage: setDOMElement
232 | example: setDOMElement name=loginId
233 |
234 | - DOM element to wait for
235 | ```
236 |
237 | #### 2.2.5 setDOMRequest
238 | 设置下一个事件成功完成所需的Http请求的子字符串。在特定Http请求完成或操作超时之前，测量将不会完成。
239 | 此外，Http请求发生的时间将记录在结果中。
240 | 浏览器支持：IE
241 | ```bash
242 | usage: setDOMRequest
243 | example: setDOMRequest www.google.com/images
244 |
245 | - Http Request to wait for
246 | - It is optional. It can be TTFB or START. If it is not present, the time till the END of the Http Request will be recorded in the results
247 | ```
248 |
249 | #### 2.2.6 setTimeout
250 | 覆盖单个脚本步骤的超时值。
251 | 浏览器支持：IE, Chrome, Firefox, Safari
252 | ```bash
253 | usage: setTimeout
254 | example: setTimeout 240
255 |
256 | - Number of seconds to allow for the navigation/step to complete.
257 | ```
258 |
259 | #### 2.2.7 waitForComplete
260 | 等待当前活动的测量完成。这通常不需要，因为启动活动的大多数命令隐式等待或具有包括等待的命令的版本。这应该只在没有一个适合于被测量的动作时使用。
261 | 浏览器支持：IE
262 | ```bash
263 | usage: waitforComplete
264 | example: waitforComplete
265 | ```
266 |
267 | #### 2.2.8 waitForJSDone
268 | 等待页面上的代码通过调用`window.webpagetest.done()`来显式地指示它已完成。
269 | 浏览器支持：IE
270 | ```bash
271 | usage: waitForJSDone
272 | example: waitForJSDone
273 | ```
274 | 页面上的JavaScript看起来像：
275 |
276 | ```JavaScript
277 | if( window.webpagetest )
278 | window.webpagetest.done();
279 | ```
280 |
281 | ### 2.3 请求操作（Request Manipulation）
282 | #### 2.3.1 block
283 | 阻止个别请求加载（可用于阻止像广告等内容）。该命令匹配要阻止的事物列表与每个请求的完整URL（包括主机名）。
284 | 浏览器支持：IE, Chrome, Firefox
285 | ```bash
286 | usage: block
287 | example: block adswrapper.js addthis.com
288 |
289 | - space-delimited list of substrings to block
290 | ```
291 |
292 | #### 2.3.2 blockDomains
293 | 阻止来自指定网域的所有请求加载（可用于阻止像广告等内容）。使用以空格分隔的完整域的列表进行阻止。
294 | 浏览器支持：桌面（wptdriver 300+）
295 | ```bash
296 | usage: blockDomains
297 | example: blockDomains adswrapper.js addthis.com
298 |
299 | - space-delimited list of domains to block
300 | ```
301 |
302 | #### 2.3.3 blockDomainsExecpt
303 | 阻止不是来自某个指定网域的所有请求加载（可用于阻止像广告等内容）。以允许的完整域的空格分隔列表。
304 | 浏览器支持：桌面（wptdriver 300+）
305 | ```bash
306 | usage: blockDomainsExcept
307 | example: blockDomainsExcept www.example.com cdn.example.com
308 |
309 | - space-delimited list of domains to allow
310 | ```
311 |
312 | #### 2.3.4 setCookie
313 | 存储浏览时要使用的浏览器Cookie。
314 | 浏览器支持：IE，Chrome，Firefox
315 | ```bash
316 | usage: setCookie
317 | example: setCookie http://www.aol.com zip=20166
318 | example: setCookie http://www.aol.com TestData = Test; expires = Sat,01-Jan-2000 00:00:00 GMT
319 |
320 | - Path where the cookie should be used/stored
321 | - Cookie value (if expiration information isn't included it will be stored as a session cookie)
322 | ```
323 |
324 | #### 2.3.5 setDns
325 | 允许覆盖用于主机名的IP地址。仍将查找原始名称，以便记录准确的时间，但地址将被指定的替换。
326 | 浏览器支持：IE, Chrome, Firefox, Safari
327 | ```bash
328 | usage: setDns
329 | example: setDns www.aol.com 127.0.0.1
330 |
331 | - Host name for the DNS entry to override
332 | - IP Address for the host name to resolve to
333 | ```
334 |
335 | #### 2.3.6 setDNSName
336 | 允许覆盖主机名（创建假CNAME）。
337 | 浏览器支持：IE, Chrome, Firefox, Safari
338 | ```bash
339 | usage: setDnsName
340 | example: setDnsName pat.aol.com www.aol.com
341 |
342 | - Host name to replace
343 | - Real name to lookup instead
344 | ```
345 |
346 | #### 2.3.7 setUserAgent
347 | 覆盖由浏览器发送的用户代理字符串。
348 | 浏览器支持：IE, Chrome, Firefox, Safari
349 | 小心：你仍然使用相同的浏览器引擎，因此仍然受到该浏览器的功能和行为的限制，即使欺骗了另一个浏览器。
350 | ```bash
351 | usage: setUserAgent
352 | example: setUserAgent Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
353 |
354 | - User agent string to use.
355 | ```
356 |
357 | #### 2.3.8 overrideHost
358 | 使用提供的值，替换给定主机的`Host:HTTP`头的值。它还添加了一个带有原始值的新标题（`x-Host:`)。
359 | 浏览器支持：IE，Chrome，Firefox，Safari（无SSL）
360 | ```bash
361 | usage: overrideHost
362 | example: overrideHost www.aol.com www.notaol.com
363 |
364 | - host for which you want to override the Host: HTTP header
365 | - value to set for the Host header
366 | ```
367 |
368 | #### 2.3.9 overrideHostUrl
369 | 对于给定主机的所有请求，重写请求以转到其他服务器，并将原始主机包含在新URI中。
370 | 浏览器支持：IE
371 | ```bash
372 | usage: overrideHostUrl
373 | example: overrideHostUrl www.webpagetest.org staging.webpagetest.org
374 |
375 | - host for which you want to redirect requests
376 | - target server to receive the redirected requests
377 |
378 | In this example, http://www.webpagetest.org/index.php will get rewritten to actually request http://staging.webpagetest.org/www.webpagetest.org/index.php
379 | ```
380 |
381 | #### 2.3.10 addHeader
382 | 将指定的标头添加到每个http请求（除了存在的标头之外，不覆盖现有标头）。
383 | 浏览器支持：IE，Chrome，Firefox，Safari（无SSL）
384 | ```bash
385 | usage: addHeader {filter}
386 | example: addHeader Pragma: akamai-x-cache-on
387 |
388 | - Full header entry to add (including label)
389 | {filter} - (optional) regex match for host names where the header should be added
390 | ```
391 |
392 | #### 2.3.11 setHeader
393 | 将指定的标头添加到每个http请求，覆盖标头（如果标头已存在）。
394 | 浏览器支持：IE，Chrome，Firefox，Safari（无SSL）
395 | ```bash
396 | usage: setHeader {filter}
397 | example: setHeader UA-CPU: none-ya
398 |
399 | - Full header entry to set (including label)
400 | {filter} - (optional) regex match for host names where the header should be set
401 | ```
402 |
403 | #### 2.3.12 resetHeaders
404 | 清除通过`addHeader`或`setHeader`指定的任何标头（以防只想覆盖部分脚本的标头）。
405 | 浏览器支持：IE，Chrome，Firefox，Safari
406 | ```bash
407 | usage: resetHeaders
408 | example: resetHeaders
409 | ```
410 |
411 | ### 2.4 杂项（Misc）
412 | #### 2.4.1 combineSteps
413 | 使多个脚本步骤在结果中合并为单个“步骤”。
414 | 浏览器支持：IE，Chrome，Firefox，Safari
415 | ```bash
416 | usage: combineSteps [count]
417 | example: combineSteps
418 |
419 | [count] - Number of script steps to merge (optional, defaults to 0 which is ALL)
420 | ```
421 |
422 | 示例脚本：
423 | ```bash
424 | combineSteps
425 | navigate www.google.com
426 | navigate www.yahoo.com
427 | navigate www.aol.com
428 | ```
429 |
430 | #### 2.4.2 if/else/endif
431 | 根据测试的运行编号或缓存状态有条件地执行一个脚本代码块。
432 | 条件块可以嵌套。
433 | 浏览器支持：IE，Chrome，Firefox，Safari
434 | ```bash
435 | usage: if [cached|run]
436 | else
437 | endif
438 |
439 | example: if run 1
440 | if cached 0
441 |
442 | endif
443 | else
444 |
445 | endif
446 |
447 | [cached|run] - Compare against run number or cached state
448 | - matching run number or cached state to execute block
449 | ```
450 |
451 | #### 2.4.3 ignoreErrors
452 | 继续运行脚本，而不考虑任何错误。如果你希望脚本的某些部分间歇性失败，但仍希望继续执行脚本，这将非常有用。默认值是禁用它，处理脚本中的任何错误都将停止测试。
453 | 浏览器支持：IE
454 | ```bash
455 | usage: ignoreErrors
456 | example: ignoreErrors 1
457 |
458 | - set to 1 to turn on error ignoring and 0 to disable it
459 | ```
460 |
461 | #### 2.4.4 logErrors
462 | 启用或禁用错误日志。默认值为启用。
463 | 浏览器支持：IE
464 | ```bash
465 | usage: logErrors
466 | example: logErrors 0
467 |
468 | - set to 0 to turn off error logging and 1 to re-enable it
469 | ```
470 |
471 | #### 2.4.5 loadFile
472 | 用提供的文件的内容填充提供的变量（内容预期为文本，而不是二进制）。
473 | 脚本引擎将自动替换值参数字段（第3个参数）中任何变量的所有出现。对变量如何命名没有限制，但强烈建议您使用％variable％或$ variable $或类似的约定，以便不会意外替换您不希望发生的变量。
474 | 对可以使用的变量数量或可以加载的文件数量没有限制。每个新文件只是添加到现有变量列表。如果两个文件之间的变量名存在冲突，则最后装入的文件将替换所有先前的版本。
475 | 浏览器支持：IE
476 | ```bash
477 | usage: loadFile
478 | example: loadFile msg.txt %MSG%
479 |
480 | - file contents that are to be loaded into the provided variable name.
481 | - variable name to associate with the file contents.
482 | ```
483 | 文件的路径搜索顺序是首先检查脚本运行所在的同一目录，然后检查WebPagetest安装到的目录，然后最终将该文件作为绝对路径。
484 |
485 | #### 2.4.6 loadVariables
486 | 从提供的文件填充一组变量。 该文件应该是一个平面文本文件，每行上的变量格式为“`variable = value`”。
487 | 浏览器支持：IE
488 | ```bash
489 | %AOLSN%=username
490 | %AOLPW%=password
491 | {noformat}
492 |
493 | The script engine will automatically replace all occurrences of any variable in the value parameter field (3rd parameter). There is no restriction on how the variables are named but it is strongly recommended that you use a convention of %variable% or $variable$ or something similar so that you don't accidentally substitute variables where you did not expect it to happen.
494 |
495 | There is no limit on the number of variables you can use or the number of variable files you can load. Each new variable file just adds to the existing variable list. If there is a collision in variable names between two files, the one that is loaded last replaces all previous versions.
496 |
497 |
498 | usage: loadVariables
499 | example: loadVariables accounts.txt
500 |
501 | - file that includes the variable/value pairs (see format above).
502 | ```
503 |
504 | #### 2.4.7 minInterval
505 | 指定脚本的以下部分可以运行的最小时间间隔（以分钟为单位）。例如，如果只想测试邮件发送的频率不要超过每60分钟（在单个机器上），那么将在脚本中要发送邮件的位置插入一个`minInterval`命令。如果间隔尚未过期，则脚本将退出。还可以使用它来确保多个浏览器不会同时执行同一操作，通过指定间隔0（这将允许运行测试，但会暂停第二个脚本，直到第一个脚本完成为止）。
506 | 浏览器支持：IE
507 | ```bash
508 | usage: minInterval
509 | example: minInterval AOLSendMail 60
510 |
511 | - Unique event name that will be restricted to the interval
512 | - Minimum time in minutes to allow between allowing the event to run
513 | ```
514 |
515 | #### 2.4.8 endInterval
516 | 结束由`minInterval`块保护的代码块。如果要使用间隔保护的脚本部分位于脚本中间，并且总是想要执行脚本的其余部分（例如注销），这将非常有用。
517 | 浏览器支持：IE
518 | ```bash
519 | usage: endInterval
520 | example: endInterval
521 | ```
522 |
523 | #### 2.4.9 expireCache
524 | 在指定秒数内过期缓存。可以模拟在一定时间（例如，第二天浏览页面）之后访问页面。它不会帮助模拟内容更改，但是任何具有短期到期的资源，都会与if-modified-since比对。
525 | 浏览器支持：IE
526 | ```bash
527 | usage: expireCache
528 | example: expireCache 86400
529 |
530 | - Any resources with a cache lifetime less than this amount of time will be forced to expire.
531 | ```
532 |
533 | #### 2.4.10 firefoxPref
534 | 指定将在启动浏览器之前配置的任意首选项。
535 | 浏览器支持：Firefox
536 | ```bash
537 | usage: firefoxPref
538 | examples:
539 | firefoxPref network.http.pipelining false
540 | firefoxPref network.http.pipelining.maxrequests 5
541 | firefoxPref general.useragent.override "Some User Agent String"
542 |
543 | - The preference that is to be modified
544 | - The value to use. String values should be enclosed in quotes like the example.
545 | ```
546 |
547 | #### 2.4.11 setEventName
548 | 设置下一个可测量操作的事件名称。重要的是，只有在生成要测量的活动的操作之前设置此权限，以便不会无意中测量其他页面活动。没有显式事件名称，每个步骤将自动命名为Step_1，Step_2等。
549 | 浏览器支持：IE
550 | ```bash
551 | usage: setEventName
552 | example: setEventName loadWebmail
553 |
554 | - Name to use for the event about to occur (in resulting log files)
555 | ```
556 |
557 | #### 2.4.12 setViewportSize
558 | 更改可见浏览器窗口的大小，以便页面视口匹配给定的尺寸。如果你的屏幕截图上有黑色区域，那么视口比桌面大。
559 | 浏览器支持：IE，Chrome，Firefox，Safari
560 | ```bash
561 | usage: setViewportSize
562 | example: setViewportSize 320 365
563 |
564 | - Viewport Width
565 | - Viewport Height
566 | ```
567 |
568 | #### 2.4.13 sleep
569 | 暂停脚本操作达到给定的秒数。
570 | 浏览器支持：IE，Chrome，Firefox，Safari
571 | ```bash
572 | usage: sleep
573 | example: sleep 5
574 |
575 | - An integer indicating how long to sleep. The allowable range is 1-30.
576 | ```
577 |
578 | ## 三、示例脚本
579 | ### 1. Mail test
580 | ```bash
581 | // load the account name and password
582 | loadVariables accounts.txt
583 |
584 | // bring up the login screen
585 | setEventName launch
586 | setDOMElement name=loginId
587 | navigate http://webmail.aol.com
588 |
589 | // ignore any errors from here on (in case the mailbox is empty or we get image challenged)
590 | ignoreErrors 1
591 |
592 | // log in
593 | setValue name=loginId %AOLSN%
594 | setValue name=password %AOLPW%
595 | setDOMElement className=turbogrid-row
596 | setEventName load
597 | submitForm name=AOLLoginForm
598 |
599 | // only read and send a mail once an hour
600 | minInterval AOLMail 60
601 |
602 | // close the today curtain
603 | click className=backdrop
604 | sleep 5
605 |
606 | // Open the first message with a subject of "test"
607 | setDOMElement className=msgBody
608 | setEventName read
609 | clickAndWait innerText=test
610 |
611 | // delete the message
612 | click title=Delete (del)
613 | sleep 5
614 |
615 | // open the compose mail form
616 | setDOMElement contentEditable=true
617 | setEventName compose
618 | clickAndWait title=Write mail (Alt + w)
619 |
620 | // send a test message to myself
621 | sleep 1
622 | setValue tabindex=100 %AOLSN%
623 | setValue name=Subject test
624 | loadFile msg.txt %MSG%
625 | setInnerText contentEditable=true %MSG%
626 | fileDialog type=file msg.gif
627 | sleep 1
628 | setDOMElement className=confirmMessage
629 | setEventName send
630 | clickAndWait innerText=Send
631 |
632 | endInterval
633 |
634 | // sign off
635 | setEventName logout
636 | clickAndWait className=signOutLink
637 | ```
638 |
639 | ### 2. MyAOL Authenticated profile
640 | ```bash
641 | // load the account name and password
642 | loadVariables accounts.txt
643 |
644 | // bring up the login screen
645 | setDOMElement name=loginId
646 | navigate https://my.screenname.aol.com/_cqr/login/login.psp?mcState=initialized&sitedomain=my.aol.com&authLev=0&siteState=OrigUrl%3Dhttp%3A%2F%2Fmy.aol.com%2F
647 |
648 | // log in
649 | setValue name=loginId %AOLSN%
650 | setValue name=password %AOLPW%
651 | setDOMElement className=more_pics
652 | submitForm name=AOLLoginForm
653 | ```
654 |
655 | ### 3. DNS Override
656 | 此脚本步骤如下：
657 | + 为`www1.aol.com`创建一个假的DNS条目，并让它查找`www.aol.com`
658 | + 强制`www.aol.com`解析为`127.0.0.1`
659 | + 在`www.aol.com`域中设置“zip”cookie
660 | + 跳转并测量加载`www.aol.com`的时间
661 | ```bash
662 | setDnsName www1.aol.com www.aol.com
663 | setDns www.aol.com 127.0.0.1
664 | setCookie http://www.aol.com zip=20166
665 | navigate http://www.aol.com
666 | ```
667 |
668 | ### 4. iPhone Spoofing
669 | 此脚本步骤如下：
670 | + 使用iPhone用户代理字符串
671 | + 更改浏览器尺寸以匹配iPhone
672 | + 跳转到`www.aol.com`
673 | ```bash
674 | setUserAgent Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25
675 | setViewportSize 320 356
676 | navigate http://www.aol.com
677 | ```
--------------------------------------------------------------------------------
/assets/img/other/down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/other/down.png
--------------------------------------------------------------------------------
/assets/img/other/latency.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/other/latency.png
--------------------------------------------------------------------------------
/assets/img/other/net.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/other/net.png
--------------------------------------------------------------------------------
/assets/img/other/up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/other/up.png
--------------------------------------------------------------------------------
/assets/img/private/ec2config.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/private/ec2config.png
--------------------------------------------------------------------------------
/assets/img/private/locations.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/private/locations.png
--------------------------------------------------------------------------------
/assets/img/qrcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/qrcode.png
--------------------------------------------------------------------------------
/assets/img/system/WebPagetest_Mobile_Network.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/system/WebPagetest_Mobile_Network.png
--------------------------------------------------------------------------------
/assets/img/system/overview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/system/overview.png
--------------------------------------------------------------------------------
/assets/img/system/replay1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/system/replay1.png
--------------------------------------------------------------------------------
/assets/img/system/replay2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/system/replay2.png
--------------------------------------------------------------------------------
/assets/img/system/replay3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/system/replay3.png
--------------------------------------------------------------------------------
/assets/img/using/guide/WebPagetest_example.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/guide/WebPagetest_example.jpeg
--------------------------------------------------------------------------------
/assets/img/using/guide/browser.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/guide/browser.png
--------------------------------------------------------------------------------
/assets/img/using/guide/change.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/guide/change.png
--------------------------------------------------------------------------------
/assets/img/using/guide/dom.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/guide/dom.jpg
--------------------------------------------------------------------------------
/assets/img/using/guide/grades.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/guide/grades.png
--------------------------------------------------------------------------------
/assets/img/using/guide/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/guide/map.png
--------------------------------------------------------------------------------
/assets/img/using/guide/start.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/guide/start.png
--------------------------------------------------------------------------------
/assets/img/using/guide/url.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/guide/url.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/chart-index-a-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/chart-index-a-small.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/chart-index-b-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/chart-index-b-small.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/chart-line-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/chart-line-small.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/chart-progress-a-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/chart-progress-a-small.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/chart-progress-b-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/chart-progress-b-small.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/compare_progress.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/compare_progress.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/compare_trimmed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/compare_trimmed.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/distribution.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/distribution.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/performance.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/performance.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/si-cable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/si-cable.png
--------------------------------------------------------------------------------
/assets/img/using/metrics/speedindexformula.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pwstrick/WebPagetest-Docs/626bf88522bc828ed2a156a0c92c4d1b1c74be75/assets/img/using/metrics/speedindexformula.png
--------------------------------------------------------------------------------
/demo.md:
--------------------------------------------------------------------------------
1 | # 快速开始
2 | > At its core, WebPagetest is used for measuring and analyzing the performance of web pages. There are a lot of options that may seem intimidating at first but doing quick testing is pretty simple. This guide will walk you through submitting a test and interpreting the results.
3 |
4 | ```javascript
5 | common.const = {
6 | COOKIE_APP_NAME: 'chelun_appName', //车轮APP名称，比如 查违章，车轮社区
7 | COOKIE_APP_VERSION: 'chelun_appVersion', //APP版本号
8 | COOKIE_APP_TOKEN: 'chelun_acToken', //车轮统一登录态，去服务端校验
9 | COOKIE_DEVICE: 'chelun_device', //机型，主要针对安卓，读取系统设备信息来做兼容性判断和数据统计
10 | COOKIE_OS_TYPE: 'chelun_osType', //操作系统 ios android
11 | COOKIE_OS_VERSION: 'chelun_osVersion', //IOS版本号 安卓版本号
12 | COOKIE_IS_LOGIN: 'chelun_isLogin', //是否登录
13 | };
14 | ```
15 |
16 | ```php
17 |