wordpress手机上用的,seo站外优化最主要的是什么,浙江建设职业技术学院继续教育学院网站,深圳住房和城乡建设厅官网今天测试分配了一个比较奇怪的问题#xff0c;在单页面应用中#xff0c;反复点击“上一步”和“下一步”按钮时#xff0c;界面表现出逐渐变得卡顿。为分析这一问题#xff0c;我用Chrome的性能监控工具进行了浏览器性能录制。结果显示#xff0c;每次点击“上一步”按钮…今天测试分配了一个比较奇怪的问题在单页面应用中反复点击“上一步”和“下一步”按钮时界面表现出逐渐变得卡顿。为分析这一问题我用Chrome的性能监控工具进行了浏览器性能录制。结果显示每次点击“上一步”按钮时JavaScript堆内存JS Heap和事件监听器listener的数量显著增加并且随着点击次数的增加这种增长趋势变得越来越明显所需的时间也逐渐延长。如图所示 于是我开始查找代码里的监听器发现了这个监听代码
history.listen((_,type){if (typePOP){setMchInfo({...mchInfo})}
})这是一个用于监听浏览器历史记录变化的方法。当历史记录发生变化时传递给listen方法的回调函数会被调用。 而我点击上一步时会触发这么一个函数
const prevStep () {history.go(-1);
};而这个函数就会触发history.listen从而增加监听器数量 这样我们需要在监听器用完的时候直接移除添加的监听器
useEffect(() {const unlisten history.listen((_, type) {if (type POP) {setMchInfo({ ...mchInfo });}});return () {unlisten();};
}, [history]);unlisten是history.listen返回的函数用于移除之前添加的监听器useEffect钩子的清理函数机制保证了在history变化时只有旧的监听器会被移除而新的监听器会在清理之后重新添加避免内存泄漏。 重试了一次问题完美解决。
