社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
加500行埋点是不是会占用你一天的时间而且很容易犯错,如果你想只用一小时准确加完这500行埋点剩下一天喝茶聊天来试试这520工具,高效加埋点,目前我们公司100号前端都在用
自己开发所以免费,里面有使用视频
使用chrome开发者工具进行性能分析,是作为前端开发者的一个必不可少的技能。但这也需要开发者对性能缺陷有足够的敏感性。才能察觉出程序中存在的问题。
如果某天你发现自己写的程序运行缓慢,你可能需要查看一下是否是DOM元素过多,这时候你就F12打开控制台,并且输入下面的代码,查看DOM元素的总数是否过大:
$$('*').length// 或者是document.querySelectorAll('*').length
结果发现并不是DOM元素的问题。于是你又开始怀疑是不是window对象上挂载了太多的事件监听(EventListeners),于是你再次打开控制台,输入下面的代码,查看window对象上都挂载了哪些事件处理函数:
getEventListeners(window)
结果你可能有发现并不是事件监听过多的问题。这时,你又怀疑到了是否是CPU占用率过高,导致了JS执行缓慢呢?于是你又打开chrome开发工具,切换到性能面板(performance),对运行时的代码做一段记录,然后查看结果:
通过对summary视图的分析,你可能会怀疑是否是CPU占用过高?
综上,chrome确实也提供了一系列的功能方便我们来定位可能存在的性能问题。但是上面提到的这个查找过程显得过于盲目了,不能很快速的定位了问题的原因。
为了解决上面我提出的问题,我们今天的主角闪亮登场了,它就是chrome devtool中的 performance monitor , 它能实时地监控程序运行过程中影响到性能的常见指标,以便于我们快速的找到问题,非常的方便。下面就说说它应该怎么使用:
F12打开开发者工具,然后 MAC : command + shift + pWIN : ctrl + shift + p搜索 show performance monitor , 并选择 此时就打开了 performanc monitor
从上图可以看到,这个面板中列出以下的一些指标:
有了这些指标,我们就能很方便地实时定位出什么指标出了问题,这样就能方便我们进行下一步的定位,避免了盲目猜测,走弯路。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!