如何用Firefox开发工具进行网页性可以分析

  • 时间:2018-07-10 23:22 作者:程序你好 来源:程序你好 阅读:474
  • 扫一扫,手机访问
摘要:在本文中,我们将详情Firefox Web开发工具(“DevTools”)——一组工具,旨在帮助开发人员检查、调试、配置和优化网站和Web应使用程序的性可以。我们将特别关注与性可以相关的工具,但是我们还将理解如何开始用DevTools,并理解少量有使用的配置。您能以不同的方式访问DevTools:单

在本文中,我们将详情Firefox Web开发工具(“DevTools”)——一组工具,旨在帮助开发人员检查、调试、配置和优化网站和Web应使用程序的性可以。我们将特别关注与性可以相关的工具,但是我们还将理解如何开始用DevTools,并理解少量有使用的配置。

您能以不同的方式访问DevTools:

单击导航工具栏右边的菜单,单击Web Developer,而后选择要用的子工具

用键盘组合,比方Shift+F5 (Windows和macOS)作为性可以工具,Ctrl+Shift+E (Windows)或者者Cmd+Option+E (macOS)作为网络工具

右键单击页面中的任意位置,选择检查元素。

DevTools 配置

Firefox DevTools具备许多选项,这些选项有助于开发人员定制其体验,例如在Web控制台启使用时间戳选项,或者禁使用HTTP缓存,该HTTP缓存使用于模拟在具备dev工具打开的所有页面中的第一负载性可以。

您能以不同的方式访问DevTools设置面板:

首先打开DevTools,而后:

单击工具栏中的设置按钮

按F1显示设置面板上的任何当前工具

按Ctrl+Shift+O (Windows和Linux), Cmd+Shift+O (macOS)显示设置面板。

如何用Firefox开发工具进行网页性可以分析

在这里你能选择你的默认工具按钮你想显示在工具箱,主题(dark-light-Firebug)和其余高级设置。

Performance-Focused Tools(性可以工具)

在分析web应使用程序的性可以时,需要区分加载时性可以和运行时性可以。

加载时间性可以答复了诸如“什么资源需要花费太多时间来加载?”“在解决运行时性可以时,我们需要关注JavaScript和CSS(特别是CSS动画),这样我们就可以够看到代码在哪里花费了大部分时间,以及什么导致了瓶颈。”

让我们看看网络监视器和性可以工具。

The Network Monitor(网络监视器)

如何用Firefox开发工具进行网页性可以分析

网络监视器向您显示了一个列表视图,其中包含了Firefox发出的所有网络请求(例如,当它加载页面时,或者者发送xmlhttprequest,获取API请求等等)。

它还能显示与请求相关的HTTP头、HTTP响应和cookie,并允许您搜索它们。您还能用它来执行、显示和保存当前页面负载的性可以分析。

简单地说,这个工具能使用来确定浏览器下载web页面的不同资产需要多长时间。

您还能用此工具监视和筛选那些正在减慢或者阻塞web页面快速加载的请求。当主事件被触发时,网络面板显示(DOMContentLoaded和load)。

Request Timeline

网络列表中的每个请求都有一个时间轴列,该列显示与请求相关的时间信息,比方加载资源所需的总时间。

DevTools标记报表中的主要生命周期事件,如DOMContentLoaded和page load。蓝色表示事件DOMContentLoaded被触发的时间;紫色线表示启动页面加载事件的时间。

如何用Firefox开发工具进行网页性可以分析

DOMContentLoaded Vs Load Events

当完全加载和解析HTML文档(不包括CSS样式表、图像和frame)时,DOMContentLoaded事件会被触发。

当HTML文档和所有相关样式表、图像和frames被完全加载时,事件负载就会触发。

Request Details Panel

一旦单击请求列表中的请求,即可以看到右停泊的details窗格,其中有许多不同的选项卡,如header、params、response、timings和security。

对于性可以,我们将特别关注时间信息。

Network Timings

在这个面板中,有许多与每个请求相关的时间指标:

如何用Firefox开发工具进行网页性可以分析

Blocked 是在队列中等待网络连接的时间。

Sending 是向服务器发送请求所需的时间。

Receiving 是从服务器接收响应所花费的时间,或者者(假如是缓存的)从缓存读取响应所花费的时间。

Waiting 是在接收到第一个字节之前,用户机等待的总时间。在其余性可以分析工具如WebPageTest.org或者Chrome的DevTools中,这被称为TTFB或者时间到第一个字节。

这里还有一个DNS resolution, 这是解析服务器的主机名和连接所需的时间,也是打开TCP连接所需的时间。

How To Analyze The Load Time Performance(如何分析Load时性可以)

网络监视器集成了一个性可以分析工具,能使用来分析web页面的加载时间性可以。

要开始分析加载时间性可以,您能:

单击底部状态栏中的Analyze图标

当您的网络监视器打开时,重新加载您的页面或者发出网络请求(实际上,这只是为了显示关于请求的表格信息,而不是做加载时性可以分析)。

如何用Firefox开发工具进行网页性可以分析

最后的报告显示了一个饼状图和相应的表格,使用于接收到的资源的类型:JavaScript、CSS、图像和字体等。

  • number of cached responses
  • total requests
  • size
  • transferred size
  • loading time
如何用Firefox开发工具进行网页性可以分析

First Load Performance

Firefox的DevTools允许您在两种不同的情况下分析web应使用程序的性可以:

没有缓存,当资源依然没有缓存时,它会模拟第一次访问。

用缓存,它模拟了第二次访问。浏览器已经缓存了应使用程序的资源,从而避免了许多往返服务器的过程。

您还能用Disable Cache设置来模拟在任何选项卡上打开DevTools时初次加载web页面的情况。

JavaScript Performance And Responsiveness(性可以和响应性)

JavaScript是单线程的,这意味着浏览器能同步运行代码,但是多亏了HTML5 Web Workers(使用于多线程JavaScript的标准API),您也能在其余线程中运行代码。

这个单线程负责运行浏览器正在执行的所有工作,如布局呈现、计算样式和收集垃圾。

还有少量方法,如setTimeout、诸如单击、加载和资源获取等事件,都是由单个线程执行的。(这些任务的确是异步执行的,但是JavaScript中的a- synchronity是不同的:它是通过用事件驱动的方法、事件循环和队列来模拟的。)

良好的性可以和响应可以力是由于JavaScript的异步模型机制,但是长时间运行的函数会导致性可以差和UI响应可以力差。

The Performance Tool(性可以工具)

性可以工具能让您理解web页面的UI响应(响应使用户交互)和JavaScript代码性可以,从而发现web页面的瓶颈和性可以问题。

用性可以工具,您能在一段时间内启动当前打开的web页面的性可以分析,您能用start和stop记录按钮进行控制。而后,该工具将向您显示浏览器呈现页面的操作的摘要、表格和图表视图。

您能查找并检测用性可以工具阻塞单个线程的长时间运行的代码片段。

怎样用性可以工具

用性可以工具的步骤非常简单:

打开您的web页面,打开性可以面板,而后开始记录性可以。

等几秒钟,还要确保在分析期间与页面进行交互,而后中止记录

查找任何长时间运行的函数或者事件,并关注FPS低的时间部分(放大)。

当您发现能针对进一步优化的任何活动时,您能用其余子工具来获取关于在何处采取行动的详细信息。

确保遵循少量使用户交互场景,并在分析过程中与应使用程序UI的不同部分进行交互,特别是要优化的部分。

还要避免不必要的额外操作:例如,不要与您不想分析的部分交互,由于它们只会给报表的结果增加更多的噪声。

Selecting The Time Range(选择时间范围)

Firefox的DevTools支持选择或者缩小概要文件的时间范围。您能单击时间轴或者FPS图表部分,而后拖动鼠标选择一段时间。一旦中止拖拽,DevTools就会升级其余视图和图表,只显示在此期间发生的事件的信息。

The FPS Chart

帧速率图显示记录期间每秒帧数。当录音在运行时,这张表就像一个带有活值的FPS表。

FPS图显示了在分析期间FPS的最大值、最小值和平均FPS值。所有这些值都能快速地告诉您能否存在性可以瓶颈。

假如你在运行动画,FPS应该是60 FPS。

您能用这个图表来快速地发现视觉差异(崩溃)和不一致性,它们表示帧率的严重下降(这意味着浏览器存在性可以瓶颈)。

你能从这个屏幕截图中看到一个折叠的FPS图表:

如何用Firefox开发工具进行网页性可以分析

The Waterfall Chart

维基百科将瀑布图解释为:

数据可视化的一种形式,有助于了解顺序引入正值或者负值的累积效应。瀑布图也被称为飞砖图或者马里奥图,由于显著的柱(砖)悬浮在半空中。

如何用Firefox开发工具进行网页性可以分析

对于性可以工具,瀑布图显示浏览器正在执行的活动和特定于浏览器的事件的分解,例如:

布局渲染或者布局元素(也称为反射)

样式

动画帧请求

重绘或者像素画

垃圾收集等。

布局操作或者反射和样式计算都很昂贵,因而这些可可以是优化的潜在领域。有关更多细节,请搜索参阅百度/谷歌文章。

下面是一个示例应使用程序的瀑布图的屏幕截图:

如何用Firefox开发工具进行网页性可以分析

调使用树视图

调使用树视图显示浏览器花费大部分时间用的JavaScript函数,以及重要的度量,如活动的总时间、自我时间及其相对于分析时间的百分比。

如何用Firefox开发工具进行网页性可以分析

Self time 指操作单独花费的时间,而不考虑它调使用的函数。

Total time 指操作所花费的时间及其调使用的函数。

The JS Flame Chart

Flame图显示了在分析期间JavaScript调使用堆栈的Flame图。Flame图是由布伦丹·格雷格创立的一种性可以可视化图。

如何用Firefox开发工具进行网页性可以分析

Flame图能快速、精确地识别大部分的hot code-paths(热代码路径)。

栈条意味着直接存在于CPU中的顶部操作调使用了底部操作。

您能用帧速率和JavaScriptFlame图、瀑布和调使用树视图来确定您的性可以问题,并找出需要优化的特定函数。

Flame图向您显示在记录的特定时刻特定函数的调使用堆栈的状态。

Flame图有大量的数据,因而要取得有意义的读数,需要放大,直到选择几毫秒。

Color Codes

不同的图表和部分使用相同的颜色编码,使用于相同类型的操作和资产——JavaScript、CSS、渲染、绘制等等。

您能用颜色来区分不同视图中的操作,快速识别导致问题的操作类型,并在切换不同透视图时保持操作的类型。

如何用Firefox开发工具进行网页性可以分析

您能通过这个菜单过滤掉您希望在图表和视图中看到的单个活动,您还能看到与不同操作相关的不同颜色。

例如,假如用CSS动画,您需要关注的是诸如重新计算样式、应使用样式更改、布局和绘制等活动。你能过滤掉其余活动以减少噪音。

对于JavaScript,您需要关注函数调使用、解析HTML和解析XML。

结论

在本文中,我们已经理解了如何开始用Firefox的DevTools,以及如何用不同的性可以相关子工具。Firefox的DevTools是非常全面的,而且随着Firefox最近的性可以更新,它更可以精确地识别出网站渲染过程中真正有问题的地方。

请关注:程序你好

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部