【性能优化】性能测量工具-WebPageTest

前端 0 492

前语

工欲善其事，必先利其器。了解完功用方针之后，功用优化的方针现已清楚了。接下来咱们凭仗一些功用丈量东西，清楚网页间隔优化方针之前还有多html文件怎样翻开大的间隔。一个好的东西能够让你事半功倍，接下来我枸杞将用3篇文章分别介绍3个干javascript和java的差异流的丈量东西：html标签属性大全

  1. Chromejavascript九九乘法表 DevTools 首要javascript虚拟机linux怎样读用于日常开发进程中的调试、功用评测。
  2. Lighthouse 用来生成网页软件技术的功用评测陈说。
  3. WebPageTest 用来进行整体的网站质量点评、一站式功用点评。

有了这3个东西咱们就能够从多javascript九九乘法表个维度对网站功用进行html全宫颈癌疫苗方位的点评。

功用丈量东西-WebPageTest

WebPagetest的中心是用于丈量html是什么意思和分析网页的功用。它是 google 开源项目**《make the web fastejavascript高档程序设计r 》**的子项目，它本来是 AO软件工程L 内部运软件技术专业用的东西html5，后来在2008年依据BSD开源软件技术。其官方网址如下：www.狗狗币webpagetest软件工程.o龚俊rg/

原理：WebPajavascript怎样读geTest是一个PHP网站，宫颈癌用户输入网址、地址、自定义脚本等信息后，宫颈癌疫苗参数发送到后台。后台做些逻辑处理，再经过浏览器相关的署html网页制造理程序，建议Chrome、Firhtml简略网页代码efox或IE。浏览器实施完后虚拟机设备教程win10将数据传回给后台，后台再将数据保存起来，究竟经过宫颈癌疫苗各种形式（图、表格、列等），将分析数据过虚拟机下载手机版的数据，出现给用户。

导航栏

首要翻开WebPageTest 官网，能够看到如下界面：

【功用优化】功用丈量东西-WebPageTest

  1. Test History：能查看到查验历史记录。
  2. API：webgetest API Key 容许开发人员在其作业流中自动实施功用查验宫颈癌，以不断供给更快的网页。WebPageTest 支撑的扩展开发，只需申请到一个key后，就能够依据供给的API做开宫崎骏发。不过调用次数都会有捆绑，所以假定要做仍是在自己本地或内网安虚拟机linux置一个WebPag软件工程eTest的环境。
  3. Forums：论坛信息，里边有许html代码多发问和答复，覆盖面非常广。公积金贷款
  4. Docs：英文版东西文档，中文文档能够参照这个网址 github.com/pwstrick/javascript:void(0)We…
  5. Blog：博客，里边是一些 WebpageTest 的一些最佳实践计划等
  6. Abhtml个人网页无缺代码out：给出了WebPageTest的Github地址，以及发布版的下载地址等信javascript面试题息。

根柢运用

根底装备

  1. 输入网页网址：供认要查验的页面后，转到WebPagetest并为其指定虚拟机安卓要查验的页面的URL，这个地址可所以主页虚拟机设备也可所以概略页软件应用。
  2. 挑选地舆方位：WebPagehtml标签t虚拟机est具有位于世界各地的软件开发查验机器，你应该从靠近用户拜访的方位进行查验，从列表中挑选一个方位，或者单击Select from Map按钮，从地图google视图中挑选一个方位（只需单击气球，然后供认）
  3. 挑选浏览器：不同的方位支撑不同的浏览器，假定给定的方宫颈癌疫苗位没有正在寻觅的浏览器，软件技术专业能够查验不同的方位。一般建议运用chrome浏览器软件工程专业。

【功用优化】功用丈量东西-WebPageTest

高虚拟机安卓级装备

  1. 作业查javascript什么意思验次数：为确保查验作用的准确性，每次作业都会查验虚拟机型安卓javascript高档程序设计下载多次
  2. 是否重复拜访软件商店下载：因为重复拜访会优先走缓存，宫颈癌疫苗所以作用或许会有不同
  3. 提交查验：悉数装备结束后，点击Start虚拟机下载手机版 Test按钮，央求将发送到查验方位进行查验。查javascript是干什么的验或许需求软件商铺下载一段时刻才调作业，具体取决于有多少次查验（在查验之前至少有一软件检验分钟的检JavaScript验时刻，但是它的时刻甚至更长）。一旦查验html5结束，你将得到作用。

【功用优化】功用丈量东西-WebPageTest

本地安排

官网中只能查验现已JavaScript发布的网站地址，但是往往开发进程中咱们需求本地查验，公积金所以就需求将WebPageGotest安排到本地。具体进程如下：

  1. 下载并设备docker镜像，下载地址 doGocs.dockegoogler.com/get-docker/

    下载和设备就按照操作一步步做就好，这儿就不具体介绍了。需求解释的是为什么设备docker镜像，docker类似于一个虚拟机，在虚拟机上下载WebPageTest的虚拟机装置镜像，咱们便是不需求独立设备WebPageTest这个软件了，这样能够不受体系捆绑，彻底JavaScript独立出一套虚拟的环境，经过端宫颈癌疫工商银行苗口映射到本地服务。

  2. 拉取镜像，作业server实例和agent实例，操作如下

    # 拉取镜像
docker pull webpagetest
docker pull webpagetest/agent

# 作业se软件技术rver实例
docker run -javascript九九乘法表d -p 4000:8公积金0 webpa软件技术gete公积金贷款st/s虚拟机设备教程erver

# 作业agent实例
docker run -d -p 4000:80 --network软件商铺="host" -e "SERVER_Ujavascript菜鸟教程RL=http://localhost:4000/work/" -e "LOCATION=Thtml简略网页代码est" webpagetest/agent

  3. 拜访http://localhost:4000，会看到 WebGoPagetest 官网相同的页面，在这个页面中输入本地其它端口的网址，虚拟机下载手机版咱们就能够查验本虚拟机装置地服务的功用了。

作用公积金剖软件工程析

1. 优化等级

在软件作用页面的顶部是一组最要害的功用优化等级。涵盖了适用于悉数软虚拟机装置教程win10件检验网站的根柢优化，任何不是A或B的都需求进行进一步龚俊的优化.

![image-20210504164729533](/Users/liyang/Library/Applicat枸杞ion Support/typora-javascript怎样读userHTML-images/imagehtml文件怎样翻开-20210504164729533软件应用.pnjavascript:void(0)g)

字母等级 占比
A 90%+
B 80% ~ 89%
C 70% ~ 79%
D 60% ~ 69%
F 0% ~ 5软件工程专业9%

2虚拟机设备教程. 功用方针总结

【功用优化】功用丈量东西-WebPageTest

作用页顶部javascript和java的差异的数据表供给了有关已加载页面的一些高档信息，其间初度和重复javascript高档程序设计拜访视图的方针都有清楚的看到初度和重复视图拜访的作用。

初度软件库视图(First View)：初度视图的查验，将会把浏览器的缓存和Cogoogleokie铲除，标明拜访者第一次拜访该网页将体验到的状况。

重复视图(Repeat View)：重复视图会在初度视图查验后立即实施，不会铲除任何内容。浏览器窗口在First View查验后关闭，然后建议新浏览器以实施Repeat View查验。重复视图查验仿照的是用户脱离页面后，马上再进入此软件库页面的场景。

除此之外，这儿介绍几个要害方针：

  1. 首字节时刻（html文件怎样翻开Timejavascript To First Byte）：首字节时刻（一般缩写为TTFB）指的是被丈量软件工程为从初始化央求，到服务器照料的第一个字节，被浏览器接纳html网页制造的时刻（不包括软件商店下载DNS查JavaScript询、TCP联接的时刻html个人网页无缺代码）。
  2. 页面烘托时刻(Start Render）：丈量的时刻是从初始化央求，到第javascript九九乘法表一个内容被制造到浏览器闪现的时刻虚拟机体系。googleStart Render是经过捕获页面加载的视频，并在浏览器第一Go次闪现除空白页之外的其他内容时查看每个帧来衡量的。它只能在实验室测html代码量，一般是最准确的丈量。
  3. 速度指数（Speed Index）：速度指数是一个核算的方针，用来衡量页面烘托用户可见内容的活络程度（越低越好）。软件库关于核算办法的更多信息，请点击此处查看。
  4. 堵塞交互时刻（Total Blocking Time）：是指页面公积金堵塞，用户不能进行交互的累计时刻，这儿软件技术能够看公积金告贷javascript九九乘法表到二次拜访时资源缓存减少了阻软件商铺下载塞时刻。
  5. 文档加载结束(Document Complete)：从初始化央求，到加载悉数静态内容（图片、CSS、JavaScript等），但或许不包括由JavaScript实施触发虚拟机体系的内容，能够了解为初步实施window.onload。
  6. 页面悉数元素加载时虚拟机装置教程win10间(Fully Loade虚拟机装置教程d)：指的是从初公积金告贷始化央求，到Document Complete后，2秒内（中心几百毫秒轮询）没有网络活动虚拟机虚拟机linux安卓的时刻，但这2秒是不包括在丈量中的，所以会出现两个差值大于或小于2秒。

首字节加载时虚拟机装置教程win10间和首字节时刻javascript面试题的差异

首字节加载时刻（First Byte Time）：是指浏览器收到HTML内容的第一个字节时刻，包括DNS查找、TCP联接软件库软件技术专业、S软件工程专业SL洽谈（假javascript:void(0)定虚拟机对电脑危害大吗是HTTPSjavascript怎样读央求）和TTFB。

首字节时刻 TTFB（Time To First By软件测试te）：首字节是指被丈量为从初始化央求，到服务器照料html的第虚拟机体系一个字节，被浏览器接纳的时刻（不包括DNS查询、TCP联接的虚拟机对电脑伤害大吗时刻）。我了解TTFB的核算是从下图中requestStjavascript怎样读art到re软件应用spjavascript:void(0)onseSt虚拟机型安卓下载art这之间的时刻，也便是央求发送出去的时刻。

【功用优化】功用丈量东西-WebPageTest

所以，首字节加html载时刻 = DNS查找时j软件技术avascript和java的差异间+TCP联接时刻+SSL洽谈时刻+TTFB央求发送出去的时刻

3. waterfall chart 央求瀑布图

【功用优化】功用丈量东西-WebPageTest

在作用页的下方咱们能够看到每次作业闪现的瀑布图javascript九九乘法表，点击进去能够看到具体的参数概javascript和java的差异略，如下图所示

【功用优化】功用丈量东西-WebPageTest

在这张图上咱们能够看到全虚拟机虚拟机是什么意思对电脑危害大吗部的央求资源都列举了出来，里边的信息比 Chrome DevTools给出的信息愈加具体，例如下方的几个方针：

  1. Browser Main Thread：浏览器主线程占用状况，什么时刻比较忙
  2. Long Tasks：长使命时刻，也便是页面的科技可交互时刻，赤色区域代表堵塞时刻
  3. Ba宫颈癌疫苗ndwidth In：带宽
  4. CPU Utization：CPU占用状况

除此之外，在下图中我公积金告贷们还能够看到一些优化的ja虚拟机体系vascript九九乘法表点，比方42-50这些并行央求的图片资源减少了资源加载时刻，宫颈癌还有5虚拟机7-58黄色高亮部分资源发生了重定向，WebpageTest 提示咱们这儿资源发生了改动，可宫颈癌以软件工程专业优化为不进行资源重定向。

【功用优化】功用丈量东西-WebPageTest

总结

  1. Webhtml标签特色大全pageTest的运用办法：拜访官网查验、设备本地镜像查验虚拟机型安卓下载
  2. WebpageTest的要害方针：首字节时刻（First Byte）、页面烘托时刻(Start Render）、速html代码度指数（Speed Index）、堵塞交互时刻（Total Blockinghtml文件怎样翻开宫颈癌疫苗 Time）、文档加载结束(Document Comjavascript高档程序设计plete)、页面悉数元素加载时刻(Fully Loaded)
  3. 首字节加载时刻 = DNS查找时刻 + TCP联接javascript怎样读时刻javascript软件测试高档程序设计 + SSL洽谈时刻虚拟机设备教程 + TTFB央求发送出去的时刻

参考资料

  1. Web功用优化东虚拟机西WebPageTeHTMLst（一）——总览与装备
  2. Web功用优化东西Web公积金贷款PageTest（二）——功用数据
  3. Web功用优化东西WebPageTest（三）——本地安排(Windows 7版别)

究竟javascript

文中如有过失，欢迎在议论区纠正，假定这篇文章帮忙到了你，欢html标签迎点javascript菜鸟教程赞和重视。

阅览更多优质文章、能够注javascript面试题重我的微信群众号【阳姐讲前端】，每天推送高质量文章，咱们javascript:void(0)一起沟通生长。

上一篇 Redis-发布订阅
下一篇 深入浅出git-log之代码统计实战

相关文章