网站客服在线系统_效果图制作软件免费下载_seo站长工具下载_广告主平台

一、前端性能优化核心面试题汇总

1. 浏览器加载优化相关问题

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协议降低延迟）

2. 渲染性能优化问题

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资源

3. JavaScript执行优化问题

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等动态语法

4. 网络与缓存优化问题

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缓存

二、六大维度性能优化实战策略

1. 网络层优化

• HTTP/3落地实践：

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

• 资源预加载与预连接：

  <!-- 预加载关键JS/CSS -->
  <link rel="preload"