真正了解性能优化时,还是
产品
觉得我们系统有点卡,让我好好优化优化性能。并且有一个量化的指标来证明确实性能提升了。
一、 google任务管理器
查看web页面所占用内存,以及Javascript占用的内存, 放置一晚上,观察是否有内存泄漏。
二、Memory
Memory模块可以分析网页内存情况。
可以看到任务管理里 和 Memory模块里都可以看到占用内存的大小。
- Heap snapshot // 堆快照
- Allocation instrumentation on timeline // 分时段的内存占用
- Allocation sampling // 分配抽样
可以查看javascript 对象和相关 DOM 节点之间的内存分配.
我们可以选择堆快照,如果你怀疑某个操作会增加内存的话,那就再做一次堆快照来做对比,其中
Size Delta
为 内存增量,主要查看这个指标,找到这个操作的前后差异的地方。
三、Network
通过network可以清楚的知道,哪些资源占用的时间比较长,或者说能通过webpack拆包把它分解成几个文件并行加载,提高运行速度。
四、Performance
咱们以掘金
首页分析为例:
FPS
我们清缓存刷新页面后的这段时间,FPS
显示出一个掉帧的情况(一般FPS在60以下,就会感觉到卡顿).
Frames
在75ms ~ 150ms, 帧率普遍较低。 用户体验可能不太好。
LCP(Largest Contentful Paint)
从这个指标可以看出 页面中渲染最耗时的是 banner-image
, 可以让ui减小图片尺寸,或者压缩图片。
Experience
粉色块状的代表会影响用户体验,给出来的原因是移动了坐标。
我们在布局的时候,尽量不要发生回流。如果需要移动元素比较频繁,最好用定位,防止发生回流
。
Main 主进程
在Main
这一栏里可以看到耗时较长的任务,可以在下面的Bottom-up
、 Event Log
里找到一些蛛丝马迹,排查到代码里执行函数的耗时,来进行优化。
Lighthouse
可以清晰的看到各个指标的得分,针对性的去优化相关的问题。