前端性能优化之Performance神器


  对Chrome控制台有一定的了解的朋友都在知道,Network面板会包括很多网络请求方面的东西,包括Http相关的Request信息,Response信息,以及Cookies等等,都是前端开发需要密切关注的问题。
  这些信息都是属于功能性的,那么当我们的功能需求满足后,势必需要对于性能进行优化,有什么工具可以帮助我们进行分析呢?答案就是Chrome控制台的Performance面板。
  需要注意的一点是,Performance面板下的功能,是对于细节中的细节进行的优化。其中包含:

1.FPS,CPU和NET的使用情况?
2.页面的前1毫秒和后1毫秒网络任务是怎样?
3.Javascript代码的执行消耗时间,显卡负载情况等?
4.浏览器对页面的绘制精确到毫秒级的情况?

前端性能优化之Performance神器
  这幅图中,1,2包括了FPS,CPU,NET以及网页渲染快照以及流式Network图,直观地浅显地回答了1和2两个问题,3回答了Javascript代码的执行消耗时间,显卡负载情况等,4则回答了浏览器对页面的绘制精确到毫秒级的情况。
  上一篇博客中也提到了,第4步,也就是我们最关心的一步,是浏览器对页面的绘制精确到毫秒级的情况,准确的为我们剖析了浏览器加载渲染页面的全过程。
前端性能优化之Performance神器

  因此下文我们主要对4进行剖析,它包括4个分析面板,肯定有各自的意思在其中。
前端性能优化之Performance神器
  先来分析Summary面板,和其字面意思一样,这是总结面板。从宏观层面概括了浏览器加载的总时间,包括:

颜色 英文 中文
蓝色 Loading 记载
黄色 Scripting 脚本
紫色 Rendering 渲染
绿色 Painting 绘制
深灰 Other 其他
浅灰 其他 未熄火(空闲)

  再来分析Bottom-Up面板,直接翻译成上下很愚蠢,索性翻译成刨根问底得了,这样更合适。
  Self Time和Total Time以及Activity,其中的Self Time代表函数本身执行消耗时间,Total Time则是函数本身消耗再加上在调用它的函数中消耗的总时间,Activity不用解释,就是浏览器活动的意思。
前端性能优化之Performance神器
  值得注意的是,这里的Group面板非常有用。我们可以很清晰明了得分析按照活动,目录,域,子域,URL和Frame进行分组的前端性能。对于开发非常有帮助。
前端性能优化之Performance神器
  其实Bottom-Up和Call Tree都有各自的意思,前者是The Heavy (Bottom Up) view is available in the Bottom-Up tab,后者是And the Tree (Top Down) view is available in the Call Tree tab。个人理解的话,前者类似事件冒泡,后者类似事件捕获。要知道,Nodejs是事件驱动型,这对于以后学习Nodejs有很大的帮助。

前端性能优化之Performance神器
前端性能优化之Performance神器
  看一下二者的对比图,很明显可以看出,自上而下的Call-Tree更符合我们的人类正常思维,可以更直观地分析浏览器对页面的build精确到毫秒级的情况。
  就以百度首页进行分析。
1. 绘制阶段
综合视窗,绘制
前端性能优化之Performance神器
2. 加载阶段
解析样式表,解析HTML(评估脚本,事件)
前端性能优化之Performance神器
3.脚本阶段
  DOM GC(DOM垃圾回收),评估脚本,事件,Major GC(清理年老区(Tenured space)),Minor GC(每次Minor GC只会清理年轻代),Run Microtasks(运行微服务),Timer Fired(销毁计时器) ,XMR Load(异步加载对象加载)。
前端性能优化之Performance神器
4.渲染阶段
  视窗,升级视图树,重新计算样式。
前端性能优化之Performance神器

  最后说一下Event Log ,顾名思义就是事件日志的意思,可以很方便的选择想查看的某一阶段的日志。

前端性能优化之Performance神器
  
  其实我的这篇博客没有特别深入的讲解了浏览器渲染机制,只是简单介绍了一下Performance如何使用,大家可以先看下Alon大牛的这篇浏览器前端优化,这篇博客干货非常多。
  大家也都注意到了,Performance工具当中,包含了许多方便Nodejs开发的工具。我斗胆猜想,这可能真的是大前端的味道。前端不再是传统的UI层面或者操作DOM,而是担任了更多的角色。前端热潮中的mvvm三框架,vue,react以及angular,都有很多后端的思想。
  有心的同学可以发现,饿了么大前端团队的文章,大多都是nodejs相关,对于后端了解较少的同学学起来会非常困难。同学在点我达,他们正在筹划改组成大前端团队。我们公司都没有ios和安卓,而是有一个类似大前端的开发支持部。所以说,这呈现出一个趋势,未来优秀的的前端工程师,后端Nodejs必不可少。
  关于Performance,暂时浅尝辄止到这里,我想这对自己,以及每个阅读了这篇博客的前端工程师,将来会有或多或少的帮助。
参考文档:
https://developers.google.com…
https://stackoverflow.com/que…
https://developers.google.com…
http://colobu.com/2015/04/07/…


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>