前端性能优化之Performance神器

qujian 发布于2019-08-20 17:22 / 968人阅读

摘要：需要注意的一点是，面板下的功能，是对于细节中的细节进行的优化。我们可以很清晰明了得分析按照活动，目录，域，子域，和进行分组的前端性能。个人理解的话，前者类似事件冒泡，后者类似事件捕获。同学在点我达，他们正在筹划改组成大前端团队。

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

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

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

　　因此下文我们主要对4进行剖析，它包括4个分析面板，肯定有各自的意思在其中。

　　先来分析Summary面板，和其字面意思一样，这是总结面板。从宏观层面概括了浏览器加载的总时间，包括:

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

　　再来分析Bottom-Up面板，直接翻译成上下很愚蠢，索性翻译成刨根问底得了，这样更合适。
　　Self Time和Total Time以及Activity，其中的Self Time代表函数本身执行消耗时间，Total Time则是函数本身消耗再加上在调用它的函数中消耗的总时间，Activity不用解释，就是浏览器活动的意思。

　　值得注意的是，这里的Group面板非常有用。我们可以很清晰明了得分析按照活动，目录，域，子域，URL和Frame进行分组的前端性能。对于开发非常有帮助。

　　其实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有很大的帮助。

　　看一下二者的对比图，很明显可以看出，自上而下的Call-Tree更符合我们的人类正常思维，可以更直观地分析浏览器对页面的build精确到毫秒级的情况。
　　就以百度首页进行分析。
1. 绘制阶段
综合视窗，绘制

2. 加载阶段
解析样式表，解析HTML（评估脚本，事件）

3.脚本阶段
　　DOM GC（DOM垃圾回收），评估脚本，事件，Major GC（清理年老区（Tenured space）），Minor GC（每次Minor GC只会清理年轻代），Run Microtasks（运行微服务），Timer Fired（销毁计时器），XMR Load（异步加载对象加载）。

4.渲染阶段
　　视窗，升级视图树，重新计算样式。

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

　　
　　其实我的这篇博客没有特别深入的讲解了浏览器渲染机制，只是简单介绍了一下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/...

GPU云服务器云服务器前端性能优化前端开发性能优化性能优化前端优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83529.html

2017-06-20 前端日报

摘要：前端日报精选专题之跟着学节流冴羽的博客全家桶仿微信项目，支持多人在线聊天和机器人聊天腾讯前端团队社区编码的奥秘模块实现入门浅析知乎专栏前端每周清单发布新版本提升应用性能的方法中文寇可往吾亦可往用实现对决支付宝的微信企业付款到零 2017-06-20 前端日报精选 JavaScript专题之跟着 underscore 学节流 - 冴羽的JavaScript博客 - SegmentFau...

Galence 2019-08-20 17:23 评论0 收藏0
优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0
前端质量监控之页面性能相关

摘要：前言最近有幸参与一个前端质量监控类项目的重构，算是个人初次接触到前端质量监控相关的知识，对于其中的性能统计部分很感兴趣，查询资料之后写了文章，作为个人学习记录，如有错误，敬请斧正页面整体性能通过浏览器提供的方法，我们能够得到网页每个处理阶段前言最近有幸参与一个前端质量监控类项目的重构，算是个人初次接触到前端质量监控相关的知识，对于其中的性能统计部分很感兴趣，查询资料之后写了文章，作...

Shihira 2019-08-23 12:56 评论0 收藏0
1月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享视频前端技术论坛融合不可错过的迷你库测试框架实例教程为你详细解读请求头的具体含意解析的库如果要用前端框架，开发流程是怎样的与有什么区别正确使用的方法是什么流程图插件小如何让元素只能输入纯文本前端技术中更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfront...

solocoder 2019-08-20 14:37 评论0 收藏0
前端知识普及之页面加载

摘要：如果你的文件涉及操作，可以直接在里面添加回调函数，或者说基本上我们的文件都可以写在里面进行调用其实，这和我们将文件放在底部，在上面加以及异步加载文件的效果是一样一样的。如果大家想继续看下面的内容的话，有一个要求，就是回答我一个问题:你这样写过代码吗？ window.onload = function(){ $(.gravatar).on(click,function(){ ...

tianyu 2019-08-19 17:38 评论0 收藏0