常规设备的刷新频率是 60HZ，也就是说，如果要让用户感受不到明显卡顿，浏览器的渲染流水线需要每秒输出 60 张图片（60 FPS）。本文会从基础的渲染树出发，介绍浏览器渲染流水线，以及常用的优化方法

实施优化方案之前，首先要知道为什么要这样优化。这就需要你上到框架原理、js、css，下到浏览器、js 引擎、计算机网络等原理都有不错的了解。所以性能优化真的涵盖了太多前端知识，甚至是绝大部分前端知识。

项目从 vue2 升级到 vue3 后发现 element-plus table 的性能相比 vue2 版本下降非常严重，很卡，经过性能分析比对，找到了 3 个比较核心的优化点，减少了85%渲染耗时。

前端vue项目内存泄漏排查总结 未完待续。。。 背景 项目由vue-element-admin改造，二次封装了element-ui，组件套的有点深； 系统上线一段时间后，业务频繁反馈页面崩溃； 项目使

前文中我们使用 虚拟列表 优化了海量数据的显示，但实际情况并没有那么简单。不定高的列表元素该怎么获取真实高度？滚动时为什么会出现白屏闪烁？异步加载的数据要怎么处理？一次性请求大量数据是否合理？

今天前同事找到我，向我请教了一个性能优化的问题，我简单的跟他回答了一下例如组件懒加载、路由懒加载、开启gzip、公共的第三方包上cdn、还有基础的雅虎53条军规一条条排查等等......

之前在 为什么有人说 vite 快，有人却说 vite 慢？ 一文中，我们有提到开发模式下使用 Vite 会有首屏和懒加载性能下降的负面效果，并且在文章的结尾提到了可以通过持久化缓存、prefetch

项目背景 我们的系统（一个 ToB Web 的单页应用）经过多年的迭代，目前已经累积有大几十万行的业务代码，30+ 路由模块，整体的代码量和复杂度还是比较高的。 项目整体是基于 Vue + TypeS

前言 本文整理自：developers.google.cn 及 高性能JavaScript，再加上了一些个人对其中提到的知识点的理解与补充。前端性能优化涉及很多方面，本文仅针对高性能渲染进行分析。