基于webpagetest的前端性能测试

1前端性能测试--WebPageTest1前言1.1简介WebPagetest是google在”makethewebfaster”项目中主要开发和支持的一个开源项目，为全球范围内致力于性能提升的公司和个人提供测试支撑，Google定期更新、维护在线版本（）。如果想搭建独立的内网测试环境，欢迎下载源码=12(以上为个人对官网英文简介的翻译#_#出处原文)WebPagetest服务器部署情况：目前国内为上海、香港。如图I图I1.2原理WebPageTest为server+agent模式。具体工作原理如图II。图II22结果报告原文地址：总体评分报告顶部就是对最基本的性能点进行评分，评分低于B级别的需要特别注意。如图III所示为进行的性能测试结果评分（该次测试为内网环境测试）详细报告查看地址：图III2.1.1Keep-aliveEnabled所有链接都需要为keep-alive。在http早期，每个http请求都要求打开一个tcpsocket连接，并且使用一次之后就断开这个tcp连接。使用keep-alive可以改善这种状态，即在一次TCP连接中可以持续发送多份数据而不会断开连接。通过使用keep-alive机制，可以减少tcp连接建立次数，也意味着可以减少TIME_WAIT状态连接，以此提高性能和提高httpd服务器的吞吐率(更少的tcp连接意味着更少的系统内核调用,socket的accept()和close()调用)。2.1.2CompressTransfer请求头信息设置：Accept-Encoding:gzip,deflate,sdch。告知服务器客户端可以接收压缩格式文件。对拉取资源中的除了图片、视频类文件之外的text文件（html、css、js）进行压缩，可以有效的减少传输量，并最快的对用户进行展示和响应，提高用户体验。2.1.3CompressImages检查资源中图片类型文件不能太大。现标准为不能大于60k。WPT校验标准：Weuseastandardofcompressingtheimagesataqualitylevelof50inPhotoshop'sSaveforWebmodebutgenerallyyoushouldcompressthemasmuchasyoucanbeforetheystarttolookbad。2.1.4CacheStaticContent1、设置静态资源缓存，如css、js文件。2、缓存时间控制，且css、js文件名称后拼接版本号，已更新版本时用户端可以拉取到最新资源。2.1.5CombineJS/CSSFiles在head标签加载完成之前，尽量减少js、css文件的加载，以防止阻塞信息展示给用户。2.1.6UseofCDNContentDistributionNetwork(CDN)服务器遍布全球，当用户请求资源时可以就近拉取资源，提高性能。目前公司的js、css、图片等静态资源已经迁移至cdn服务器。2.2详细结果2.2.1FirstView清空浏览器所有的缓存信息后，首次访问结果。资源均为server端拉取。2.2.2RepeatView首次访问后，重新打开浏览器后访问url的结果，部分资源为本地缓存（运行测试时，可以看到浏览器被打开2次）。如图IV所示，为首次访问与重复访问的性能数据。3图IV2.2.3DocumentComplete这个时间截止到HTML的DOM流加载完成，但是不包括js操作及其触发的操作时间。2.2.4FullyLoaded从DOM流加载完成到2S内没有任何网络传输动作。2.2.5LoadTime等同于DocumentComplete2.2.6FirstByte从用户操作页面到传输反馈给客户端时间。别称：back-endtime2.2.7StartRender页面开始展示内容的时间（白屏时间）。2.2.8DOMElementsHtml中的DOM控件个数2.2.9Requests请求个数2.2.10BytesIn下载流大小。3环境选择3.1内、外网测试3.1.1外网测试地址：（公司翻墙代理：）内网环境搭建采用的apache+php，地址为内网环境agent配置3.2.1Agent端需要配置对应的浏览器与server进行连接。将WebPageTestAgent文件夹放到c盘目录下，修改wptdriver.ini文件中浏览器可执行文件地址即可。WebPageTestAgent.zip3.2.2安装网络限速安装dummynet工具，进行网络限速处理。将dummynet文件夹下的对应文件的赋值到dummynet文件夹根目录下。网络-属性-安装-服务-添加-从磁盘安装-选择WebPagetTestAgent目录下的dummynet下netipfw.inf文件。安装完成后效果如图V4图V3.3内外网性能测试结果对比内、外网测试数据需结合、对比使用。外网路由时间会远高于内网，但是内网机器性能会远低于外网。需要根据情况进行环境的调整，比如提高内网环境性能等方法（待进一步调研）。重点检查可优化点，进而进行优化前后的横向对比。以下为对进行的内、外网测试结果，仅供参考。内网：外网（本地WPT）：外网（上海WPT）：性能测试4.1连接agent运行C:\WebPageTestAgent下的wptdriver.exe，待wptdriver.exe为waitingfortest状态后即可进行测试，如图VI所示（启动时wptdriver会关闭所有浏览器，并清除缓存）。图VI4.2启动dummynet管理员身份执行ipfw.cmd，如图VII所示5图VII4.3Starttest4.3.1Agent连接后，就可以具体的url进行测试了。如图VIII所示，选择相应的浏览器，网络带宽以及其他一些选项。图VIII64.3.2Connection选择网络状态4.3.3Numberofteststorun运行N次取平均值4.3.4Repeatview是否进行repeat操作(在有缓存情况下测试)4.3.5Chrome标签选择EmulateMobileBrowser(Experimental,Chrome39+),模拟手机端操作4.3.6Script标签中执行WPT脚本(设置userAgent、添加cookie等操作)navigate://w.58.com/yp/indexoauth_userinfo=09ce2b9954543190dd8aec4b99d386eb47b8781033d824d7b66f45964.4查看结果运行完成后，浏览器会被关闭，重新打开后，访问，在TESTHISTORY标签中有测试结果历史，如图VIIII所示。图VIIII