性能优化一直是前端绕不开的话题。页面加载慢、交互卡顿，不仅影响用户体验，还可能直接流失用户。本文将从加载、运行、构建、网络四个环节，系统梳理前端能想到的各种性能优化手段，帮助我们尽

Web Worker为前端带来了后端的计算能力，十万、百万条数据都是弟弟…… Web Worker扩大了前端的业务边界，减轻了因大量计算造成的UI阻塞

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

很多前端都喜欢用 console.log 调试，先不谈调试效率怎么样，首先 console.log 有个致命的问题：会导致内存泄漏。 为什么这么说呢？ 用 Performance 和 Memory 工

当Caution: request is not finished yet！出现在Content Download有值时（如上图值为0.84ms），就与后端和网速没关系了，这个纯属于前端JS代码的问题，是前端处理后端返回的数据之后耗费的时间太长了导致的。 C：当前两种方法还是不…

单页面首屏优化，打包后大小减少64M，加载速度快了13.6秒 1. 静态文件缓存(js,css等)，图片和SVG进行压缩或者替换。 2. 删掉无用路由、引用的库（实际未使用），然后启用树摇 3. ..

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可…

图片懒加载原理 图片懒加载也叫延迟加载，只加载当前屏幕的图片，可视区域外的图片不会进行加载，只有当屏幕滚动的时候才加载。 特点： 提高网页加载速度 减少后台服务器压力 提升用户体验 原理 将图片地址存

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