前端项目的性能优化从来不是一道单一的选择题，而是一个需要从多个维度综合考量的系统工程。下面这份清单，横向覆盖了移动端、图片、Ja vaScript、CSS、HTML、页面内容、服务器和Cookie等几个主要方向，希望能帮你建立起一个比较完整的优化框架。
移动端性能优化
- 保持单个文件小于25KB
移动网络环境下，大文件会直接拖慢页面加载速度，这是个硬道理。 - 打包内容为分段multipart文档
HTTP请求每次都要经历三次握手，耗时不少。用multipart方式可以把多个组件打包进一个请求，大幅减少握手次数。
图片优化
1. CSS Sprites（雪碧图）
把多张小图合并成一张大图，通过CSS的background属性来定位显示。这样做既减少了HTTP请求，也节省了图片总字节数，还省去了给每张小图命名的麻烦。
2. 压缩图片
图片往往是页面体积的“大头”。尽量选择合适的格式和尺寸，然后用工具（比如智图）做压缩。同时在代码里用srcset按需加载不同分辨率的图片。切记不要过度压缩，否则图片会模糊得没法看。
3. 尽量避免重设图片大小
在页面、CSS或Ja vaScript中反复重置图片尺寸，会触发多次重绘，对性能影响明显。一次到位比多次矫正要高效得多。
4. 尽量避免使用DataURL
DataURL没有经过图片压缩算法，体积会变大，而且需要解码后再渲染，加载慢、耗时长。除非是极小的图标，否则谨慎使用。
5. 图片懒加载
如果一个页面有上百张图，而用户只看到前几张，那后面的图完全可以晚点再加载。懒加载是提升首屏速度和减少带宽浪费的利器。
Ja vaScript相关优化
1. 把脚本放在页面底部
JS加载会阻塞DOM解析，放在底部可以保证页面内容先展示出来。
2. 使用外部Ja vaScript和CSS
外部文件可以被浏览器缓存，而内联代码每次请求HTML都会重新下载。把JS和CSS放到外部文件里，既减小了HTML体积，又能利用缓存提升后续访问速度。
3. 压缩Ja vaScript和CSS
压缩文件能降低网络传输量，减小响应时间。现在的构建工具基本都内置了这个功能。
4. 减少DOM操作
操作DOM会触发布局（layout）和绘制（paint），这是渲染性能的两大瓶颈。能用变量缓存的就别每次都去查DOM。
5. 缩短JS解析时间
JS的开销包括加载、解析编译和执行三个环节。可以从这几个方向入手：
- 代码拆分，按需加载
- Tree Shaking，去掉无用代码
- 避免长任务阻塞主线程
- 利用
requestAnimationFrame和requestIdleCallback做时间调度
6. V8编译原理（代码优化）
JS代码会先解析成抽象语法树，再转成字节码，最后变成机器码。编译过程中引擎会做优化，但运行时也可能发生反优化。了解这个过程有助于写出更“友好”的代码。
7. V8内部优化机制
- 脚本流：边下载边解析，不等待全部下载完再开始解析。
- 字节码缓存：常用的字节码会被缓存起来，后续复用。
- 函数懒解析：只解析当前用到的函数，减少初始加载成本。
8. 对象优化（迎合V8）
- 保证对象属性初始化顺序一致（V8会生成隐藏类以便后续复用）。
- 不要直接给对象追加新属性（追加的属性需要通过描述数组间接查找，效率低）。
- 优先使用数组代替类数组，因为V8对数组有专门的优化。如果遇到类数组，先转换成数组再操作。
- 避免数组读取越界——比如for循环多查了一个下标，性能可能相差6倍。
9. 避免undefined与数字比较
数组也是对象，当找不到对应下标时会沿着原型链向上查找，造成额外开销，而且业务上通常没有意义。
10. 避免内存泄漏
Ja vaScript的垃圾回收机制主要靠引用计数和标记清除。但循环引用、意外的全局变量、闭包中未被释放的引用、以及脱离DOM但仍有JS引用的元素，都可能导致内存泄漏。React中特别设计了ref API来管理DOM引用，就是出于这个考虑。
CSS相关优化
- 把样式表放在
中：这样可以避免浏览器先渲染无样式的内容，再重新构建渲染树，减少一次布局和绘制。 - 使用
替代@import：@import会阻塞并行下载。 - 不要使用filter：filter属性会导致性能开销，尤其在现代浏览器中依然不推荐大量使用。
- 避免元素类型混用：数组中放多种类型不利于V8引擎优化。
- 降低CSS对渲染的阻塞：按需加载关键CSS，非关键CSS可以异步加载。
- 利用GPU完成动画：通过
transform和opacity等属性触发合成层，减少重绘。 - 使用
contain属性：例如contain: layout告诉浏览器该元素内部布局变化不影响外部，可以独立优化。 - 使用
font-display优化字体加载：让文字更早显示，减轻闪动问题。
HTML相关优化
- 减少iframe的使用（每个iframe都会增加额外资源开销）
- 压缩空白符（减少传输体积）
- 避免嵌套层次过深（影响解析和渲染效率）
- 避免使用table布局（table的渲染机制比较低效）
- 减少没有必要的注释
- 删除元素的默认属性（比如
checked="checked"等，没必要的就省掉）
页面内容与请求优化
- 减少HTTP请求数（合并文件、雪碧图等）
- 减少DNS重定向
- 缓存Ajax请求（对于重复数据避免重复请求）
- 延迟加载（非首屏内容稍后再加载）
- 预加载（提前加载即将用到的资源）
- 减少DOM元素的数量（DOM越多，渲染越慢）
- 将内容划分到不同域名（利用浏览器对同一域名并发连接数的限制，适当分散请求）
- 尽量减少iframe的使用
- 避免404错误（每个404都会浪费请求资源）
服务器相关优化
- 使用CDN：将静态资源部署到离用户最近的节点，大幅降低延迟。
- 添加Expires或Cache-Control响应头：充分利用浏览器缓存。
- 启用Gzip：服务器端压缩，客户端解压，能有效减小传输体积。
- 配置Etag：配合缓存策略做条件请求，减少不必要的重新下载。
- 尽早输出缓冲：比如用Flush技术让页面头部先到达浏览器。
- Ajax请求使用GET方法：GET请求可以被缓存，POST不行。
- 避免图片src为空：空src会导致浏览器发起不必要的请求。
- Keep-Alive（持久TCP连接）：设置
keepalive_requests和keepalive_timeout，复用连接减少握手。 - HTTP缓存策略：推荐使用
no-cache配合服务器端Etag验证，既保证新鲜度又能利用缓存。 - Service Workers：不仅能加速重复访问，还能实现离线支持。
Cookie相关优化
- 减少cookie大小：每次请求都会带上cookie，体积越大越耗带宽。
- 静态资源使用无cookie域名：把图片、CSS、JS等静态资源放在另一个域名下（且该域名不设置cookie），可以避免不必要的cookie传输。
首屏加载优化
- 资源压缩、传输压缩、代码拆分、Tree Shaking、HTTP缓存
- 路由懒加载、预渲染、内联关键CSS、虚拟列表
- 使用
prefetch和preload调整资源加载顺序 - JS内存管理（避免内存泄漏以保持长期流畅）
