面试备战录

菜市口的跳脚长颌
88 阅读5分钟

1、什么是懒加载、预加载、预渲染？分别适用于哪些场景？

答：

  1. 懒加载（Lazy Load）：延迟加载资源（如JS、图片、组件），只有在需要时才请求和执行。
  • 应用场景：
    • 图片懒加载：只有滚动到可视区域时才加载图片，减少首屏请求量。
    • 路由懒加载：SPA项目里，把不同路由的组件打包成独立chunk，用户进入对应页面时再加载。
    • 按需加载第三方库：例如图表库echarts，只有进入图表页面才加载。
  • 优点：减少首屏体积，加快页面首次渲染速度。
  1. 预加载（Preload / Prefetch）：提前加载未来可能需要的资源，提高后续使用的速度。
  • Preload：告诉浏览器当前页面必需的资源，要 优先加载（高优先级）。
  • Prefetch：告诉浏览器 未来可能会用到的资源，浏览器在 空闲时低优先级下载。
  • 应用场景：
    • Preload：页面首屏必须的关键字体、关键 JS/CSS。视频首屏需要播放的封面图或关键片段。
    • Prefetch：用户可能跳转的下一个路由资源。电商网站里，用户可能点开的商品详情页图片。
  • 优点：优化加载时机，让资源更快可用。
  1. 预渲染（Prerender）：在用户真正访问页面前，浏览器 后台提前渲染整个页面（包括执行 JS、生成 DOM、布局、绘制）。等用户真正跳转时，直接秒开。
  • 应用场景：
    • 搜索引擎结果页中的 “即将点击” 页面。
    • 预判用户点击概率很高的链接（如首页 → 热门文章）。
    • SSR / 静态站点生成（Nuxt、Next.js），提前渲染 HTML 提供给用户。
  • 缺点：资源消耗大，如果用户没访问，等于浪费。

2、浏览器缓存策略有哪些？

答：浏览器缓存分为强缓存和协商缓存。强缓存通过Expires或Cache-Control控制，不请求服务器，直接返回本地缓存；协商缓存通过Last-Modified / ETag校验，请求服务器确认资源是否变化，未变则返回 304。实际开发中常用强缓存 + 文件名 hash的方式管理静态资源。

  • 强缓存（强制缓存）：在有效期内，不会请求服务器，直接用本地缓存（200 from memory/disk cache）。
  • 相关响应头：
    • Expires（HTTP/1.0）
      • 绝对时间，比如：Expires: Thu, 31 Dec 2025 23:59:59 GMT
      • 缺点：依赖客户端时间，用户修改系统时间可能导致失效。
    • Cache-Control（HTTP/1.1，优先级高于 Expires）
      • max-age=3600 → 缓存 1 小时
      • no-cache → 不用强缓存，但允许走协商缓存
      • no-store → 禁止缓存（强缓存和协商缓存都禁用）
      • public/private → 是否允许代理服务器缓存
  • 协商缓存（对比缓存）：每次请求都会发给服务器，服务器判断资源是否变更。
    • 没变 → 返回304 Not Modified，浏览器用本地缓存
    • 变了 → 返回新的 200，并更新缓存
  • 相关响应头：
    • Last-Modified / If-Modified-Since
      • Last-Modified：资源最后修改时间
      • If-Modified-Since：浏览器下次请求带上这个时间，服务端比对，如果没更新 → 返回 304
    • ETag / If-None-Match（优先级高于Last-Modified）
      • ETag：资源的唯一标识（哈希值）
      • If-None-Match：浏览器下次请求带上ETag，服务器对比，如果一致 → 返回 304
  • 应用场景
    • 强缓存：适合静态资源（JS/CSS/图片），加上文件名 hash，比如 app.abc123.js，版本更新 hash 改变 → 浏览器强制下载。
    • 协商缓存：适合动态内容（HTML 页面），可能随时变化但频率不高。

3、DNS 预解析、TCP 连接复用、CDN 加速是如何提升性能的？

答：DNS预解析：提前把域名解析成IP，减少首次请求的等待时间。TCP连接复用：通过keep-alive / HTTP/2 多路复用，避免重复建连，提高资源并发加载能力。CDN加速：让用户从最近的边缘节点获取资源，缩短网络延迟，减轻源站压力。

  1. DNS 预解析（DNS Prefetch）
  • 原理：
    • 浏览器访问某个域名时，需要先做DNS 解析（域名 → IP 地址）。
    • 一次DNS查询通常要几十毫秒甚至上百毫秒（依赖于网络、缓存、ISP 等）。
    • DNS预解析就是提前解析域名，把结果缓存起来，下次真正请求资源时就能直接使用。
     <!-- DNS预解析不需要协议，只需要域名部分，浏览器本身会自动补全协议 -->
 <link rel="dns-prefetch" href="//example.com" />
  • 作用：
    • 避免用户点击链接或加载资源时还要卡顿等待DNS查询。
    • 典型场景：提前预解析第三方资源（CDN、埋点、广告、统计域名等）。
  1. TCP 连接复用（HTTP/1.1 keep-alive、HTTP/2 多路复用）
  • 原理：
    • 传统HTTP/1.0：每次请求都要重新建立TCP连接（三次握手 + 四次挥手），非常耗时。
    • HTTP/1.1 keep-alive：多个请求共享一个TCP 连接，不用反复建连。
    • HTTP/2：更进一步，在一个 TCP连接里可以并发多个请求（多路复用），避免了“队头阻塞”（Head-of-Line Blocking）。
  • 优点：
    • 大幅减少了TCP建立/释放连接的成本。
    • 页面需要加载几十/上百个资源时（JS、CSS、图片），加载速度显著提升。
  1. CDN 加速（Content Delivery Network）
  • 原理
    • CDN在全球（或全国）布置多个节点（边缘节点），缓存源站资源。
    • 用户请求时，会通过智能调度（DNS 解析/Anycast）就近选择最近的节点获取资源。
  • 优点：
    • 减少传输距离和跨网络链路 → 降低RTT（往返时延）。
    • 节点有缓存，减少回源请求，降低源站压力。
    • 热门资源（静态文件、图片、视频）通过CDN分发，性能和稳定性更高。
avatar
文章
阅读
粉丝