关注本站公众号,
获取永久访问授权码
扫码关注,回复『刷题』即可
~技术问答题~
返 回

No.832 前端项目如何找出性能瓶颈

题目描述~ 略...

寄语:问题比答案更重要

建议自己先有个思考的过程,有了自己的答案或者疑问再看解析进行对比。

目前解析在逐步添加中,也可以跳转链接查看。

参考1

性能监控体系, chrome perfermance devtools, 工作经验

参考2

分享一下我近期的经验,之前项目也碰到过用起来很卡的情况,就是用element ui的tab切换组件时,点击tab切换非常卡,非常耗时,在排除了网络请求和js代码执行时间过长等原因后,跑了一次perfermance,结果发现大部分时间都花费在了 DOM GC上了,分析了下原因可能时dom结构太多导致每次tab切换渲染太耗时了。由于我每个tab里面的html结构都一样,都是一个table,只是每次tab切换时请求的数据不一样,我就把table抽离出来了,放到tab组件外面,然后tab里面就空了,就没有那么多dom了,tab切换就不卡了,很流畅。(ps:tab有20-30个切换选项,本人语文水平不行,描述的不清楚,望轻喷。)

参考3

我觉得应该首先理一理会造成性能损耗的一些场景:

  1. 比如大列表的渲染,大量dom的渲染

2.大量图片的加载,过多资源的请求.

3.代码中有没有耗时的计算操作,或则大量循环.递归

编写的组件过于庞大 层级过深,依赖模块过多等. 我觉得首先就是查看请求的资源体积是否过大,如果过大考虑压缩,减少不必要的资源的请求,不必要的js代码的代码加载,用字体图标代替图片,异步加载等等. 但是我觉得基本的优化策略(减少请求数,压缩请求资源的体积)都已经做过了,感觉性能还是没有提升,可能应该关注与代码层面的优化吧,比如过大的第三方库能不能换成轻量级的,代码中有没有很耗时的操作循环和递归,过多的分支条件语句,能不能改写以提高执行效率,简化复杂的组件逻辑,减少不必要的依赖,是否有杀鸡用了牛刀的操作等.暂时想到的就这些.


更多解析请看原文 原文

解析或答案仅供参考。

关于作者

zz_jesse 专注前端

掘金 我的开源项目

公众号@前端技术江湖

一个可以帮开发者成长的公众号前端面试题库更新通知前端学习资料、干货文章

技术交流群

交流中成长大厂内推机会