WebPageTest

确定自己需要的数据

作用：验证如何让网页变的更快的方法，而不适合研究实际生活中页面的用户体验

1 .首先确定自己想要的理想数据和webPageTest提供的测试指标是否匹配。
2 .找到衡量网页速度的标准是什么？
3 .一些特殊的情况：针对不同的网站来说，我们可能需要不同的性能数据，而且有的事件并不会触发相应的事件，就像载入事件并不会等待图片完全显示才会触发一样，这种事件需要定时记录，而且辅助图片的加载也是不太需要在意的事情。在一些视频网站的浏览中，用户等待视频播放，但是dom事件并没有为这种视频播放的特殊场景设计事件，继而产生相应的报告。
4 .首次视图
5 .重复视图
6 .配置多次测试数据，可以避免网络波动，服务器波动，页面异常状况的影响。多次运行，取平均值。
7 .瀑布图分析：将网络活动分解为单独的http请求
8 .重定向：单服务器尝试重写一个页面的url地址的时候，通常是不同的子域名或者协议，这又会导致另一个重写，依次类推，知道能够加载实际的资源为止。
9 .缓存：当再次浏览页面时，浏览器告诉缓存了页面的部分内容，一些资源已经被下载到了本地，但并不会包含这些内容是否在有效期限的信息，对于这些信息，浏览器必须访问服务器，来确认这些内容是否过期。服务器会使用响应代码304来通知浏览器，这些内容被放在了缓存里面，从缓存中读取资源要比从服务器端读取资源高效的多，但是304并不是必须的，实际上，服务器在第一次发送资源到浏览器的时候，就应该包含所有缓存生命周期的相关信息。

反模式：一些性能问题在瀑布图中呈现出明显的特征，我们叫他反模式

首字节时间过长

1 .dns解析：受到长期证书链或者高延迟的域名服务器的影响。
2 .初始化请求的连接过程：服务端抵消的配置，拥塞的窗口。
3 .安全协商的过程需要服务端和客户端多次进行通信来保证连接安全。
4 .在服务端需要一些其他的性能诊断工具

连接复用

1 .每一行都代表一个连接，一般会看到和主要内容相关的了解复用与多个请求，这就是服务器关闭了连接复用的典型

无效的请求

1 .预解析器会对预加载的资源产生一些无效的假设，会尝试加载无效的请求资源，并且当这些资源被加载之后，他们可能经过几秒钟之后再次发送请求。

网络静默

1 .在某个阶段不请求任何内容
2 .对于已经完成的网页来说是没什么问题的，但是如果任然有需要加载的资源，那么还是越快越好
3 .在瀑布图中表示为长时间的请求暂停，或者有很大的缺口
4 .网络带宽的低使用率
5 .某阶段CPU的高使用率：

1.慢速js脚本，让脚本做太多的事情，比如遍历一个太大的表并对每个元素进行操作，在这个时候，可以在脚本运行后的某个事件setTimeout让进城延迟处理脚本任务，把进城的权利交给浏览器，
2.复杂的页面结构也需要进行长时间的进行处理

6 .在静默阶段，一个网络流量分析工具辅助检查是必不可少的

webPageTest评级

1 .评级标准A-F

其他功能：

1 .模拟缓存调优：启用重复视图：模拟本地缓存中保存第一次浏览之后可以被缓存的内容，而且版本是最新的

1对比测试

1 .用户的性能感知
2 .录制视频。在系统载入页面的时候产生一张快照，当快照创建完毕之后，可以像幻灯片一样的连续播放了。Capture Video ，在url添加这些参数，video=1,却保视频录制功能一直启动，continousVideo=1保证帧率是10fps,iq=100,修改jpeg快照图片的质量，pngs=1,将页面完全加载之后保存为一张PNG图片
3 .利用生成的图片制作幻灯片
4 .

中级用例

用户仿真

1 .配置移动设备，连接速度，测试位置
2 .用户验证

用户行为分析---（页面监控实现的数据）

1 .收集页面的数据。
2 .收集用户的数据,浏览器类型，操作系统，用户大致的地理位置，根据收集的数据爱判断不同地点的用户的网页加载时间
3 .页面热度：所有页面受欢迎的程度，以及一个页面内的热门板块和点击此时。
4 .google Analytics工具可以做这个

移动测试

1 .浏览器向服务器发送请求首部中的User-agent属性来判断用户的设备类型。如果有必要的话，服务器可以返回专门针对移动设备精简过的代码
2 .流量配置：模拟移动测试代理连接速度，3G和高速。也可以根据需要选择自定义网络连接速度，设置上行速度和下行速度。
3 .原生设备的性能：尺寸和性能之间做平衡：手机CPU的性能，手机浏览器的缓存只有台式机的5%。

条件脚本

1 .流视图，模拟从一级页面到二级页面，有的资源不用缓存的情况。
2 .模拟登陆测速，设置cookie

单点故障测试

1 .造成单点故障的原因：外链的广告，社交媒体的小部件，常用的第三方资源（分析代码，jquery框架）
2 .解决方法：异步加载第三方资源。不管这些资源需要加载多久，即使一点都没有加载，页面内容和交互都会保持正常。
3 .单点测试第一步：检测第三方资源是否会拖垮你的网站。
4 .SPOF里面直接写黑洞网址。
5 .结果是以试图的方式展示的，我们可以很容易的就看出故障以后的影响。
6 .请求阻塞的情况：Block选项卡里面可以简单设置。

1.对于用户来说，故障并不意味着总是页面崩溃，也有可能是由于页面载入时间过长而让用户产生厌烦情绪，页面的载入时间超过用户预期就是一个很严重的故障。
2.测试方法：分别测试有这个资源和没有这个资源的速度，相减的时间差异就是这个资源对页面性能的影响。
3.比如互联网广告

高级用例

1 .使用应用程序接口，并使用它们运行和获取测试结果。

持续集成

1 .在软件工程中，持续集成是一种软件开发时间，团队开发成员进场集成他们的工作，通常每个成员至少每天一次，每次集成都是自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早的发现集成错误
2 .webPageTest 这个node程序，运行的时候需要一个key-申请的时候国内网是翻不过去的,类似的还有lighthouse
3 .使用Jenkins集成，然后使用命令行工具来运行测试。
4 .公网的测试每天只能执行200个用例，所以我们需要做一个私有实例，然后在本地想怎么测就怎么测

测试结果详情

1 .URL：被测试页面的URL
2 .loadTime:加载页面的总时间，以毫秒为单位。计算时间为window.onload
3 .TTFB:首字节时间。
4 .bytesOut:浏览器发送的总字节大小
5 .bytesOutDoc:同上，但是字节数据记录仅限于页面载入完成事件触发之前
6 .bytesIn:浏览器为载入页面已下载的数据总字节大小。通常叫页面大小
7 .connections:已使用的连接数
8 .requests:被测试页面所有资源请求的详细列表
9 .requestsDoc:被测试页面载入完成事件之前资源请求的详细列表
10 .response_200:返回200的响应数
11 .result:测试结果。0:成功。
12 .render:屏幕上显示第一个像素点的时间
13 .fullyLoaded:页面完全加载所需时间，页面加载完成之后的2秒内没有任何网络活动
14 .cached:0表示首次视图，1代表重复视图模式
15 .domTime:dom元素现在页面之前的总时间
16 .score_gzip:给出的评分
17 .gzip_total:可被压缩的响应数据总大小
18 .gzip_savings:压缩后响应字节数的大小
19 .minify_total:静态文本资源可被压缩的总字节大小
20 .minify_saving:静态文本被压缩后的字节数大小
21 .image_total:图片的总字节数
22 .image_savings:图片被压缩后的字节数
23 .aft:首屏时间
24 .domElements:dom元素的总数
25 .pageSpeedVersion:性能分析中使用的页面速度指标
26 .title:页面标题
27 .titleTime:页面标题显示到浏览器上的时间
28 .loadEventStart：导航开始到页面的window.onload事件触发所需要的时间
29 .loadEventEnd:导航开始开始到页面的window.onload事件执行完毕所需时间
30 .documentContentLoadedEventStart:导航开始到页面domcontentloaded事件
31 .lastVisualChange:最后一次页面可见元素发生变化的时间
32 .server_count:服务器查找dns域名之后，返回ip地址的个数
33 .server_rtt:服务器往返通信预估时间
34 .base_page_cdn:基础页面cdn服务商
35 .firstPaint:RUM首次绘制的时间
36 .docCPUpct:页面内容完全加载前的CPU平均使用率
37 .fullLoadedCPUpcy:CPU忙碌时间
38 .visualComplete:页面加载完成时间
39 .effectiveBpsDoc:每秒字节数
40 .