记一次网页性能问题定位

栏目: JavaScript · 发布时间: 5年前

内容简介:因为某个页面实在加载的太慢了,所以就想好好的定位下慢的原因。这里我使用了 Chrome DevTools 的 Performane 面板来进行网页性能分析,它可以记录和分析应用在运行时的所有活动,是发现应用中可觉察性能问题的最佳位置。Command+Shift+N 打开 Chrome 隐身浏览器,隐身浏览器可排除扩展程序对 Performane 分析的干扰。Command+Opiton+I 打开控制台,切换到 Performance 选项卡。

因为某个页面实在加载的太慢了,所以就想好好的定位下慢的原因。

这里我使用了 Chrome DevTools 的 Performane 面板来进行网页性能分析,它可以记录和分析应用在运行时的所有活动,是发现应用中可觉察性能问题的最佳位置。

Command+Shift+N 打开 Chrome 隐身浏览器,隐身浏览器可排除扩展程序对 Performane 分析的干扰。Command+Opiton+I 打开控制台,切换到 Performance 选项卡。

如何记录?

  • 记一次网页性能问题定位 开始记录,操作完或页面加载完后按暂停停止记录。
  • 记一次网页性能问题定位 重新载入页面并记录,会在载入完成后自动停止记录。

停止记录后Performance面板会自动载入分析结果,如下所示:

记一次网页性能问题定位

每个区域的作用:

  • FPS(frames per second): 每秒帧数。这个是用来分析动画的一个主要性能指标。绿色竖线越高,FPS越高。FPS图表上的红色块表示长时间帧,长时间帧的位置很可能会出现卡顿。能保持在60的FPS的话,那么用户体验就是不错的。下面有个Frame区域,鼠标划上去可以看到FPS的具体数值。
  • CPU:CPU资源。此区域图表指示哪些类型的事件消耗CPU资源,不同颜色块表示的含义跟Summary是一样的。
  • Network:显示了网络请求的顺序及耗时,每一个彩色条代表一个资源请求,彩条越宽,请求的时间越长。
  • Main:展示了主线程运行状况。X轴代表着时间。每个长条代表着一个event。长条越长就代表这个event花费的时间越长。Y轴代表了调用栈(call stack)。在栈里,上面的event调用了下面的event。
  • Summary:每种类型事件的执行时间。

FPS:看FPS这里绿条的高度很低,并且出现了红条,Frame这里的帧数显示红条部分几乎为0,可以说相当卡顿了。

CPU:脚本执行的时间占了大头,有10s之长

记一次网页性能问题定位

Network: 所有资源请求都会显示在这里,一开始有两个资源并行请求,点击彩色条,下面会显示详细的资源信息。

记一次网页性能问题定位

比如一开始同时请求的两个灰条,根据资源大小可以在 Network选项卡下找到对应的请求资源

记一次网页性能问题定位

记一次网页性能问题定位

绿条的请求时间就很长,点击后看到这张图片的大小有1M,压缩的空间很大。

记一次网页性能问题定位

Main:这里显示捕捉到的 JavaScript 堆栈信息。

记一次网页性能问题定位

可以直接在页面拖拽选择指定时间段,观察这段时间里的详细数据。

切换到Call Tree选项卡,也能看到详细的执行步骤及执行时间:

记一次网页性能问题定位

把执行时间比较长的部分展开,右侧有对应的代码执行位置,展开到足够细力度后就容易定位到代码的位置。我这里展开后耗时长的部分都是G2里的代码,说明我的G2图表渲染时js执行的时间是整个js里的大头,也是优化的重点。

记一次网页性能问题定位

记一次网页性能问题定位

记一次网页性能问题定位

通过上面的分析,能得到两个优化点:

1、压缩图片资源,减少请求时间

2、优化G2图表渲染代码,减少js执行时间


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据驱动设计

数据驱动设计

[美]罗谢尔·肯(RochelleKing)、[美]伊丽莎白F.邱吉尔(Elizabeth F Churchill)、Caitlin Tan / 傅婕 / 机械工业出版社 / 2018-8 / 69.00元

本书旨在帮你了解数据引导设计的基本原则,了解数据与设计流程整合的价值,避免常见的陷阱与误区。本书重点关注定量实验与A/B测试,因为我们发现,数据分析与设计实践在此鲜有交集,但相对的潜在价值与机会缺大。本书提供了一些关于在组织中开展数据实践的观点。通过阅读这本书,你将转变你的团队的工作方式,从数据中获得大收益。后希望你可以在衡量指标的选择、佳展示方式与展示时机、测试以及设计意图增强方面,自信地表达自......一起来看看 《数据驱动设计》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具