前言欲善其事，必先利其器。了解了性能指标后，性能优化的目标就已经明确了。接下来，我们使用一些性能测量工具来明确网页离优化目标还有多远。一个好的工具可以让你事半功倍。接下来我会用3篇文章介绍3款主流的测量工具：ChromeDevToolsPerformance主要用于日常开发中分析运行时性能。Lighthouse用于生成网页的性能评估报告。WebPageTest用于网站整体质量评估和一站式性能评估。有了这三个工具，我们就可以从多个维度对网站性能进行综合评估。性能测量工具——WebPageTestWebPagetest的核心是用来测量和分析网页的性能。它是google开源项目《make the web faster》的子项目，最初是AOL内部使用的工具，后来在2008年基于BSD开源。官网：http://www.webpagetest.org/原理WebPageTest是一个PHP网站。用户输入URL、位置、自定义脚本等信息后，将参数发送到后台。在后台做一些逻辑处理，然后通过浏览器相关的代理程序启动Chrome、Firefox或IE。浏览器执行后，将数据传回后台，后台保存数据，最后将分析后的数据通过各种形式（图形、表格、列等）呈现给用户。导航栏首先打开WebPageTest官网，可以看到如下界面：TestHistory：可以查看测试历史。API：webgetestAPIKey允许开发人员在他们的工作流程中自动化性能测试，以始终如一地提供更快的网页。WebPageTest支持的扩展开发，申请key后可以根据提供的API进行开发。但是调用的次数会受到限制，所以如果要做的话，应该在本地或者内网布置一个WebPageTest环境。Forums：论坛信息，里面有很多问答，涉及面很广。Docs：英文工具文档，中文文档可以参考本站https://github.com/pwstrick/WebPagetest-DocsBlog：博客，里面有一些WebpageTest的最佳实践等。About：给出了WebPageTest的Github地址，如以及发布版本的下载地址等信息。Basicuseofthebasicconfiguration输入网页的URL：确定要测试的页面后，进入WebPagetest，指定要测试的页面的URL。这个地址可以是首页，也可以是详情页。选择地理位置：WebPagetest的测试机遍布全球，您应该在靠近用户访问地点的位置进行测试，从列表中选择一个位置，或者单击“从地图中选择”按钮并从地图中选择一个位置查看（点击气球🎈，然后确定）选择浏览器：不同的位置支持不同的浏览器，如果给定的位置没有你要找的浏览器，你可以尝试不同的位置。一般推荐使用chrome浏览器。AdvancedConfigurationRunTestTimes：为了保证测试结果的准确性，每次运行都会测试重复访问是否重复多次：因为重复访问会先去缓存，结果可能不同提交测试：毕竟配置完成后，点击开始测试按钮，请求将发送到测试位置进行测试。测试可能需要一段时间才能运行，具体取决于有多少测试（测试前至少有一分钟的测试时间，但甚至更长）。测试完成后，您将获得结果。本地部署官网只能测试一些外网可以访问的网站，但是我们在开发过程中经常会在公司内部局域网发布一些项目，所以需要在本地部署WebPagetest，使用本地网络环境进行测试表现。注意：这里说的本地部署是指部署在局域网服务器上的网站，不是本地电脑的locallhost，因为在本地测试locallhost往往是不准确的，因为大多数情况下，本地开发的页面和调试是webpackdevserver服务器，资源没有压缩，所以加载速度会很慢，往往和线上环境的结果相差很大。具体步骤如下：1、下载并安装docker镜像，下载地址为https://docs.docker.com/get-docker/为什么要安装docker镜像？Docker类似于一个虚拟机，在虚拟机上下载WebPageTest的镜像，我们即不需要单独安装WebPageTest这个软件。这样一个虚拟环境就可以完全独立，不受系统限制，并且可以通过端口映射到本地服务。2、拉取镜像dockerpullwebpagetestdockerpullwebpagetest/agent3。运行服务器实例dockerrun-d-p4000:80webpagetest/server4。运行代理实例dockerrun-d-p4000:80--network="host"-e"SERVER_URL=http://localhost:4000/work/"-e"LOCATION=Test"webpagetest/agent5。访问http://localhost:4000，你会看到和WebPagetest官网一样的页面，在这个页面输入本地其他端口的URL，我们就可以测试服务的本地性能了。结果分析1.优化级别在结果页面的顶部是一组最关键的性能优化级别。涵盖适用于所有站点的基本优化，任何不是A或B的都需要进一步优化。2.性能指标摘要结果页面顶部的数据表提供了有关加载页面的一些高级信息，首次访问和重复访问查看指标对于首次访问和重复查看访问都清晰可见。FirstView（第一视图）：FirstView测试会清除浏览器的缓存和cookies，表明访问者第一次访问网页时会有什么体验。重复视图：在第一次视图测试后立即执行重复视图而不清除任何内容。FirstView测试后关闭浏览器窗口，并启动新浏览器以执行RepeatView测试。重复查看测试模拟用户离开页面后立即进入页面的场景。此外，这里还有几个关键指标：TimeToFirstByte（首字节时间）：TimeToFirstByte（通常缩写为TTFB）是指从初始请求到服务器响应的第一个字节。Byte，浏览器收到的时间（不包括DNS查询，TCP连接时间）。页面渲染时间（StartRender）：测量的时间是从初始请求到第一个内容被绘制到浏览器显示的时间。StartRender是通过捕获页面加载的视频并在浏览器首次显示空白页面以外的内容时查看每一帧来衡量的。它只能在实验室中测量，通常是最准确的测量。SpeedIndex：SpeedIndex是一个计算指标，用于衡量页面呈现用户可见内容的速度（越低越好）。有关计算方法的更多信息，请单击此处。总阻塞时间（TotalBlockingTime）：指页面被阻塞，用户无法交互的累计时间。这里可以看到资源缓存减少了第二次访问时的阻塞时间。文档完成：从初始化请求到加载所有静态内容（图片、CSS、JavaScript等），但可能不包括JavaScript执行触发的内容，可以理解为开始执行window.onload。页面所有元素加载时间（FullyLoaded）：指从初始化请求到DocumentComplete2秒内没有网络活动的时间（中间几百毫秒的poll），但是这2秒是不包括在测量中，所以会有大于或小于2秒的两个差异。首字节加载时间和首字节时间的区别首字节加载时间（FirstByteTime）：是指浏览器接收到HTML内容首字节的时间，包括DNS查找、TCP连接、SSL协商（如果是HTTPS请求）和TTFB。TTFB（TimeToFirstByte）：首字节是指从初始化请求到浏览器收到服务器响应的第一个字节的时间（不包括DNS查询和TCP连接的时间）。我理解TTFB的计算就是下图中从requestStart到responseStart的时间，也就是发送请求的时间。因此，第一个字节加载时间=DNS查找时间+TCP连接时间+SSL协商时间+TTFB请求发送时间3.瀑布图请求瀑布图在结果页面的底部，我们可以看到每个操作显示的瀑布图。点击查看具体的参数详情，如下图所示：这张图中我们可以看到列出了所有请求的资源，里面的信息比ChromeDevTools给的更详细，比如下面的Indicators:BrowserMainThread：浏览器主线程使用情况，什么时候忙LongTasks：长任务时间，即页面的技术交互时间，红色区域代表阻塞时间BandwidthIn：带宽CPUUtization：CPU使用异常情况In另外，在下图中，我们还可以看到一些优化点，比如42-50，并行请求的图片资源减少资源加载时间，57-58黄色高亮资源被重定向，WebpageTest提示我们这里的资源有更改并可以优化为不执行资源重定向。WebpageTest的使用总结：访问官网测试，安装本地镜像测试WebpageTest的关键指标：首字节时间（FirstByte）、页面渲染时间（StartRender）、速度指数（SpeedIndex）、阻塞交互时间（TotalBlockingTime），文档加载完成（DocumentComplete），页面所有元素加载完成（FullyLoaded）第一个字节加载时间=DNS查找时间+TCP连接时间+SSL协商时间+TTFB请求发送时间
