专栏首页IMWeb前端团队chrome开发者工具-Timeline

chrome开发者工具-Timeline

本文作者:IMWeb coverguo 原文出处:IMWeb社区 未经同意,禁止转载

最近发现,许多前端开发人员(包括作者我哈),对chrome的开发者工具中的使用并不是特别深入,而本文时对chrome开发者工具Timeline的一个讲解。

我们了解网站的执行性能十分重要,执行性能问题常常体现在内存泄露上, 而在众多性能优化中,内存泄露相比于其他性能缺陷和错误而言,是不太容易去发现和解决。在一些简单小型的业务和项目中,内存泄露并不一定存在,且不能带来特别大的危害,因此也不会让我们去重视和在意,但如果项目变得复杂些,往往内存问题就会暴露出来。而这些问题在一些小内存的设备上(如移动端)也会带来更严重的影响。

所以,找到内存泄露并且解决它是处理这类问题的关键。而如何找到内存泄露,则需要使用到chrome的Timeline的工具啦。

打开Timeline

在chrome浏览器中,按下F12,打开开发者工具,然后选择Timeline的选项卡,即可看到以下面板啦。

哎哟妈吖,吓死宝宝了,啥东西,又是红又是绿的又时图表又是圆的。 大家莫慌,让我来给你们讲解下,给你们消除这种陌生的恐惧感。

面板介绍

从上图中,可以看到整个操作面板分为4个区域。

区域一 基本信息面板

在区域中1中顶部有一条工具栏,而下面则是以时间为轴的图表。

区域1是基本信息展示区,上面顶部工具栏从左到右分别是

  • (圆形按钮)运行监听按钮,运行Timeline工具检测网页。点亮按钮,按钮呈红色,表示监听中,点灰按钮,结束监听,而Timeline则会展示该监听阶段中获得的相应监听信息和执行状态数据。
  • (禁止图案)清除所有的监听信息
  • (漏斗图案)查找和过滤信息
  • (垃圾桶图案)手动回收网站内存垃圾
  • (view)监听信息的展示方式,有两种,柱状图和条状图
  • (capture)监听中希望抓取的信息,多选,分别有js堆栈、内存、内存快照

区域二 详细信息面板

区域二其实,只是区域1的详细信息版,在区域2中,展示的信息会变得更加详细,更加精准。我们查看问题都是在区域2进行的

区域三

展示的是一些内存信息,只有点击上面区域一中的memory的选择框,才会出现。

区域3总共会有四条曲线的变化图。 分别是

  • (蓝色)JS堆数
  • (红色)dom文档数
  • (绿色)内存中dom节点数
  • (黄色)内存中元素绑定事件数

区域四

展示的是在某时刻的信息内容和比例图

使用说明

下面是demo代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>test</title>
    <style type="text/css">
        div{
            height: 40px;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="node">node1</div>
    <div class="node">node2</div>
    <div class="node">node3</div>
    <div class="node">node4</div>
    <div class="node">node5</div>
    <button id="btn">改变节点</button>
    <script type="text/javascript">
        var i = 0;
        function x() {
            if(i >= 4) return;
            document.querySelectorAll('.node')[i] = 'do something';
            i++;
        }
        document.getElementById('btn').addEventListener('click', x);
    </script>
</body>
</html>

运行代码

在chrome打开,然后点亮Timeline的监听按钮,然后开始操作界面,连续点击button执行相应程序,执行后,点灰按钮,这时候你就可以看到这个时间段的Timeline中的图表信息了,如下图所示:

在我们的区域一种,会发现右下角有一组数字1.2MB-1.3MB,它的意思是在你刚刚操作界面这段时间内,内存增长了0.1MB。

底部那块浅蓝色的区域是内存变化的走势图。

从左到右,我们可以看到刚刚浏览器共监听了大约6000ms左右的信息。接下来我们来仔细分析一下这些状态的具体信息。

查看详细信息

在区域2中,时间轴会随着鼠标滚轮滚动放大缩小,滚应到相应的范围,我们开始分析下面的信息。

在区域2中,每一种颜色的横条都代表了相应的类型,如下图

从上面的图,可以看到我们每点击一次button,大约会花费了0.65ms的时间完成了从响应事件到重绘节点文本的整个过程。

查看横条具体信息

在区域2中,我们可以通过点击某一个横条,然后在区域4中更加详细地观察它的具体信息。如我们点击执行函数x的蓝色横条,观察它的执行期的状态。

查看内存变化图

在事件发生事,除了dom的渲染和绘制等行为的发生之外,相应地内存也会发生变化,而这种变化我们可以从区域3更形象地看到

我们可以看到js堆内存在视图中不断地再增长,这时因为由事件导致的界面绘制和dom重新渲染会导致内存的增加,所以每一次点击,导致了内存相应地增长。

小结

通过上述方式,我们能够明白如何使用Timeline去分析页面的执行情况,也能更好的分析代码是否存在不合理的地方。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 远程办公经验为0,如何将日常工作平滑过度到线上?

    我是一名创业者,我的公司(深圳市友浩达科技有限公司)在2018年8月8日开始运营,现在还属于微型公司。这个春节假期,我一直十分关注疫情动向,也非常关心其对公司带来的影响。

    TVP官方团队
    TAPD 敏捷项目管理腾讯乐享企业邮箱企业编程算法
  • 数据中台,概念炒作还是另有奇效? | TVP思享

    作者简介:史凯,花名凯哥,腾讯云最具价值专家TVP,ThoughtWorks数据智能业务总经理。投身于企业数字化转型工作近20年。2000年初,在IBM 研发企业级中间件,接着加入埃森哲,为大型企业提供信息化架构规划,设计,ERP,云平台,数据仓库构建等技术咨询实施服务,随后在EMC负责企业应用转型业务,为企业提供云迁移,应用现代化服务。现在专注于企业智能化转型领域,是数据驱动的数字化转型的行业布道者,数据中台的推广者,精益数据创新体系的创始人,2019年荣获全球Data IQ 100人的数据赋能者称号,创业邦卓越生态聚合赋能官TOP 5。2019年度数字化转型专家奖。打造了行业第一个数据创新的数字化转型卡牌和工作坊。创建了精益数据创新方法论体系构建数据驱动的智能企业,并在多个企业验证成功,正在向国内外推广。

    TVP官方团队
    大数据数据分析企业
  • 扩展 Kubernetes 之 CRI

    使用 cri-containerd 的调用流程更为简洁, 省去了上面的调用流程的 1,2 两步

    王磊-AI基础
    Kubernetes
  • 扩展 Kubernetes 之 Kubectl Plugin

    kubectl 功能非常强大, 常见的命令使用方式可以参考 kubectl --help,或者这篇文章

    王磊-AI基础
    Kubernetes
  • 多种登录方式定量性能测试方案

    最近接到到一个测试任务,某服务提供了两种登录方式:1、账号密码登录;2、手机号+验证码登录。要对这两种登录按照一定的比例进行压测。

    八音弦
    测试服务 WeTest
  • 线程安全类在性能测试中应用

    首先验证接口参数签名是否正确,然后加锁去判断订单信息和状态,处理用户增添VIP时间事务,成功之后释放锁。锁是针对用户和订单的分布式锁,使用方案是用的redis。

    八音弦
    安全编程算法
  • 使用CDN(jsdelivr) 优化博客访问速度

    PS: 此篇文章适用于 使用 Github pages 或者 coding pages 的朋友,其他博客也类似.

    IFONLY@CUIT
    CDNGitGitHub开源
  • 扩展 Kubernetes 之 CNI

    Network Configuration 是 CNI 输入参数中最重要当部分, 可以存储在磁盘上

    王磊-AI基础
    Kubernetes
  • 聚焦【技术应变力】云加社区沙龙online重磅上线!

    云加社区结合特殊时期热点,挑选备受关注的音视频流量暴增、线下业务快速转线上、紧急上线防疫IoT应用等话题,邀请众多业界专家,为大家提供连续十一天的干货分享。从视野、预判、应对等多角度,帮助大家全面提升「技术应变力」!

    腾小云
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    WecTeam
    渲染JavaScripthttps网络安全缓存

扫码关注云+社区

领取腾讯云代金券