转载:http://www.ghugo.com/chrome-timeline/
概述
这个工具真的很强大,Timeline工具栏提供了对于在装载你的Web应用的过程中,时间花费情况的概览,这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件,框架,和实时内存用量3个方面的数据来监测网页,通过这些数据,我们可以方便的找出页面中存在问题的地方。
Timeline面板
打开chrome开发者工具,切换到Timeline选项卡,界面如下:
功能很多,非常复杂是不是,对应E问不好的同学,真的是无从下手,幸好有翻译工具,下面我们一步一步的揭开这个工具的神秘面纱。
强烈建议在浏览器隐身模式下使用这个工具,并且禁用一切无关的插件,因为这些插件会影响测试的结果。
工具默认是不开启记录的,如果要分析页面,请点击圆形的记录按钮,按钮变红后就可以开始记录页面的各个事件了,这个时候可以在页面上做各种操作,Timeline工具会详细的记录下各类事件。建议不要记录太久,太多会增加分析的难度。
颜色的属性
Timeline工具里面使用是4种颜色来表示不同类别的事件:
蓝色:加载;
黄色:脚本;
紫色:渲染;
绿色:绘制
过滤
过滤面板可以对不同类型的事件和花费时间进行过滤,非常好用:
事件模式
在这个模式中,Summary视图(在Timeline的顶部)显示了一些水平的栅栏,分别代表页面中的网络和HTML解析(蓝色),JavaScript(黄色),渲染(紫色)以及绘制(绿色)事件。重绘是浏览器事件,是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。
我们可以在最上面灰色的时间节点哪里拖动来选择查看的记录范围,如下图:
在DETAILS面板中可以查看该记录范围内各类型事件的时间开销:
other表示其它事件花费的时间,Idle表示空闲时间,也可以在DETAILS面板中查看单个记录的时间开销,如下:
名词解释:
发送请求 | evaluate script评估脚本 | parse html解析html | recalculate style重新计算显示样式 |
计算布局 | paint setup绘制设置【准备绘制】 | paint绘制 | composite layers组合层 |
触发定时器 | function call函数调用 | receive data接收数据 | receive response接收响应 |
结束加载 | GC event浏览器垃圾回收 | pevaluate script评估脚本 | rasterize光栅化 |
帧模式
帧模式能让我们深入的了解页面的渲染性能,“帧”表示浏览器要呈现的内容显示到单个帧所必须做的工作,如运行 JavaScript、 处理事件、 更新 DOM 和更改的样式、 布局和绘制。
目前大多数的显示器的刷新频率是60Hz,那么我们页面的绘制频率能达到60帧每秒是最好的,因为软件帧和硬件的刷新频率一致的话,页面能给人非常流畅的感觉,否则就会感觉到很卡,这样我们大概有16.6ms(1000/60)来完成每一帧的呈现,这就是很多人说的“16.6ms”优化。
灰色的区域有点难理解,你可以理解是浏览器内部c++的一些工作,这部分可能和前端的js以及渲染没什么关系。【陈子舜】
选择一个帧范围可以查看这个范围内帧的一些数据,如下:
内存模式
内存视图会通过一个图表显示您的页面随着时间的推移所使用的内存,你可以查看每个时间段的内存使用量,并找出性能问题。
结束语
PS:本文来自huihuixiao发表在部门博客的内容,觉得非常有价值故转载出来,在此感谢huihui的辛苦付出!
通过Timeline来观察页面的渲染变化,有利于分析页面的性能瓶颈。timeline是个非常不错的工具,下一次将讲解”Rendering”的用法,通过timeline + Rendering 基本能分析出页面的渲染性能。这在移动端非常有用。
参考文档
https://developers.google.com/chrome-developer-tools/docs/timeline
相关推荐
Chrome浏览器的Timeline工具是一款强大的性能分析工具,用于检查Web应用程序的性能表现,特别是在页面加载、DOM事件处理、页面布局和渲染方面。Timeline工具提供了一种可视化的方式,通过事件、帧和实时内存用量的...
- 使用此工具可以分析页面的加载速度和渲染效率,找出性能瓶颈。 5. **剖析(Profiles)面板**: - 剖析面板提供了CPU和内存的剖析功能,帮助开发者检测JavaScript函数的运行时间和内存消耗。 - 通过内存剖析,...
Chrome浏览器内置的开发者工具(DevTools)是这个调试环境的核心,其功能强大且易于使用,深受前端工程师喜爱。在这个压缩包中包含的是Chrome的安装程序(23.0.1271.95_chrome_installer.exe),通过安装此版本的...
Chrome开发者工具中的Timeline功能是优化Web应用性能的关键工具,它帮助开发者深入了解页面的渲染过程,以便进行有效的性能优化。Timeline提供了详细的性能数据,包括JavaScript执行、样式计算、布局、绘制和渲染层...
1. Chrome DevTools Timeline:这是一个强大的浏览器内置工具,用于分析网页应用的性能,可以查看JavaScript执行、渲染、网络请求等事件的时间线。 2. Grafana:这是一个流行的开源度量分析和可视化套件,支持创建...
在开始使用 Google Chrome 浏览器的开发人员工具之前,首先需要确保安装了最新版本的 Chrome 浏览器。可以通过访问 Chrome 的官方网站下载安装程序,或者直接在浏览器中检查更新来获得最新的版本。 一旦安装完成,...
【Google Chrome开发人员工具详解】 Google Chrome 浏览器开发人员工具是一套强大的网页开发和调试工具,它允许开发者深入洞察网页的HTML、CSS和JavaScript代码,从而实现高效的网页优化和问题排查。这套工具适用于...
在使用`react-perf-devtool`之前,开发者通常会使用Chrome的内置开发者工具,比如Timeline或Profiler面板来检查应用的性能。但这些工具往往不够专注,对于React特定的性能问题,可能无法提供足够的信息。而`react-...
8. 工具栏(Timeline):记录页面生命周期内的事件,如渲染、脚本执行、布局等,帮助分析性能问题。 9. Lighthouse:一个自动化工具,用于提高网页的质量,包括性能、可访问性、最佳实践等方面,提供详细的审计报告...
Chrome DevTools 是开发者们调试Web应用的得力工具,其中Timeline模块提供了一种可视化的性能分析界面,帮助我们了解网页在加载和运行过程中每一时刻的状态。Timeline Model是这个模块的核心,它负责解析和组织...
Profile面板提供了性能分析工具,可以生成CPU性能概况和内存使用情况报告,从而帮助开发者优化应用性能。 - **CPU Profile**:收集CPU运行信息,用于识别程序中耗时较多的部分。 - **Memory Profile**:监控内存...
6、Profiles(性能分析器):Profiles面板提供了CPU和内存的性能分析工具。开发者可以通过CPU分析器记录执行JavaScript代码时的CPU使用情况,通过内存分析器查看内存泄漏的问题。这对于提高页面运行效率和性能至关...
6. **性能分析**:通过Timeline面板,可以记录页面的性能数据,包括渲染、脚本执行、网络请求等,帮助开发者找到性能瓶颈。 7. **命令行工具**:提供JavaScript命令行,可以运行单行JS代码,进行快速测试或执行特定...
3. **Vue Profiler**:这是一个性能分析工具,可以测量组件的渲染和更新速度,帮助优化应用性能。通过它,你可以发现哪个组件占用了最多的CPU时间,从而进行针对性优化。 4. **Vue Router**:如果你的应用使用了Vue...
5. **Performance面板**:提供了一个可视化的界面来记录和分析页面的性能指标,包括CPU使用率、内存消耗、渲染帧率等。这对于识别性能瓶颈和优化页面速度非常有用。 6. **Application面板**:展示了页面使用的存储...
3. **性能分析**:通过Timeline面板,开发者可以记录并分析Vue组件的渲染性能,找出潜在的性能瓶颈,比如哪些组件渲染过于频繁或耗时过长。 4. **Vue实例检查**:在组件树中选择一个组件,可以查看其对应的Vue实例...
### Chrome开发人员工具深入使用 #### 简介 Chrome开发人员工具(简称DevTools)是一套集成在Google Chrome浏览器中的强大工具集,用于帮助开发者高效地进行网页调试与优化。它提供了丰富的功能来帮助开发者了解...
5. 性能分析:通过Timeline面板,可以检测和优化Vue应用的渲染性能。 6. 悬浮窗口:在页面上悬浮显示当前鼠标位置所在的Vue组件信息,便于快速了解上下文。 总的来说,Vue3.0-devtools-6.0.0-beta-7-Crx4Chrome是...
5. **性能分析**:通过Timeline面板,你可以记录Vue应用的渲染性能,找出性能瓶颈。 6. **调试**:提供断点和错误追踪,帮助开发者在Vue应用中进行调试。 Vue DevTools的使用大大提升了Vue开发者的效率,通过实时...