LCP、CLS、INP、TTFB、FCB、TTI、TBT。 Largest Contentful Paint (LCP)：衡量加载性能。为了提供良好的用户体验，LCP 应在网页首次开始加载后的 2.5

最近接手了个集团一体化前端项目，因为承载了多个产品线的业务模块，代码量巨大，本地启服务时总是会内存溢出，启动老是失败。今天给大家分享下解决内存溢出问题的心路历程。

带你深度解锁Webpack系列(基础篇) 和 带你深度解锁Webpack系列(进阶篇)，主要是讲解了 Webpack 的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对 Webpack 的配置进行优化。 本文罗列出了十多种优化方式…

提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一些 `常规且有效` 的首屏优化建议 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理

背景：系统中有一个添加品牌的搜索框，当搜索类目不做限制的时候，全部的品牌列表会有1W多个，这时候在框架的加持下，操作速度感人。可以在https://codesandbox.io/s/pure-vue-kqber中体验一下，甚至不用打开控制台看console输出，就可以感受到载入…

长列表的优化策略主要有两种： 分片渲染（通过浏览器事件环机制，也就是 EventLoop，分割渲染时间）和本文重点介绍的虚拟列表

本篇文章致力于小白也能懂的虚拟滚动实现原理，一步一步深入比较以及优化实现方案，内容浅显易懂，但篇幅可能较长。 如果你只想了解实现思路，那么可以直接看图或者跳到文章最后。 话不多说，直接开始好吧。 想像一下，当你有10万数据需要展示的时候，咋办呢？我们来试一下将它全部加载出来。 …

作为一枚合格的前端开发攻城狮，在平常的开发过程中，不仅要保质保量地完成需求开发，还要思考如何最大化地优化前端性能，提升用户体验。

1. 配置 gzip 压缩，打出来一个待 gzip 后缀的文件 2. webpack-bundle-analyzer 分析包 3. webpack splitChunks， 提取出来的通用 'echarts', 'moment', 'element-ui', 'xlsx'等 4…