前端性能优化高频面试题解析与实战指南（2025版）

魏大帅。

于 2025-04-09 14:49:44 发布

阅读量1.6k

点赞数 39

CC 4.0 BY-SA版权

分类专栏：前端面试题性能优化文章标签：前端性能优化面试

Q1：浏览器从输入URL到页面渲染的完整流程中，有哪些关键性能节点？

核心流程：DNS解析 → TCP连接（TLS握手）→ HTTP请求 → 资源下载 → 解析HTML/CSS/JS → 构建DOM树/CSSOM → 合成渲染树 → 布局（回流）与绘制（重绘）→ 图层合成
关键优化点：DNS预解析（<link rel="dns-prefetch">）、HTTP2多路复用、资源优先级控制（<link rel="preload">）

Q2：如何优化首屏加载速度？

核心策略：
1. 资源优化：压缩图片（WebP格式+AVIF）、代码分包（SplitChunksPlugin）、移除无效代码（Tree Shaking）
2. 渲染优化：SSR/SSG（Next.js/Nuxt.js）、懒加载（Intersection Observer API）、预渲染（prerender-spa-plugin）
3. 网络优化：CDN加速、HTTP缓存（强缓存+协商缓存）、HTTP/3（QUIC协议降低延迟）

Q3：回流（Reflow）和重绘（Repaint）的区别是什么？如何避免过度触发？

定义：
- 回流：元素几何属性（宽高/位置）变化，导致浏览器重新计算布局，影响子元素及周边元素
- 重绘：元素视觉属性（颜色/背景）变化，仅需重新绘制像素
优化方法：
- 批量修改样式（使用CSS Text或文档碎片DocumentFragment）
- 避免频繁读取布局属性（将offsetWidth等操作合并）
- 使用GPU加速（transform/opacity触发合成层独立渲染）

Q4：CSSOM阻塞渲染的原理是什么？如何处理？

原理：浏览器必须等待CSSOM构建完成，才能计算元素样式并生成渲染树，JS执行会阻塞CSSOM构建（并行下载但顺序执行）
解决方案：
- 媒体查询异步加载（<link rel="stylesheet" media="print" onload="this.media='all'">）
- 关键CSS内联到HTML（Critical CSS），非关键CSS异步加载
- 使用rel="preload"预加载关键CSS资源

Q5：如何避免JS执行阻塞页面渲染？

策略：
1. 脚本加载控制：defer（DOM加载后执行，顺序执行）、async（异步加载，不保证顺序）
2. 代码拆分：动态导入（import('./module.js')）、Webpack SplitChunks
3. 任务调度：微任务（Promise）/宏任务（setTimeout）、requestIdleCallback处理空闲期任务

Q6：V8引擎如何优化JS执行性能？哪些操作会触发优化反编译？

优化机制：
- 内联缓存（Inline Cache）：记录函数调用信息加速执行
- 类型推断（Monomorphic/Polymorphic）：根据类型生成优化代码
反编译场景：
- 对象属性动态变化（添加/删除属性）
- 函数参数类型不一致（频繁多态调用）
- 使用eval/with等动态语法

Q7：HTTP缓存策略如何配置？强缓存和协商缓存的区别？

强缓存（200 from disk/memory cache）：
- Cache-Control: max-age=31536000, public（优先级高于Expires）
- 浏览器直接从缓存读取，无需发起HTTP请求
协商缓存（304 Not Modified）：
- 服务器通过ETag/If-None-Match或Last-Modified/If-Modified-Since判断资源是否更新
- 需发起HTTP请求，但响应体为空

Q8：如何优化API接口性能？

方法：
1. 接口合并：GraphQL批量请求、RESTful合并端点（如/api/batch）
2. 数据压缩：Gzip/Brotli服务器端开启，二进制格式（Protocol Buffers优于JSON）
3. 缓存策略：客户端缓存（Redux Persist）+ 服务端缓存（Redis）+ CDN缓存

HTTP/3落地实践：

# 开启HTTP/3支持（需TLS 1.3）
listen 443 quic;
ssl_protocols TLSv1.3;

资源预加载与预连接：

<!-- 预加载关键JS/CSS -->
<link rel="preload" href="main.js" as="script">
<!-- 预连接第三方域名 -->

200万优质内容无限畅学