转:Chrome渲染分析之Timeline工具的使用
概述
这个工具真的很强大,Timeline工具栏提供了对于在装载你的Web应用的过程中,时间花费情况的概览,这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件,框架,和实时内存用量3个方面的数据来监测网页,通过这些数据,我们可以方便的找出页面中存在问题的地方。
Timeline面板
打开chrome开发者工具,切换到Timeline选项卡,界面如下:
功能很多,非常复杂是不是,对应E问不好的同学,真的是无从下手,幸好有翻译工具,下面我们一步一步的揭开这个工具的神秘面纱。
强烈建议在浏览器隐身模式下使用这个工具,并且禁用一切无关的插件,因为这些插件会影响测试的结果。
工具默认是不开启记录的,如果要分析页面,请点击圆形的记录按钮,按钮变红后就可以开始记录页面的各个事件了,这个时候可以在页面上做各种操作,Timeline工具会详细的记录下各类事件。建议不要记录太久,太多会增加分析的难度。
颜色的属性
Timeline工具里面使用是4种颜色来表示不同类别的事件:
蓝色:加载;
黄色:脚本;
紫色:渲染;
绿色:绘制
过滤
过滤面板可以对不同类型的事件和花费时间进行过滤,非常好用:
事件模式
在这个模式中,Summary视图(在Timeline的顶部)显示了一些水平的栅栏,分别代表页面中的网络和HTML解析(蓝色),JavaScript(黄色),渲染(紫色)以及绘制(绿色)事件。重绘是浏览器事件,是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。
我们可以在最上面灰色的时间节点哪里拖动来选择查看的记录范围,如下图:
在DETAILS面板中可以查看该记录范围内各类型事件的时间开销:
other表示其它事件花费的时间,Idle表示空闲时间 ,也可以在DETAILS面板中查看单个记录的时间开销,如下:
名词解释:
send request | 发送请求 | evaluate script | 评估脚本 | parse html | 解析html | recalculate style | 重新计算显示样式 |
---|---|---|---|---|---|---|---|
layout | 计算布局 | paint setup | 绘制设置【准备绘制】 | paint | 绘制 | composite layers | 组合层 |
timer fired | 触发定时器 | function call | 函数调用 | receive data | 接收数据 | receive response | 接收响应 |
finish loading | 结束加载 | 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
http://www.qingdou.me/3719.html
http://www.w3cfuns.com/article-1248-1.html
转载于:https://www.cnblogs.com/dasn/articles/4015755.html
转:Chrome渲染分析之Timeline工具的使用相关推荐
- Chrome渲染分析之Rendering工具
打开Rendering工具 1.Chrome浏览器F12打开控制台,按下ESC键调出窗口 2.展开 勾选Rendering 工具
- Chrome渲染分析之Rendering工具使用
每个项目产品都要加埋点,加500行埋点是不是会占用你一两天的时间而且很容易犯错,想只用一小时准确加完这500行埋点剩下一天喝茶聊天么?来试试这520工具, 高效加埋点,目前我们公司100号前端都在用, ...
- 谷歌浏览器的timeline工具的使用
谷歌浏览器Timeline用法详解: 大家都知道,谷歌浏览器自带的相关工具是前端开发人员的利器. 点击F12会弹出一个界面,顶部带有功能的选项卡,其中有几个功能强大,但是相对较为复杂,比如Timeli ...
- Serverless 实战——使用 Rendertron 搭建 Headless Chrome 渲染解决方案
为什么需要 Rendertron? 传统的 Web 页面,通常是服务端渲染的,而随着 SPA(Single-Page Application) 尤其是 React.Vue.Angular 为代表的前端 ...
- p73 应急响应-WEB 分析 phpjavaweb自动化工具
数据来源 应急响应: 保护阶段(护案发现场,断网防止持续渗透,数据备份恢复),分析阶段(找到漏洞),复现阶段(复现攻击过程),修复阶段(修复漏洞),建议阶段(给出安全建议) 目的:分析出攻击时间,攻击 ...
- GPU-CUDA-图形渲染分析
GPU-CUDA-图形渲染分析 参考文献链接 https://mp.weixin.qq.com/s/dnoqPxEt_XEhVaW_aAfrnQ https://mp.weixin.qq.com/s/ ...
- tcs标准编写软件_【通知】关于举办2019年第一期“标准编写、案例分析、TCS工具使用”培训班的通知...
各有关单位: 标准编写是开展标准化工作中一个必不可少的重要环节.掌握标准编写规则是制定符合社会经济发展需求.有科技含量.先进适用标准的基础,是提升标准质量和水平的先决条件. 2019年是建设推动高质量 ...
- chrome获取xpath元素-f12工具
Chrome浏览器获取XPATH的方法----通过开发者工具获取 引用源:https://blog.csdn.net/li6727975/article/details/46126079 版权声明:本 ...
- mysql查询并设置高亮_慢查询分析调优工具~mysqldumpslow
在日常的业务开发中,MySQL出现慢查询是很常见的,要么说明你家产品的增长性很好,要么就是你的SQL写的太烂了.所以对慢查询SQL进行分析和优化很重要,其中mysqldumpslow是MySQL服务自 ...
最新文章
- 第十六届全国大学智能车全国总决赛竞赛闭幕式
- 如何向列表中添加数据值(管理员篇)
- 卸载后的mysql和navicat怎么清除干净_清除电脑“牛皮癣 ”,带你回归清爽体验~...
- NYOJ 594 还是A+B
- Android方法调用实体类的值,React Native调用Android原生方法和传值
- Django model、view拆分,添加service
- OSGi案例研究:模块化vert.x
- e300氛围灯哪里调节_让快乐来得更简单!体验新宝骏E300/E300 PLUS
- 压缩包加密后门_加密后门:还有更多争论吗?
- ArcGIS+Sql Server发布要素服务
- java argv_argv的编码是什么?
- Http client to POST using multipart/form-data
- 3 手风琴翻折效果_vue3+typeScript 手风琴(每周一个小组件)
- (default-compile) on project datasource-demo: Fatal error compiling
- 高分毕业论文答辩自述稿(附注意事项及模板)
- python爬取公众号文章数据库,爬取微信公众号所有文章的请教
- 挤出机是什么?跟模具有什么关系?
- python输入数学表达式并求值_Python 条件表达式求值
- 十、PyQtgraph使用QtDesigner提升3D图形界面
- H5手机搜索框的简单实现
热门文章
- Bootstrap开发框架视频整理
- “云计算的前世今生·从阿里看云计算”内蒙古师范大学刘晨旭博士专题报告会顺利召开...
- 解决JS浮点数(小数)计算加减乘除的BUG
- MySQL服务器硬件和操作系统调节
- 戴尔押宝iSCSI,由低到高组合成型
- hibernate 环境搭建测试
- 多种方法解决Exchange 2010 EMC批量启用邮箱之后出..
- 基础设备----笔记
- java基础进阶(文件列表,线程,线程组)编程实例(4篇)
- .net项目开发工具(v2.0)功能完善专帖