理论篇：详解内存管理和内存泄漏；工具篇：chrome Devtools Memory 面板的基本使用；实验篇：探究与解决 vue 组件内存泄漏问题

当页面数据量较大，例如有几千条数据渲染的时候，dom过多产生滚动卡顿的现象。此时使用该插件可以动态渲染可视区的dom，滚动时实时计算和变更可视区显示的数据。 原理 根据可视区的高度以及it

在我们的开发中table组件可以说是重中之重，非常频繁的使用到。但是如果碰到数据量多的时候，这个组件的性能非常堪忧。 总结：由此可见， 这个table组件只适合渲染小数据量的，或者要进行合理的分页。 （1）表格数据使用Object.freeze(data)处理，因为一般来说表格…

简介 本文介绍 Chrome DevTools Performance 面板的所有功能，以便使用其分析页面加载时/运行时性能，找出性能瓶颈。 功能面板概览 控制面板（红色区域）：控制性能分析相关功能的

当页面卡顿、慢时可以使用Performance来分析问题原因所在。 截图：默认勾选，每一帧都会截图。关闭后区域二下面部分会去除（下图红框标记那里） 1 . FPS 绿色越高越好，出现红色则表示FPS低（这就是你为啥觉得页面卡顿了），你可以在区域三Frames中看到具体的FPS值…

网页加载后，浏览器会解析 html、执行 js、渲染 css，这些工作都是在 Event Loop 里完成的，理解了 Event Loop 就能理解网页的运行流程。 但很多人对 Event Loop

项目是利用vue框架开发的公司内部的异常监控系统，用于显示java程序运行时的异常信息，包括执行堆栈、代码、变量等信息显示。 在测试过程中，部门同事反映：在不同的异常信息之间多次切换，会导致网页崩溃。在案发现场打开 chrome 的任务管理器，看到这个页面内存占用已经达到了9.…

ZoomUI 的 Table 组件相比 ElementUI 的 Table 组件在更新渲染方面性能提升了十倍，这是如何做到的呢？

所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里，笔者通过本文整理出关于前端性能优化的九大策略和六大指标