前端性能优化全维度梳理

前端性能优化可以从加载性能、运行性能、渲染性能、网络性能、代码质量、工程化优化、用户体验几个方面系统考虑。下面按照实际项目优化思路展开。一、加载性能优化首屏速度目标让用户更快看到页面内容。1. 减少资源体积JavaScript 优化删除无用代码Tree Shaking压缩 JS代码分割Code Splitting按需加载例如// 不推荐import{Button,Table}fromelement-ui// 推荐importButtonfromelement-ui/lib/buttonWebpackoptimization:{splitChunks:{chunks:all}}效果main.js | |-- vendor.js | |-- 页面A.js | |-- 页面B.js用户访问页面 A 时不需要加载 B 页面代码。2. 路由懒加载Vue 项目常用constUser()import(/views/User.vue)替代importUserfrom/views/User.vue优势首次加载所有页面代码 ↓ 加载慢优化后首页代码 ↓ 需要时加载其他页面3. 图片优化图片通常是前端最大资源。优化方式使用合适格式格式场景WebP普通图片AVIF更高压缩SVG图标PNG透明图片图片压缩例如原banner.png 5MB优化banner.webp 200KB图片懒加载imgsrcxxx.webploadinglazy/或者IntersectionObserverconstobservernewIntersectionObserver(entries{if(entries[0].isIntersecting){img.srcimg.dataset.src}})4. 使用 CDN静态资源用户 | CDN节点 | 图片/js/css而不是用户 | 公司服务器优势降低延迟减少服务器压力提高并发能力二、网络性能优化1. 减少 HTTP 请求例如不好10个css 20个js 100张图片优化合并css 代码拆分 图片雪碧图2. 开启 HTTP 缓存强缓存响应Cache-Control: max-age31536000浏览器第一次请求 ↓ 缓存 ↓ 一年内直接使用协商缓存If-None-Match ETag流程浏览器 | 询问服务器 | 没变化 | 304 | 使用缓存3. 使用 HTTP/2HTTP/1请求1 请求2 请求3HTTP/2一个连接 多个请求并行优势多路复用Header压缩Server Push三、渲染性能优化目标避免页面卡顿。1. 减少 DOM 数量DOM 越多浏览器计算成本 ↑例如不要divdivdiv内容/div/div/div减少无意义嵌套。2. 避免频繁操作 DOM差for(leti0;i10000;i){document.body.innerHTMLi}每次修改都会触发DOM更新 ↓ 重新布局 ↓ 重新绘制优化constfragmentdocument.createDocumentFragment()for(leti0;i10000;i){fragment.append(i)}document.body.append(fragment)3. 减少重排Reflow浏览器渲染JS | Style计算 | Layout布局 | Paint绘制 | Composite合成影响 Layout 的操作element.offsetHeight element.clientWidth element.style.width100px避免for(leti0;i1000;i){el.style.widthipx}优化一次修改el.classNamelarge4. 使用 transform 动画不推荐left:100px;top:100px;会触发布局。推荐transform:translate(100px,100px);只触发Composite性能更好。四、JavaScript运行性能优化1. 防抖 debounce场景搜索框输入: a ab abc不要请求3次。实现functiondebounce(fn,time){lettimerreturnfunction(){clearTimeout(timer)timersetTimeout((){fn()},time)}}2. 节流 throttle场景滚动scroll事件 scroll事件 scroll事件限制执行频率functionthrottle(fn,time){letlockfalsereturnfunction(){if(lock)returnlocktruesetTimeout((){fn()lockfalse},time)}}3. 避免内存泄漏常见定时器未清理setInterval((){},1000)组件销毁clearInterval(timer)事件未解绑Vuemounted(){window.addEventListener(resize,fn)}beforeDestroy(){window.removeEventListener(resize,fn)}五、Vue 项目性能优化1. 合理使用 computed不好computed:{list(){returnthis.data.filter(...)}}每次依赖变化重新计算。合理缓存computed:{activeList(){returnthis.list.filter(xx.active)}}2. 避免大数据响应式例如data(){return{tableData:[10000条数据]}}Vue2 会遍历 ↓ Object.defineProperty ↓ 监听每个字段优化分页虚拟列表后端分页3. 大表格使用虚拟滚动普通10000 DOM节点虚拟20~50 DOM节点4. key 使用正确错误divv-for(item,index) in list:keyindex数据变化重新复用错误节点推荐:keyitem.id5. 减少 watch避免watch:{data:{deep:true,handler(){...}}}大对象 deep watch 非常消耗性能。六、工程化优化1. Webpack/Vite优化开启压缩WebpackTerserPlugin分包splitChunks分析包大小工具webpack-bundle-analyzer查看lodash 500KB echarts 1MB寻找优化点。2. Tree Shaking避免importlodashfromlodash改importdebouncefromlodash/debounce七、用户体验优化1. 骨架屏不要白屏3秒优化页面结构 ↓ 骨架 ↓ 真实数据2. Loading策略例如小请求无需loading大请求显示loading避免闪烁delay 300ms3. 首屏优先优先加载Header 导航 核心内容延后评论 推荐 统计八、性能指标面试常问Core Web Vitals指标含义目标LCP最大内容渲染2.5sFID交互响应100msCLS布局稳定0.1常见指标FPFirst Paint第一次绘制。FCPFirst Contentful Paint首次内容出现。TTITime To Interactive页面可交互时间。九、性能优化排查流程实际项目推荐流程1. Chrome DevTools分析 ↓ 2. Network 看资源大小、耗时 ↓ 3. Performance 看JS执行、渲染 ↓ 4. Lighthouse评分 ↓ 5. 找瓶颈优化 ↓ 6. 再测试总结前端性能优化检查清单方向手段资源压缩、Tree Shaking、分包加载懒加载、CDN、缓存网络HTTP2、减少请求图片WebP、压缩、懒加载JS防抖节流、减少计算DOM减少节点、避免重排Vuecomputed、虚拟列表、减少响应式工程化Webpack/Vite优化体验骨架屏、渐进加载监控Lighthouse、Performance