页面卡顿的原因及排查

页面卡顿的原因、排查及解决方案

一、渲染不及时，页面掉帧

1》网络请求太多，请求返回的数据比较慢

接口返回慢的话，后端做些优化；前端适当做些缓存，减少不必要的重复的请求

可以从调试工具中的Network查看请求情况

2》回流和重绘多

减少dom的操作，适当使用keep-alive,v-show等

平时要养成良好的编码习惯

3》dom节点太多，渲染的比较慢

如果是数据确实太大的话，可能要从业务上调整一下，展示可能要改变下，比如说做分页什么的

从数据上和页面显示上可以查看

二、网页内存占用过高，运行卡顿

有可能内存泄露

1》全局变量引起的内存泄露

标记清理；离开作用域自动标记为可回收，在垃圾回收期间被删除

全局变量不会回收，局部变量会被回收，也就是函数一旦运行完以后，函数内部的东西都会被销毁；只要被另外一个作用域所引用就不会被回收 （闭包）

所以我们要尽量减少全局变量的使用，使用完引用类型的数据后解除引用

2》闭包引起的内存泄露

因为引用了其他作用域的变量，所以变量不会被回收

即使解除引用

3》定时器引起内存泄露

window.setTimeout(),window. setInterval()

清理定时器，这时定时器需要给他取名了

4》dom删除时没有解绑事件

5》循环引用

是否存在内存泄露的判断方式

调试工具的Performance

折线图部分

js heap:js占用内存大小，有没有内存泄露主要看这个（箭头指向的蓝色的线）

如果这条蓝线一直增加那么肯定存在内存泄露，那么可以到Memory中查看堆快照数据

底部的时间总览图形，查看各部分花费的时间：

loading：网络请求和html解析时间

scripting:js执行时间

redering:重排时间，计算尺寸，位置信息

painting：绘制时间

system:系统占用时间

idle:空闲等待时间

memory面板

我们可以多次快照进行对比，也可以看单次快照的趋势