前端页面性能优化面试题（含详细真实面试答案）.docxVIP

前端页面性能优化面试题（含详细真实面试答案）

一、说说你项目中做过的页面性能优化？（必问高频题）

详细面试答案：

我在日常项目中主要从加载性能、渲染性能、运行时性能、网络传输、缓存策略五个维度做整体优化，都是落地过的实操方案，不是理论优化。

1.网络加载优化

首先是资源精简与压缩，本地开发时通过打包工具压缩JS、CSS，删除注释和冗余代码，开启Gzip压缩；图片方面统一使用WebP/AVIF格式，大图片做懒加载，首屏图片做预加载，非首屏图片延迟加载。同时对项目静态资源、第三方资源做CDN部署，缩短资源请求链路。

其次是请求优化，合并页面小接口，避免过多HTTP请求；杜绝无效重复请求，通过接口缓存、防抖节流控制高频请求，同时去除项目中未使用的冗余代码、废弃依赖，减少打包体积。

2.浏览器缓存优化

合理配置HTTP缓存，静态资源设置强缓存Cache-Control、Expires，配合协商缓存ETag、Last-Modified；打包时给静态资源添加哈希后缀，文件更新则哈希变更、触发更新，无更新则走本地缓存，大幅减少重复加载时间。

3.页面渲染优化

CSS放在头部、JS放在底部，避免JS阻塞页面渲染；杜绝CSS阻塞、白屏问题。减少重排重绘，页面固定样式统一抽离，避免频繁操作DOM样式，批量修改DOM节点，优先使用transform、opacity做动画，因为这两个属性只触发合成