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

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

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面板

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

页面卡顿的原因及排查相关推荐

js初化加载页面时ajax会调用两次的原因_在前端开发中，有哪些因素会导致页面卡顿
前端开发不像后端那样,很少出现有大量算法的场景,但是前端性能也是需要优化的.好的代码是保证网页平稳高性能运行的基础,结合以往开发中遇到的场景,本文对前端网页卡顿的原因进行了梳理和分析,并给出了对应的解 ...
一文带你了解如何排查内存泄漏导致的页面卡顿现象
作者 | 零一0101 责编 | 欧阳姝黎不知道在座的各位有没有被问到过这样一个问题:如果页面卡顿,你觉得可能是什么原因造成的?有什么办法锁定原因并解决吗? 这是一个非常宽泛而又有深度的 ...
H5页面卡顿加载慢原因分析
H5页面卡顿原因分析: 1.动画太多:渲染重绘占用GPU 2.页面操作导致重绘频繁 3.页面元素复杂:资源类标签太多(图像/视频/dom树太长) 4.内置webview性能太差 5.和3类似,iOS出 ...
position: relative;导致页面卡顿
1.现象: vue单页面项目只有在某个页面切换的时候出现页面卡顿现象经过长时间排查确定最终原因是该模块外层div使用 position: relative 根本原因:待完善转载于:http ...
iOS 页面的卡顿的原因以及如何解决. 如何优化app的启动速度
1.死锁: 主线程拿到锁A, 需要获取锁B, 而同时子线程拿了锁B, 需要锁A, 这时主线程等待锁B的释放, 子线程等待锁A的释放, 相互等待. 2.抢锁: 主线程需要访问DB, 而这时某个子线程往D ...
Android卡顿相关原理和排查工具
Android卡顿优化思考前言大家在平时使用手机的时候,是否遇到过我的网络明明很好,怎么一个页面半天跳转不过去,或者是,经常看到在玩王者荣耀和刺激战场时,画面都卡成ppt了,完全是ppt游戏.画面 ...
html中dom多会有影响吗,DOM操作造成的页面卡顿问题及解决
相关目录以下为我总结的其他性能优化点,欢迎参考,指点及吐槽前言界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很 ...
el-table 大数据量渲染，页面卡顿的解决方案
原文: el-table大数据量渲染卡顿的解决方案描述: 当el-table的数据有成千上万条,且在同一页全部展示,此时页面渲染的dom太多可能造成页面卡顿原因: 因为数据量过多导致浏览器渲染过多 ...
聊聊使用 JavaScript 做动画出现卡顿的原因
前段时间在使用 JavaScript 做动画的时候发现做出来的动画会出现卡顿的现象,今天我们主要就来聊一下卡顿的原因以及如何解决这个问题. 使用定时器实现动画出现卡顿的原因主要原因是浏览器无法确定定 ...

页面卡顿的原因及排查