4.2.2 浏览器（网页浏览器）渲染、网络、缓存、存储、安全与性能

边界：本篇消费 4.2.0 知识图谱迁移账本 与 4.2.1 语言运行时。本文解释浏览器（网页浏览器）从导航到绘制、缓存、安全拦截与性能证据的通用机制；不重复 Vue3（前端框架）依赖图、React（前端框架）Fiber（纤程）或 SSR（服务端渲染）协议细节。所有数值均为演练样例，待源码或现场核对，不代表本地项目线上实测结果。

图解读（六要素）。 节点：用户、网络栈、渲染进程、缓存、安全策略与 GPU（图形处理器）；箭头：请求、字节流、解析产物和图层提交；前提：导航可达且响应通过策略校验；正常路径：命中可信缓存或回源后完成解析、绘制、合成；失败路径：资源阻塞、策略拒绝或长任务使页面停在旧帧；观测：瀑布图、控制台、安全报告、性能时间线和服务端日志；结论：浏览器性能与安全是跨层流水线，不能只优化一段脚本。

1. 面试主线与责任边界

高级 Java（编程语言）全栈面试应从“用户输入一个 URL（统一资源定位符）后，到底是谁做了什么”讲起：浏览器（网页浏览器）负责导航、隔离、解析、渲染和本地暂存；CDN（内容分发网络）、网关与 Java（编程语言）服务负责可用性、响应头、身份、权限、数据与审计。WMS（仓储管理系统）库存、支付资金一致性和 Runner（执行器）任务状态仍是服务端权威事实；前端只能缓存读副本、展示未知态，并把用户意图与证据标识传给后端。

2. 导航、网络与进程边界

2.1 URL（统一资源定位符）导航、DNS（域名系统）、连接与 HTTP（超文本传输协议）

一次导航先解析 URL（统一资源定位符），检查浏览器（网页浏览器）内存或磁盘缓存、Service Worker（工作线程）拦截和重定向；需要回源时，网络栈通过 DNS（域名系统）得到地址，建立 TCP（传输控制协议）连接并完成 TLS（传输层安全）握手，再发送 HTTP（超文本传输协议）请求。HTTP（超文本传输协议）/2（第二版）或 HTTP（超文本传输协议）/3（第三版）可在连接复用、队头阻塞特征上不同，但不改变“服务端决定业务结果”的边界。

sequenceDiagram
  participant U as 用户
  participant B as 浏览器（网页浏览器）
  participant D as 域名系统
  participant E as 边缘节点
  participant S as Java服务
  U->>B: 输入统一资源定位符
  B->>B: 检查导航缓存与服务工作线程
  B->>D: 解析域名
  D-->>B: 返回地址
  B->>E: 建连、握手、发送请求
  alt 边缘缓存命中
    E-->>B: 返回文档与缓存头
  else 未命中或失效
    E->>S: 回源请求
    S-->>E: 返回权威响应
    E-->>B: 转发响应
  end

图解读（六要素）。 节点：用户、浏览器（网页浏览器）、域名系统、边缘节点和 Java（编程语言）服务；箭头：导航、解析、建连与响应；前提：域名、证书和路由有效；正常路径：边缘命中或安全回源；失败路径：解析、握手、回源任一处超时；观测：网络瀑布、状态码、解析与握手耗时；结论：TTFB（首字节时间）只是链路结果，先按层拆证据。

sequenceDiagram
  participant B as 浏览器（网页浏览器）
  participant N as 网络进程
  participant R as 渲染进程
  participant S as 服务端
  B->>N: 提交导航
  N->>S: 发出文档请求
  S-->>N: 文档首字节
  N-->>R: 流式传递文档字节
  alt 首文档被阻塞
    S--x N: 连接重置或长时间无首字节
    N-->>R: 导航错误页或重试信号
  else 首文档到达
    R-->>B: 开始解析与显示
  end

图解读（六要素）。 节点：浏览器（网页浏览器）、网络进程、渲染进程和服务端；箭头：导航控制与流式字节；前提：多进程通信通道可用；正常路径：首字节到达后渲染进程增量解析；失败路径：文档首字节迟到或连接被重置；观测：导航错误、TTFB（首字节时间）和网络错误码；结论：白屏不等于脚本错误，可能尚未获得可解析文档。

数据演绎 1：导航慢的分层。 演练输入：域名解析 40 毫秒、建连加握手 110 毫秒、边缘回源 260 毫秒、文档下载 90 毫秒，总导航约 500 毫秒。状态变化：页面在首字节前不能构建 DOM（文档对象模型）；事件顺序：先查 DNS（域名系统），再建立安全连接，最后才有文档字节；观测：浏览器网络面板的域名、连接、等待和下载分段；结论：若等待段占 260 毫秒，压缩 JavaScript（脚本语言）不会降低这段等待，应核对 CDN（内容分发网络）命中与服务端首字节链路。

热门面试题

1. 问题：输入 URL（统一资源定位符）后，为什么不能直接说“浏览器发了一个 HTTP（超文本传输协议）请求”？
   • 考点：导航前置步骤与故障分层。
   • 回答思路：先说明本地拦截与名称、连接、安全准备，再说明请求。
   • 详细答案：导航可能先命中内存缓存、磁盘缓存或 Service Worker（工作线程），也可能发生重定向；回源前还要完成 DNS（域名系统）解析、连接复用或建立、TLS（传输层安全）校验。把它缩成“一次请求”会掩盖证书、解析、边缘回源和首字节的不同证据。WMS（仓储管理系统）页面打不开时，我会先用瀑布图区分文档未到、文档到而资源阻塞、资源到而主线程阻塞三类问题。
   • 进阶追问：前端能否自行重试所有导航失败？
   • 进阶回答：不能。读取可做有限退避，但证书、鉴权、四百类契约错误和写请求不能盲重试；后端应提供可判定错误码、幂等查询与容量保护。
2. 问题：DNS（域名系统）、TCP（传输控制协议）和 TLS（传输层安全）分别在解决什么问题？
   • 考点：网络分层而非背术语。
   • 回答思路：按寻址、可靠传输、身份加密回答。
   • 详细答案：DNS（域名系统）把主机名映射为可连接地址；TCP（传输控制协议）提供面向连接的可靠有序字节流；TLS（传输层安全）在其上校验服务端身份并保护传输机密性与完整性。它们都不证明业务账户有权扣库存。后端仍要在收到请求后做登录态、权限、参数、幂等和审计校验。
   • 进阶追问：连接复用为什么有价值？
   • 进阶回答：它减少重复解析与握手成本，但复用连接不能替代资源优先级和服务端限流；连接拥塞时仍需看瀑布与后端容量证据。
3. 问题：如何向面试官解释 TTFB（首字节时间）高？
   • 考点：证据分层。
   • 回答思路：拆为浏览器到边缘、边缘到源站、源站处理三段。
   • 详细答案：TTFB（首字节时间）高说明浏览器迟迟未收到响应首字节，不等同于“数据库慢”。我会关联客户端瀑布、CDN（内容分发网络）命中标记、网关请求标识、Java（编程语言）服务耗时和依赖调用；只有源站处理段持续偏高才进入慢查询或线程池排查。没有线上采集链路时应标为待源码或现场核对。
   • 进阶追问：为何不能只用平均值判断？
   • 进阶回答：平均值会掩盖长尾与区域、缓存冷热差异；至少看分位数、样本量、版本和失败率。

浏览器（网页浏览器）进程、线程与隔离边界（补充）

浏览器（网页浏览器）通常将浏览器主控、网络、渲染、GPU（图形处理器）等职责分离；渲染进程内仍有主线程、合成相关线程和工作线程等边界。实现细节因浏览器（网页浏览器）与版本而异，面试重点是：JavaScript（脚本语言）、样式计算、布局和大量绘制会竞争主线程预算；Worker（工作线程）能转移适合的数据计算，但不能直接操作 DOM（文档对象模型）。

sequenceDiagram
  participant I as 输入线程
  participant M as 渲染主线程
  participant W as 工作线程
  participant G as 图形处理器进程
  I->>M: 投递点击任务
  M->>W: 转移大批量纯计算
  M->>M: 更新少量界面状态
  W-->>M: 返回聚合结果
  M->>G: 提交可合成图层
  G-->>I: 显示新帧

图解读（六要素）。 节点：输入、主线程、工作线程与 GPU（图形处理器）；箭头：任务、数据消息和图层提交；前提：计算不依赖直接 DOM（文档对象模型）访问；正常路径：主线程短暂提交，后台计算后合成；失败路径：把大计算留在主线程导致输入排队；观测：主线程长任务、帧时间与线程时间线；结论：线程分工是减少竞争，不是放弃状态一致性。

热门面试题

1. 问题：浏览器（网页浏览器）为什么采用多进程与多线程分工？
   • 考点：隔离、响应性与资源竞争。
   • 回答思路：先讲故障和安全隔离，再讲网络、渲染、合成的流水线协作。
   • 详细答案：多进程把站点渲染、网络和浏览器主控等故障域分开，单个页面崩溃不应直接破坏整个浏览器（网页浏览器）；渲染进程内部再用主线程、工作线程和合成线程分担任务。分工并不会消除同步、复制和调度成本，因此仍需用时间线证明瓶颈在哪条线程，而不能只看中央处理器总占用。
   • 进阶追问：进程越多是否一定越快？
   • 进阶回答：不一定；隔离会增加内存、上下文切换和通信成本，浏览器（网页浏览器）会在安全、稳定和资源之间取舍。
2. 问题：Worker（工作线程）为什么不能直接修改 DOM（文档对象模型）？
   • 考点：线程安全、所有权与消息传递。
   • 回答思路：说明 DOM（文档对象模型）由渲染主线程维护，再给出纯计算迁移边界。
   • 详细答案：若多个线程任意并发修改 DOM（文档对象模型），布局、样式和事件状态需要付出复杂同步成本，也容易产生不可预测竞态。工作线程适合解析、聚合和纯计算，通过消息返回不可变结果，由主线程校验版本后提交界面；大量消息的复制或序列化成本也必须测量。
   • 进阶追问：把所有计算都移到工作线程是否合理？
   • 进阶回答：不合理；短任务的启动和传输成本可能高于计算本身，且直接依赖界面的操作最终仍要回到主线程。
3. 问题：如何证明页面卡顿来自主线程而不是网络？
   • 考点：证据链与分段定位。
   • 回答思路：对齐输入时间、资源完成时间、长任务和下一帧呈现时间。
   • 详细答案：先固定操作和数据量，观察请求何时完成；若资源已经到达而输入事件长时间排队、主线程存在长任务且下一帧延迟，卡顿更可能来自脚本、样式、布局或绘制。若响应本身迟到，则继续拆解析、连接、等待和下载，并用请求标识关联后端，避免把相关性当成根因。
   • 进阶追问：中央处理器占用不高为什么仍会卡？
   • 进阶回答：总占用会稀释单核、短时长任务和关键线程排队，应看主线程时间线、输入延迟和帧预算。

3. 关键渲染路径与帧预算

3.1 HTML（超文本标记语言）/CSS（层叠样式表）解析、DOM（文档对象模型）、CSSOM（层叠样式对象模型）与渲染树

渲染进程流式解析 HTML（超文本标记语言）构建 DOM（文档对象模型），解析 CSS（层叠样式表）构建 CSSOM（层叠样式对象模型），再基于可见节点和计算样式建立渲染树。同步脚本可能依赖前面已解析的文档和样式，因而会阻塞解析器；这不是说所有脚本都“永远阻塞”，而是要按脚本属性、位置和依赖实际验证。

flowchart LR
  H[文档字节流] --> P[标记解析器]
  P --> D[文档对象模型]
  P --> S[样式表请求]
  S --> C[层叠样式对象模型]
  D --> R[渲染树]
  C --> R
  J[同步脚本] -.等待依赖并阻塞.-> P
  R --> L[布局]

图解读（六要素）。 节点：字节流、解析器、DOM（文档对象模型）、CSSOM（层叠样式对象模型）和渲染树；箭头：增量构建与依赖汇合；前提：文档和样式语法可解析；正常路径：两棵模型汇合生成可见渲染树；失败路径：关键样式或同步脚本拖住解析；观测：请求瀑布、解析时间和覆盖率；结论：关键渲染路径的目标是尽早获得正确的首屏输入。

数据演绎 3：关键样式的代价。 演练输入：文档 35 KiB（千字节）在 120 毫秒到达，首屏样式 18 KiB（千字节）在 260 毫秒才到，同步脚本执行 90 毫秒。状态变化：DOM（文档对象模型）可先增量建立，但首屏正确样式与脚本后的解析被推迟；事件顺序：文档解析、样式请求、样式到达、脚本执行、渲染树构建；观测：样式资源优先级、覆盖率和主线程切片；结论：若首屏只用到少量规则，应核对关键样式拆分，而不是把全站样式一股脑内联。

热门面试题

1. 问题：DOM（文档对象模型）和 CSSOM（层叠样式对象模型）为什么都影响首屏？
   • 考点：结构与样式共同决定可绘制内容。
   • 回答思路：说明可见节点需同时有结构和计算样式。
   • 详细答案：DOM（文档对象模型）告诉浏览器（网页浏览器）有哪些节点，CSSOM（层叠样式对象模型）告诉它哪些节点可见、尺寸与视觉规则。渲染树通常要综合二者才能进入布局；若关键样式迟到，贸然绘制可能造成明显闪烁或后续布局变化。优化应按首屏真实使用的规则、资源优先级和内容稳定性验证。
   • 进阶追问：是否应把所有样式内联？
   • 进阶回答：不应。全量内联会增大文档、失去缓存复用并增加维护成本；只对经测量的关键路径做有限处理，其余资源仍可版本化缓存。
2. 问题：同步脚本为何可能阻塞解析？
   • 考点：脚本可观察前序文档状态。
   • 回答思路：解释解析器暂停以保证可预测语义。
   • 详细答案：脚本可以读取、修改已解析节点并依赖样式信息，浏览器（网页浏览器）需在特定时机暂停解析以保证文档顺序语义。应减少首屏不必要同步脚本，审查是否可延后、拆分或按需加载；但安全、埋点、登录初始化等是否可延后必须结合业务与合规核对。
   • 进阶追问：如何确定某脚本真是阻塞源？
   • 进阶回答：看瀑布中的下载与执行时间、主线程火焰图及删除或延后后的对照实验，而不是仅看文件体积。
3. 问题：渲染树是否包含所有 DOM（文档对象模型）节点？
   • 考点：可见性与绘制边界。
   • 回答思路：区分结构树和可绘制节点集合。
   • 详细答案：不一定。不可见、无渲染盒或不参与当前绘制的节点不会以相同方式进入渲染树；具体细节随样式和浏览器（网页浏览器）实现变化。排查空白区域时要同时看 DOM（文档对象模型）是否存在、计算样式是否使其不可见，以及后续布局是否给了合理尺寸。
   • 进阶追问：后端能影响这一问题吗？
   • 进阶回答：能通过返回的模板数据、权限字段、缓存版本和响应错误影响可见内容，但不能替代浏览器的节点与样式诊断。

3.2 style（样式计算）、layout（布局）、paint（绘制）、composite（合成）与 GPU（图形处理器）

style（样式计算）确定规则匹配和计算值；layout（布局）计算盒模型与位置；paint（绘制）把文本、边框、阴影等记录为绘制指令；composite（合成）把图层组合成最终帧，常可利用 GPU（图形处理器）。改变几何属性常会影响布局，改变颜色可能只需要绘制，改变合成友好属性在条件满足时可主要走合成，但必须以实际性能记录为准。

sequenceDiagram
  participant J as 脚本任务
  participant S as 样式计算
  participant L as 布局
  participant P as 绘制
  participant C as 合成器
  participant G as 图形处理器
  J->>S: 修改类名或样式
  S->>L: 计算受影响几何
  L->>P: 生成绘制记录
  P->>C: 更新图层内容
  C->>G: 提交合成帧
  G-->>J: 显示下一帧

图解读（六要素）。 节点：脚本、样式、布局、绘制、合成器和 GPU（图形处理器）；箭头：受影响结果逐级传递；前提：主线程已获得执行机会；正常路径：只处理变更影响范围并提交帧；失败路径：频繁读取布局又写样式导致反复同步计算；观测：样式、布局、绘制和合成耗时；结论：优化要定位阶段，不把所有视觉卡顿都叫“重绘”。

数据演绎 4：列表展开的布局抖动。 演练输入：100 行库存列表，每行动画中读取一次尺寸并立即修改高度，共触发 100 次布局检查；改为先收集尺寸、下一帧统一写入后仅发生 1 次批量更新。状态变化：帧内主线程由 42 毫秒降到 11 毫秒；事件顺序：错误路径读写交错，正确路径读阶段与写阶段分离；观测：性能时间线布局事件和掉帧；结论：这里的数字只用于解释机制，具体阈值和收益待现场核对。

热门面试题

1. 问题：重排和重绘有什么区别？
   • 考点：渲染阶段定位。
   • 回答思路：用几何变化与像素变化区分，并说明二者非绝对一一对应。
   • 详细答案：布局变化通常需要重新计算盒子几何，常被口语称为重排；绘制变化把视觉内容重新记录或栅格化，常被称为重绘。几何变化往往还会带来后续绘制与合成，但具体优化效果应看浏览器（网页浏览器）记录。排障不能只背属性名单，必须看哪一阶段持续占用帧预算。
   • 进阶追问：把所有动画改成变换是否总正确？
   • 进阶回答：不总是。变换可能增加图层、模糊文字或改变命中与布局语义；应选择符合交互语义的实现并测量。
2. 问题：什么是强制同步 layout（布局）？
   • 考点：读写交错与延迟工作提前执行。
   • 回答思路：说明浏览器（网页浏览器）为返回最新几何而提前结算。
   • 详细答案：脚本刚修改可能影响几何的状态后立即读取布局结果，浏览器（网页浏览器）为了给出最新值可能被迫同步完成样式与布局。循环里反复这么做会把原可批量处理的工作切碎。应将读取集中在写入前，或把视觉更新安排在帧回调中。
   • 进阶追问：如何证明问题在这里？
   • 进阶回答：用性能记录定位脚本调用栈后的布局事件，构造先读后写的对照并检查帧时间变化。
3. 问题：Java（编程语言）后端在渲染性能上有什么责任？
   • 考点：前后端契约。
   • 回答思路：说明响应体、分页、字段稳定性与缓存头的影响。
   • 详细答案：后端应控制首屏响应大小、提供分页或窗口查询、给图片和数据稳定尺寸或元信息、返回可缓存且语义正确的响应头，并避免把未授权或无用大字段送到客户端。浏览器（网页浏览器）仍要负责脚本、样式和布局实现，双方应以真实瀑布和字段体积共同核对。
   • 进阶追问：接口快为何页面仍卡？
   • 进阶回答：响应到达后仍可能有 JSON（数据交换格式）解析、列表创建、图表绘制和长任务；应从网络结束点继续看主线程和渲染记录。

3.3 requestAnimationFrame（动画帧请求）、长任务与输入延迟

requestAnimationFrame（动画帧请求）让视觉更新在浏览器（网页浏览器）下一次绘制机会前执行，适合把多次状态变化合并为一帧；它不是后台计算器，也不保证固定帧率。长任务是长时间占住主线程的任务，会让输入、定时器、网络回调和绘制都排队。4.2.1 的任务与微任务解释了排队规则；本节只讨论它们如何侵占渲染机会。

sequenceDiagram
  participant U as 用户输入
  participant T as 主线程任务
  participant A as 动画帧请求
  participant P as 绘制合成
  U->>T: 点击与状态变更
  T->>A: 注册视觉更新
  alt 任务短且可让出
    A->>P: 帧前批量更新
    P-->>U: 输入后的新帧
  else 长任务占用
    T->>T: 连续计算
    U-->>T: 后续输入排队
    T-->>A: 很晚才获得帧机会
  end

图解读（六要素）。 节点：用户、主线程、动画帧请求和绘制合成；箭头：输入、注册、帧提交；前提：回调中只做短小视觉工作；正常路径：任务结束后在帧前批量写入；失败路径：长任务使新输入与帧回调排队；观测：长任务、INP（交互到下次绘制）和帧时间；结论：减少单次工作比追求固定帧率更可靠。

数据演绎 5：输入延迟。 演练输入：用户点击“展开报警明细”后，前面排了 75 毫秒批量格式化任务，交互处理 12 毫秒，绘制合成 18 毫秒。状态变化：用户看见新帧约在 105 毫秒后；事件顺序：排队 75、处理 12、呈现 18；观测：INP（交互到下次绘制）分解、长任务与调用栈；结论：只优化点击处理器 12 毫秒无法消除主要排队，应将格式化分批或移至 Worker（工作线程）。

热门面试题

1. 问题：requestAnimationFrame（动画帧请求）与定时器有什么不同？
   • 考点：绘制节奏与用途边界。
   • 回答思路：说明帧前调度与时间触发的不同，不承诺精确频率。
   • 详细答案：requestAnimationFrame（动画帧请求）面向下一次可绘制帧，适合合并视觉更新；定时器按最低延迟规则排入任务，受主线程忙碌和后台限制影响。二者都不能消除长任务，视觉更新应尽量短小，业务轮询还应由服务端状态和退避策略约束。
   • 进阶追问：动画帧回调里能做大数据计算吗？
   • 进阶回答：不应。它会直接挤占本应提交新帧的时间；大计算应按预算分批、转移到工作线程或请求服务端聚合。
2. 问题：长任务为什么影响网络响应的展示？
   • 考点：网络到达与主线程回调的差异。
   • 回答思路：区分字节到达、回调执行和最终绘制。
   • 详细答案：网络进程可以已收到响应，但解析回调、状态提交和页面绘制仍要等待渲染主线程。于是网络面板显示请求结束而页面没有更新，可能是主线程长任务而非接口慢。应关联请求结束时刻、任务队列和性能时间线。
   • 进阶追问：如何安全拆分任务？
   • 进阶回答：按数量或时间预算处理一批，保存可恢复游标与版本，下一批前让出执行权；写业务状态仍由服务端幂等与版本约束。
3. 问题：为什么不能把 INP（交互到下次绘制）只理解成点击函数执行时间？
   • 考点：排队、处理、呈现三段。
   • 回答思路：说明用户感知到的是下一个可见帧。
   • 详细答案：交互前可能有任务排队，处理器后还可能有样式、布局、绘制和合成；用户关心的是何时看见反馈。因此诊断应把 INP（交互到下次绘制）拆为排队、处理与呈现，并用真实用户样本和实验室记录互相印证。
   • 进阶追问：后端接口耗时是否计入？
   • 进阶回答：一次交互若必须等待接口，网络与服务端会影响最终反馈；但指标分析仍要分别记录客户端排队、网络等待与绘制，避免混淆责任。

4. 资源调度、缓存与本地存储

4.1 资源优先级、preload（预加载）、prefetch（预取）与 lazy（延迟加载）

浏览器（网页浏览器）会根据资源类型、发现时机、阻塞关系和策略调度下载。preload（预加载）用于已知且很快需要的关键资源；prefetch（预取）用于未来可能需要的低优先级资源；lazy（延迟加载）把非首屏图片、模块或数据推迟到需要时。它们的核心是带宽、解析和主线程预算分配，而不是“多发请求就一定更快”。

sequenceDiagram
  participant H as 文档解析器
  participant Q as 资源调度器
  participant N as 网络
  participant V as 视口
  H->>Q: 发现首屏样式与主图
  Q->>N: 高优先级请求关键资源
  H->>Q: 发现未来页面资源
  Q->>N: 低优先级预取
  V->>Q: 接近非首屏图片
  Q->>N: 触发延迟加载
  alt 带宽已被错误预加载占满
    N-->>Q: 关键资源排队变慢
  end

图解读（六要素）。 节点：解析器、调度器、网络与视口；箭头：资源发现、优先级请求和按需触发；前提：资源依赖与首屏边界已知；正常路径：关键资源优先，非关键资源延后；失败路径：预加载滥用挤占带宽；观测：优先级、启动时刻、字节数和未使用资源；结论：预加载是精确提示，不是通用加速开关。

数据演绎 6：资源优先级错配。 演练输入：首屏样式 28 KiB（千字节）、主图 90 KiB（千字节）、后台导出模块 400 KiB（千字节）。错误地预加载导出模块后，在受限带宽下主图开始下载晚 180 毫秒；移除后首屏资源优先。状态变化：首屏内容可更早完成，但导出入口首次打开需按需加载；观测：优先级、启动时刻、未使用字节；结论：必须用实际访问概率与瀑布验证，不能把所有模块预加载。

热门面试题

1. 问题：preload（预加载）和 prefetch（预取）如何选择？
   • 考点：当前路径与未来路径的资源意图。
   • 回答思路：用确定性、优先级和浪费成本回答。
   • 详细答案：当前首屏确定会使用、且发现过晚会阻塞渲染的资源才考虑 preload（预加载）；未来页面可能使用的资源才考虑低优先级 prefetch（预取）。错误预加载会和文档、样式、图片争用带宽，错误预取会增加无效流量和缓存压力。应由真实导航路径和资源瀑布验证。
   • 进阶追问：能否预加载敏感接口数据？
   • 进阶回答：不应仅为速度提前取得受权限、时效或用户意图约束的数据；后端仍应逐次授权，前端避免把敏感读副本写入不受控缓存。
2. 问题：lazy（延迟加载）会带来什么体验风险？
   • 考点：延迟转移而非消失。
   • 回答思路：说明滚动时网络、解码、布局与占位。
   • 详细答案：它降低初始工作，却可能把请求、解码和绘制推到用户滚动瞬间；没有稳定尺寸占位还会引发 CLS（累计布局偏移）。应给媒体尺寸或比例、提前少量预取并为失败显示可恢复状态，不能把图片永不加载误认为性能优化。
   • 进阶追问：后端怎样配合？
   • 进阶回答：提供适当尺寸、格式、缓存和授权下载策略，避免为列表首屏返回原始超大文件。
3. 问题：资源优先级能否替代代码分割？
   • 考点：下载顺序与总工作量。
   • 回答思路：说明排序不减少解析和执行总量。
   • 详细答案：优先级只决定在有限带宽与连接中谁先走，代码分割减少初始必须下载、解析和执行的代码量。二者应结合：先删掉首屏不需要的依赖，再为真正关键资源提供及时发现与合适优先级。
   • 进阶追问：如何发现拆分后请求过碎？
   • 进阶回答：观察关键路径是否出现串行模块瀑布、交互首次打开是否等待多个小块，并综合缓存命中与协议能力决定是否合并。

4.2 HTTP（超文本传输协议）缓存、CDN（内容分发网络）、Service Worker（工作线程）与版本化静态资源

强缓存由响应新鲜度策略决定，浏览器（网页浏览器）在新鲜期内可不发请求；协商缓存会带条件请求，服务端用 ETag（实体标签）或 Last-Modified（最后修改时间）判断是否仍可复用。Vary（变化维度）表示缓存键还依赖指定请求头。CDN（内容分发网络）可缓存边缘副本，但必须有失效、版本和回源策略。Service Worker（工作线程）可自定义请求拦截与 Cache Storage（缓存存储）使用，也因此能制造陈旧版本和缓存错配。

sequenceDiagram
  participant B as 浏览器（网页浏览器）
  participant W as 服务工作线程
  participant C as 边缘缓存
  participant O as 源站
  B->>W: 请求版本化脚本
  alt 本地缓存新鲜
    W-->>B: 返回可信本地副本
  else 需要校验
    W->>C: 带条件字段请求
    alt 实体标签匹配
      C-->>W: 三百零四，不传正文
      W-->>B: 复用缓存正文
    else 内容已变
      C->>O: 回源获取新版本
      O-->>C: 新正文与缓存策略
      C-->>W: 新副本
      W-->>B: 更新后返回
    end
  end

图解读（六要素）。 节点：浏览器（网页浏览器）、服务工作线程、边缘缓存和源站；箭头：本地命中、条件校验与回源；前提：缓存键、版本和响应头语义一致；正常路径：新鲜复用或校验后复用；失败路径：旧入口引用已删除资源或工作线程持有旧清单；观测：响应头、状态码、构建版本与命中标记；结论：缓存一致性靠版本契约，不靠“清空缓存”救火。

| 机制 | 是否发请求 | 服务端判断 | 适合对象 | 风险 | | --- | --- | --- | --- | | 强缓存 | 新鲜期内通常不发 | 发布时定义新鲜度 | 内容寻址静态资源 | 旧入口长期引用 | | ETag（实体标签）协商 | 需要校验时发 | 内容版本是否相同 | 高频变化读资源 | 错误实体标签 | | Last-Modified（最后修改时间） | 需要校验时发 | 修改时间比较 | 粗粒度内容 | 时间精度与时钟问题 | | Vary（变化维度） | 依赖缓存键 | 指定请求头差异 | 编码、语言等变体 | 键漏维度导致串内容 |

数据演绎 7：版本化静态资源。 演练输入：发布 A 的入口引用 app.a1.js，发布 B 改为 app.b2.js，入口文档短缓存、带散列的静态文件长缓存。状态变化：新导航取得 B 入口，旧文件可在保留窗口服务旧页面；错误方案若覆盖同名 app.js，边缘和浏览器（网页浏览器）可能拿到不同版本的文档与脚本。观测：构建散列、入口响应头、四百零四状态与错误版本；结论：散列名把一致性从“猜何时失效”变成“不同内容不同地址”。

热门面试题

1. 问题：强缓存和协商缓存的区别是什么？
   • 考点：新鲜复用与带条件校验。
   • 回答思路：按是否需要请求、谁定义新鲜度、如何确认变化回答。
   • 详细答案：强缓存允许浏览器（网页浏览器）在约定新鲜期内直接复用本地副本；协商缓存会带 ETag（实体标签）或时间条件向服务端确认，服务端可以返回无正文的未修改结果。它们都只适用于可安全缓存的资源；订单、库存、权限等权威状态必须有业务版本、授权与查询语义，不能只依赖浏览器缓存。
   • 进阶追问：为何 ETag（实体标签）常比时间更精确？
   • 进阶回答：它可表达内容版本而非仅依赖时间粒度，但生成策略、弱强语义和集群一致性仍需后端统一设计与核对。
2. 问题：Vary（变化维度）错配会造成什么事故？
   • 考点：缓存键与内容变体。
   • 回答思路：说明响应依赖请求头却未隔离的串内容风险。
   • 详细答案：若响应根据语言、编码或某个请求头变化，但缓存键没有包含必要维度，不同请求可能复用到错误副本，表现为语言错乱、压缩解码异常或错误内容。不要把用户身份放进共享缓存变体来解决权限问题；私有数据应由后端授权并选择私有或不缓存策略。
   • 进阶追问：缓存头由谁负责？
   • 进阶回答：后端、网关和 CDN（内容分发网络）共同定义响应语义，前端负责正确引用版本化资源和观测命中，不能单方面保证安全性。
3. 问题：Service Worker（工作线程）为什么既能离线加速又会造成事故？
   • 考点：可编程拦截与版本生命周期。
   • 回答思路：说明它能返回本地副本，也可能让旧副本长期生效。
   • 详细答案：Service Worker（工作线程）位于请求与网络之间，可用 Cache Storage（缓存存储）离线返回资源、选择网络优先或缓存优先策略。若更新策略、缓存名称、激活时机和旧资源保留不一致，入口、脚本和接口模式会错配。发布需有版本策略、降级方案、错误监控和可验证的清理路径。
   • 进阶追问：前端清缓存是否足够修复？
   • 进阶回答：不够。用户清理无法覆盖全部客户端，根因仍是服务端资源保留、入口缓存、工作线程生命周期和构建版本契约。

4.3 Cookie（浏览器小型数据）、Web（万维网） Storage（网页存储）、IndexedDB（索引数据库）与敏感数据

Cookie（浏览器小型数据）可随符合范围的请求携带，适合由服务端管理的会话标识；HttpOnly、Secure、SameSite 等属性应由服务端设置。Web（万维网） Storage（网页存储）适合少量非敏感偏好和临时界面状态，但脚本可读取，遇到 XSS（跨站脚本）风险较高。IndexedDB（索引数据库）与 Cache Storage（缓存存储）适合较多结构化或响应数据，却不是保存访问令牌、密码、支付信息或未加密个人数据的理由。

flowchart TD
  A[业务数据分类] --> B{是否敏感或可授权}
  B -->|是| C[服务端权威保存]
  C --> D[受属性约束的会话标识]
  B -->|否| E{是否需要离线或大容量}
  E -->|否| F[少量网页存储偏好]
  E -->|是| G[索引数据库或缓存存储]
  F --> H[登出与版本时清理]
  G --> H
  X[脚本可读令牌] -.跨站脚本窃取.-> Y[安全事故]

图解读（六要素）。 节点：数据分类、服务端、四类客户端存储和攻击路径；箭头：按敏感度与容量选择；前提：先定义数据用途、保留期和主体；正常路径：敏感权威数据留在后端，客户端只保存可丢弃副本；失败路径：脚本可读凭据被注入脚本读取；观测：存储键、登出清理、异常会话与审计；结论：存储选型首先是权限和泄露面问题。

数据演绎 8：过期令牌。 演练输入：会话凭据在服务端 30 分钟后失效，页面本地保留了“已登录”展示标志。状态变化：标志仍在不代表请求有权；事件顺序：接口返回未授权，前端清除本地派生状态并进入重新认证流程；观测：认证失败码、会话签发时间、登出事件；结论：客户端存储只能改善体验，真正过期、撤销和权限裁决必须由 Java（编程语言）后端完成。

热门面试题

1. 问题：访问令牌应放在哪里？
   • 考点：威胁模型而非唯一答案。
   • 回答思路：比较脚本窃取、跨站请求和服务端会话能力。
   • 详细答案：没有脱离架构的唯一答案。脚本可读存储在 XSS（跨站脚本）下暴露面大；受 HttpOnly、Secure、SameSite 约束的 Cookie（浏览器小型数据）减少脚本直接读取，但需配合 CSRF（跨站请求伪造）防护。应由后端定义会话、刷新、撤销、设备管理和审计，前端只实现最小暴露与明确失效处理。
   • 进阶追问：加密后放 Web（万维网） Storage（网页存储）是否安全？
   • 进阶回答：若解密密钥也在脚本可达范围，XSS（跨站脚本）仍可调用解密流程；加密不能替代内容安全、会话设计和服务端授权。
2. 问题：IndexedDB（索引数据库）适合存离线订单吗？
   • 考点：离线副本与权威状态分离。
   • 回答思路：说明它可存待提交意图或只读副本，但不裁决结果。
   • 详细答案：可以保存经最小化处理的草稿、待提交命令标识或非敏感读副本，以支持弱网恢复；恢复后仍要按用户、版本、幂等键和服务端状态重新校验。库存扣减、支付结果和权限不能因本地记录存在就视为成功，且登出、租户切换、版本升级必须清理或隔离。
   • 进阶追问：离线队列怎么避免重复提交？
   • 进阶回答：每个意图带稳定幂等键，服务端持久化判重并提供查询；前端恢复时先查询未知状态，再决定是否重发。
3. 问题：为什么客户端缓存也需要容量与生命周期治理？
   • 考点：空间成本、陈旧性与隐私。
   • 回答思路：从无界增长、跨账号残留和旧版本不兼容回答。
   • 详细答案：无上限缓存会增长磁盘占用并增加命中旧数据概率，账号切换可能看到前一主体的副本，应用升级可能无法解析旧结构。应定义键空间、最大容量、过期、版本、登出清理和失败降级，并以存储检查、错误报告和真实设备样本验证。
   • 进阶追问：谁决定私有数据能否缓存？
   • 进阶回答：服务端和安全策略定义数据分级与响应缓存语义，前端实现时不得扩大这些边界。

5. 同源策略与纵深防御

5.1 同源策略、CORS（跨域资源共享）与 preflight（预检）

同源策略限制一个源的脚本随意读取另一个源的受保护响应。CORS（跨域资源共享）是服务端通过响应头明确授权浏览器（网页浏览器）暴露跨源响应的机制，不是前端加一个请求头就能绕过的开关。满足条件的跨源写或带特定头的请求可能先发送 preflight（预检）；预检成功也不代表业务鉴权成功，Java（编程语言）后端仍必须逐次认证、授权、校验与审计。

sequenceDiagram
  participant P as 页面源
  participant B as 浏览器（网页浏览器）
  participant A as 接口源
  P->>B: 发起跨源请求
  B->>A: 预检请求
  alt 服务端明确允许
    A-->>B: 允许方法、头与来源
    B->>A: 实际请求与凭据
    A-->>B: 业务响应
    B-->>P: 暴露获准响应
  else 缺少或错误授权
    A-->>B: 拒绝或不匹配响应头
    B--x P: 拦截响应给脚本
  end

图解读（六要素）。 节点：页面源、浏览器（网页浏览器）和接口源；箭头：预检、实际请求和响应暴露；前提：来源、方法、头与凭据策略匹配；正常路径：服务端显式允许后浏览器暴露响应；失败路径：浏览器拦截给脚本；观测：预检请求、响应头与控制台错误；结论：CORS（跨域资源共享）是浏览器读响应的策略，后端鉴权不可省略。

数据演绎 9：跨域失败。 演练输入：前端从 https://console.example 调用 https://api.example，携带自定义追踪头和凭据；接口只返回了通配来源。状态变化：浏览器（网页浏览器）在凭据场景下不向脚本暴露响应；事件顺序：预检或实际响应的策略不匹配，控制台报 CORS（跨域资源共享）错误；观测：请求头、响应头、网关日志与浏览器控制台；结论：不要让前端改为关闭安全校验，应由网关按受信来源与凭据策略修正配置。

热门面试题

1. 问题：CORS（跨域资源共享）失败时，是否说明接口没有收到请求？
   • 考点：请求发送与响应暴露的差别。
   • 回答思路：说明预检和实际请求可能分别发生，不能凭页面错误猜测。
   • 详细答案：不一定。预检可能在实际请求前失败，也可能实际请求已到接口但浏览器（网页浏览器）因响应头不匹配不把结果交给脚本。应同时检查网络面板和服务端入口日志，确定是请求未发、预检拒绝、业务拒绝还是响应暴露被拦截，不能在前端把错误伪装成网络超时。
   • 进阶追问：能否在前端设置响应允许头？
   • 进阶回答：不能。授权信息必须由接口、网关或 CDN（内容分发网络）响应，前端请求头不能替自己授予读取权限。
2. 问题：为什么 CORS（跨域资源共享）不能替代鉴权？
   • 考点：来源声明与主体权限不同。
   • 回答思路：说明来源可用于浏览器策略，不是用户身份。
   • 详细答案：CORS（跨域资源共享）告诉浏览器（网页浏览器）某个网页来源能否读取响应，并不验证当前用户、租户、角色或业务对象归属。接口必须基于可信认证信息、服务端会话、权限模型和业务条件授权，并记录审计证据；非浏览器客户端根本不会被同源策略保护。
   • 进阶追问：来源头可否作为唯一安全依据？
   • 进阶回答：不可。它可辅助策略判断，但不能取代认证、授权、输入校验和速率控制。
3. 问题：如何减少不必要的 preflight（预检）成本？
   • 考点：请求形态与缓存的审慎设计。
   • 回答思路：先审查是否确有自定义方法和头，再由后端正确缓存允许结果。
   • 详细答案：应先删除无业务价值的自定义请求头和不必要复杂请求形态，保持接口契约清晰；服务端再在安全边界内配置允许来源、方法和预检结果的合理缓存。不可为减少预检而降低鉴权、把敏感接口改成公开读取或放宽通配来源。
   • 进阶追问：预检缓存是否永久可信？
   • 进阶回答：不是。权限、来源和部署策略变化时必须有失效与回滚方案，且实际请求仍需鉴权。

5.2 CSRF（跨站请求伪造）、XSS（跨站脚本）、CSP（内容安全策略）与点击劫持

CSRF（跨站请求伪造）利用浏览器（网页浏览器）自动携带的身份上下文诱导跨站写操作；XSS（跨站脚本）让攻击者脚本在可信源执行；CSP（内容安全策略）限制脚本、样式、图片等可加载与执行来源，是降低 XSS（跨站脚本）危害的纵深防御；点击劫持让受害页面被嵌入并诱导点击，应由服务端响应策略限制嵌入。它们必须与输出编码、输入验证、权限、审计、会话和上传处理共同构成防线。

sequenceDiagram
  participant A as 攻击页面
  participant B as 浏览器（网页浏览器）
  participant S as 业务服务
  A->>B: 诱导发起跨站写请求
  B->>S: 可能携带会话上下文
  alt 服务端校验来源与防伪令牌
    S-->>B: 拒绝并审计
  else 缺少写操作防护
    S-->>B: 发生非预期状态变更
  end
  B->>B: 内容安全策略阻止未知脚本

图解读（六要素）。 节点：攻击页面、浏览器（网页浏览器）和业务服务；箭头：诱导请求、身份上下文和拒绝；前提：用户已有有效会话；正常路径：服务端验证防伪凭据并审计；失败路径：仅凭 Cookie（浏览器小型数据）接受写操作；观测：拒绝日志、来源、令牌校验和 CSP（内容安全策略）报告；结论：前端提示不能替代服务端写操作保护。

数据演绎 10：上传与输出编码。 演练输入：用户上传名为 <img onerror=...> 的文件并在任务列表显示文件名。状态变化：错误实现将原文本直接作为 HTML（超文本标记语言）片段插入，攻击代码执行；正确实现将其按文本上下文编码，后端同时校验类型、大小、内容、存储路径和下载授权。观测：上传审计、内容扫描、页面 CSP（内容安全策略）报告；结论：前端编码是最后一道展示防线，后端不能信任文件名、声明类型或客户端校验。

热门面试题

1. 问题：CSRF（跨站请求伪造）和 XSS（跨站脚本）有什么核心差异？
   • 考点：攻击者是否能在可信源执行脚本。
   • 回答思路：分别说明借用浏览器会话与取得页面脚本执行权。
   • 详细答案：CSRF（跨站请求伪造）主要借用户已登录状态诱导浏览器（网页浏览器）发起请求，攻击页面通常读不到响应；XSS（跨站脚本）则让恶意脚本在可信源上下文运行，可读可改页面内容并发起同源请求。前者重点是服务端写操作的防伪与来源校验，后者重点是输入处理、上下文输出编码、CSP（内容安全策略）和最小权限。
   • 进阶追问：SameSite 是否消灭 CSRF（跨站请求伪造）？
   • 进阶回答：不是。它是会话 Cookie（浏览器小型数据）的重要缓解属性，但兼容、跨站业务流程和具体请求情形仍需服务端令牌、来源与权限校验。
2. 问题：CSP（内容安全策略）为何不是 XSS（跨站脚本）的唯一修复？
   • 考点：预防根因与减轻后果。
   • 回答思路：说明策略可能配置错误或无法覆盖所有危险数据流。
   • 详细答案：CSP（内容安全策略）能限制未知脚本来源、内联执行等，降低漏洞利用成功率，但不应成为把不可信输入直接拼接到 HTML（超文本标记语言）的借口。根因修复仍是服务端输入验证、按输出上下文编码、前端使用安全 DOM（文档对象模型）接口，以及依赖更新和安全测试。
   • 进阶追问：后端输出编码后前端还能再次处理吗？
   • 进阶回答：可以做展示级防御，但不能错误地二次解码；双方应明确字段是纯文本、可信富文本还是结构化数据，并以契约测试验证。
3. 问题：点击劫持如何处理？
   • 考点：嵌入限制与敏感操作保护。
   • 回答思路：说明响应头限制与服务端二次裁决。
   • 详细答案：服务端应通过适当响应策略限制敏感页面被非受信页面嵌入，并对转账、权限修改等操作要求重新认证或明确确认。前端可在受控嵌入场景展示状态，但不能把“页面没有被嵌入”当作唯一权限条件；所有写操作仍需服务端授权、风控与审计。
   • 进阶追问：前端检测顶层窗口是否足够？
   • 进阶回答：不够。脚本检测可被限制或绕过，可靠边界在服务端响应策略与业务授权。

5.3 令牌、上传、输出编码与前后端责任划分

安全设计采用最小权限与纵深防御：浏览器（网页浏览器）侧避免把秘密暴露给脚本、限制不可信内容进入危险执行路径、为错误提供非敏感提示；Java（编程语言）后端侧是唯一的认证、授权、对象归属、输入验证、文件扫描、输出编码策略、速率限制和审计裁决者。任何客户端校验都能改善体验，不能作为安全信任根。

flowchart LR
  U[用户输入或上传] --> F[前端格式与大小提示]
  F --> G[网关认证与限流]
  G --> V[后端类型、内容、权限校验]
  V --> O[安全对象存储]
  V --> A[审计事件]
  O --> D[受授权下载]
  X[不可信文本] --> E[上下文输出编码]
  E --> B[浏览器安全展示]
  F -.不能替代.-> V

图解读（六要素）。 节点：用户、前端、网关、后端校验、存储、审计与展示；箭头：输入从提示到强制校验；前提：权限模型和数据分级已定义；正常路径：后端验证后受控保存、下载再授权；失败路径：只相信前端或把不可信文本当可执行内容；观测：审计事件、拒绝原因、扫描结果与下载记录；结论：客户端是体验层，服务端是安全裁决层。

数据演绎 11：受授权下载。 演练输入：跨境物流报关附件生成后返回一个文件标识，而不是永久裸路径。状态变化：页面请求下载时携带当前会话，后端再核对用户、租户、任务归属和有效期；事件顺序：任务完成、页面显示可下载、下载接口二次授权、审计记录；观测：任务标识、下载拒绝码和审计链；结论：前端不能把可猜测文件路径或长期签名直接当作权限模型。

热门面试题

1. 问题：为什么前端文件校验不能替代后端校验？
   • 考点：不可信客户端。
   • 回答思路：说明请求可绕过页面，文件声明也可伪造。
   • 详细答案：攻击者可直接构造请求，修改扩展名、声明类型、大小甚至绕过页面逻辑。前端校验只用于尽早反馈；Java（编程语言）后端必须重新校验授权、大小、类型、内容特征、存储隔离、病毒或恶意内容扫描，并为下载进行二次授权与审计。
   • 进阶追问：图片文件为何也要谨慎？
   • 进阶回答：图片可能伪装、包含异常内容或被当作不同上下文处理；应按实际解析结果和安全策略处理，不能只信扩展名。
2. 问题：输出编码应由谁做？
   • 考点：上下文与多层责任。
   • 回答思路：说明服务端数据边界与前端最终渲染上下文都不可缺。
   • 详细答案：后端在形成页面、邮件、日志等输出时必须按相应上下文安全编码或返回结构化字段；前端在把不可信数据写入 DOM（文档对象模型）时必须选安全 API（应用程序接口）并避免危险拼接。两层是纵深防御，不应相互推责；富文本需求必须有明确白名单与净化策略。
   • 进阶追问：转义一次后就永远安全吗？
   • 进阶回答：不一定，数据可能被解码、拼接到不同上下文或二次解释；应保持数据语义，临近最终输出位置按上下文处理。
3. 问题：如何解释“前端不能做鉴权”？
   • 考点：体验校验与安全裁决。
   • 回答思路：承认前端可隐藏入口，但强调请求仍需后端授权。
   • 详细答案：前端可根据已知权限改善导航和提示，减少用户误操作；但脚本、代理请求、多标签页和旧页面都可绕过界面，因此服务端每次访问资源或状态变更时必须认证、授权、校验对象归属并记录审计。前端权限状态只能是展示副本，不是权威判断。
   • 进阶追问：接口返回四百零三时页面怎么办？
   • 进阶回答：显示不泄露敏感信息的拒绝状态，清理不应继续展示的副本，保留请求标识给排查；不能通过重试或改本地角色绕过。

6. 用户体验指标、观测与内存

6.1 LCP（最大内容绘制）、INP（交互到下次绘制）、CLS（累计布局偏移）、TTFB（首字节时间）与 RUM（真实用户监控）

LCP（最大内容绘制）关注主要内容何时可见，INP（交互到下次绘制）关注交互到下一次可见反馈，CLS（累计布局偏移）关注非预期视觉位移，TTFB（首字节时间）是响应首字节抵达的链路信号。RUM（真实用户监控）采集真实设备、网络、区域和路径上的样本；实验室指标用受控环境复现和诊断。二者是证据分层，不应把单次本地成绩说成生产结论。

数据演绎 12：实验室与真实用户。 演练输入：本地受控网络中 LCP（最大内容绘制）为 1.9 秒，而真实用户样本中低端设备第 75 分位为 3.4 秒。状态变化：不能把实验室结论直接推广；事件顺序：先按页面版本、设备能力、网络类型和区域分组，再对照资源和长任务；观测：样本量、分位数、发布版本和错误率；结论：实验室用于复现与归因，RUM（真实用户监控）用于发现真实分布，两者都待采集链路核对。

热门面试题

1. 问题：LCP（最大内容绘制）慢应先查什么？
   • 考点：最大内容元素与关键路径。
   • 回答思路：定位元素，再拆其资源、网络、解析和绘制时间。
   • 详细答案：先确认实际被计为主要内容的元素是主图、标题还是大块文本，再关联该元素的请求发现时机、下载、解码、样式、脚本与绘制。若资源本身迟到可查优先级和 CDN（内容分发网络）；若资源早到但迟绘制则看主线程和布局。所有判断应保留版本与样本条件。
   • 进阶追问：把图片换小是否必然改善 LCP（最大内容绘制）？
   • 进阶回答：可能改善下载与解码，但若主瓶颈是首字节、阻塞脚本或错误优先级，效果有限；需做对照测量。
2. 问题：CLS（累计布局偏移）如何避免？
   • 考点：预留稳定空间与异步内容策略。
   • 回答思路：说明媒体尺寸、占位、字体与动态模块。
   • 详细答案：为图片、广告、异步卡片和图表提供稳定尺寸或比例占位，避免在用户已经阅读或点击时突然插入内容；字体和动态数据也要评估是否改变几何。服务器返回可预知元信息能帮助前端预留空间，但页面最终布局控制仍在客户端。
   • 进阶追问：骨架屏会自动降低 CLS（累计布局偏移）吗？
   • 进阶回答：只有骨架与最终内容尺寸接近且替换方式稳定时才有帮助；尺寸不匹配的骨架同样会造成位移。
3. 问题：RUM（真实用户监控）与实验室测试如何配合？
   • 考点：发现、复现与归因闭环。
   • 回答思路：真实数据发现分布，受控测试复现具体版本和路径。
   • 详细答案：RUM（真实用户监控）按版本、设备、地区、页面和网络发现长尾退化，实验室用固定条件重放怀疑的关键路径并做方案对照。两者都需要隐私最小化、采样策略、关联标识和错误边界；没有实际埋点和看板时只能写待源码或现场核对。
   • 进阶追问：为什么要看分位数？
   • 进阶回答：用户体验常有长尾，均值会掩盖一部分用户严重退化；分位数要同时报告样本量和分组条件。

6.2 Performance（性能） API（应用程序接口）、资源瀑布、内存与事件监听泄漏

Performance（性能） API（应用程序接口）可在许可的浏览器（网页浏览器）能力范围内记录导航、资源和用户标记时间；资源瀑布用于区分发现、排队、连接、等待与下载。内存增长排障则需要结合堆快照、保留路径、事件监听器、定时器、缓存和路由操作。单次内存上升可能是正常缓存或垃圾回收时机，反复操作后持续增长才是更有力证据。

sequenceDiagram
  participant U as 用户
  participant P as 页面
  participant A as 性能接口
  participant M as 内存分析
  U->>P: 进入并离开同一路由多次
  P->>A: 标记请求、渲染与交互
  P->>M: 采集操作前后堆快照
  alt 监听器已清理
    M-->>P: 保留对象回落
  else 监听器或缓存未清理
    M-->>P: 保留路径持续增长
    P-->>U: 记录版本与最小复现
  end

图解读（六要素）。 节点：用户、页面、性能接口和内存分析；箭头：重复操作、标记、快照与诊断；前提：复现步骤、版本和数据量固定；正常路径：临时对象在清理窗口后可回收；失败路径：监听器或缓存保持可达；观测：堆保留路径、监听器数量、资源时间线；结论：内存问题以趋势和引用链证明，而非看一次总量。

数据演绎 13：事件监听泄漏。 演练输入：报警页每次进入注册 3 个全局监听器，离开时未解除；重复进入 20 次后监听器为 60 个，且每个闭包保留约 0.5 MiB（兆字节）查询结果。状态变化：理论保留约 30 MiB（兆字节）且同一事件触发多次回调；事件顺序：路由进入注册、离开遗漏清理、再次进入叠加；观测：堆保留路径、监听器计数、重复网络请求；结论：应让注册点与清理点成对，数字仅为演练。

热门面试题

1. 问题：资源瀑布如何区分网络慢和前端慢？
   • 考点：请求结束与渲染完成不是同一时刻。
   • 回答思路：先找请求结束，再看主线程是否仍被占用。
   • 详细答案：若资源瀑布显示文档、接口或图片很晚结束，先拆 DNS（域名系统）、连接、等待和下载；若资源已早到而内容仍未出现，继续看脚本执行、样式、布局、绘制和长任务。应将请求标识关联到 Java（编程语言）服务和 CDN（内容分发网络）日志，避免用前端截图猜后端瓶颈。
   • 进阶追问：Performance（性能） API（应用程序接口）能拿到全部跨域细节吗？
   • 进阶回答：受浏览器（网页浏览器）安全策略与服务端时序授权约束，可能被降精度或隐藏；不能因缺字段就绕过安全策略，应补服务端和边缘观测。
2. 问题：怎样证明内存泄漏而非正常缓存？
   • 考点：重复性、回收窗口与保留路径。
   • 回答思路：固定步骤多次执行，比较基线、回落和根引用。
   • 详细答案：在相同路由、数据量和版本下反复进入退出，等待合理清理窗口后比较多个快照；若对象数量与保留大小持续单调增加，且根路径指向全局监听器、计时器、未清缓存或断开的 DOM（文档对象模型），才有较强泄漏证据。正常受控缓存应有容量、命中和淘汰解释。
   • 进阶追问：能否依赖手动垃圾回收按钮？
   • 进阶回答：它只辅助验证可达性，不能替代真实用户设备上的生命周期和趋势观察。
3. 问题：事件监听器泄漏如何修复？
   • 考点：资源所有权。
   • 回答思路：让每次注册有对应清理，并避免匿名重复注册。
   • 详细答案：把监听器、计时器、订阅和可取消请求放在明确生命周期边界，保存可解除的引用，离开路由或组件销毁时成对清理；对全局单例订阅设唯一所有者和引用计数或集中管理。修复后仍要用重复路由、堆快照和事件次数做回归。
   • 进阶追问：后端如何协助？
   • 进阶回答：可提供可取消读取、分页与限量数据，记录异常重复请求；但前端资源释放仍是客户端责任。

7. 故障排查、恢复与证据分层

7.1 白屏、缓存错配与跨域失败

白屏至少可分为：文档未到或导航失败、文档到而关键资源阻塞、脚本运行时异常、入口与静态资源缓存错配、跨域响应被浏览器（网页浏览器）拦截、渲染结果不可见。缓存错配常表现为新入口引用资源失败，或旧 Service Worker（工作线程）返回与新接口结构不兼容的副本。排查应从用户可见症状沿网络、控制台、构建版本、缓存状态和服务端请求标识逐层取证。

sequenceDiagram
  participant U as 用户
  participant B as 浏览器（网页浏览器）
  participant C as 缓存层
  participant S as 服务端
  U->>B: 打开页面，出现白屏
  B->>C: 获取入口与脚本
  alt 入口与脚本版本匹配
    C-->>B: 返回可执行资源
    B->>S: 调用接口
    S-->>B: 正常响应
  else 缓存错配或跨域拦截
    C-->>B: 旧入口或缺失脚本
    B-->>U: 控制台错误、空白或降级页
    B->>S: 上报版本和请求标识
  end

图解读（六要素）。 节点：用户、浏览器（网页浏览器）、缓存层和服务端；箭头：入口、脚本、接口与错误证据；前提：错误上报不泄露敏感内容；正常路径：版本一致后进入业务请求；失败路径：缓存错配或策略拦截导致入口不可用；观测：构建散列、状态码、控制台与服务端日志；结论：白屏要按“文档、资源、执行、可见性”逐层排除。

数据演绎 14：缓存误命中。 演练输入：旧 Service Worker（工作线程）缓存的接口响应缺少新字段，页面新脚本假定字段存在并在渲染时抛异常。状态变化：网络可通但页面白屏；事件顺序：工作线程返回旧响应、脚本读取缺失字段、错误边界显示降级、上报应用版本与缓存键；观测：响应来源、缓存名称、构建散列和错误栈；结论：修复要同时处理客户端缓存迁移、接口向后兼容或显式版本，不是只让用户刷新。

热门面试题

1. 问题：白屏的最小排查顺序是什么？
   • 考点：从低成本、强证据到深入定位。
   • 回答思路：文档、资源、控制台、缓存、接口、可见性逐层检查。
   • 详细答案：先确认导航是否获得 HTML（超文本标记语言）文档和正确状态，再看关键脚本、样式、图片是否成功与版本匹配；接着查控制台异常、CORS（跨域资源共享）和 CSP（内容安全策略）拒绝；然后核对 Service Worker（工作线程）、缓存键和构建散列；最后检查 DOM（文档对象模型）、计算样式与布局。每一步带版本、时间和请求标识，避免凭印象跳到数据库。
   • 进阶追问：用户刷新后恢复，是否可以关闭问题？
   • 进阶回答：不能。刷新可能绕过暂态缓存，却未解释根因；应保留失败版本、缓存状态和资源路径，修复发布策略并做回归。
2. 问题：缓存错配为何容易发生在发布后？
   • 考点：入口、资源、接口与工作线程生命周期不同。
   • 回答思路：说明不同副本更新不是原子同步。
   • 详细答案：浏览器（网页浏览器）、CDN（内容分发网络）、入口文档、带散列资源、Service Worker（工作线程）和接口响应各有缓存与更新窗口。若新入口引用的旧资源已删除，或旧数据副本被新代码按新结构读取，就会发生错配。应以内容散列、资源保留、兼容契约、可控激活和监控实现一致性。
   • 进阶追问：后端接口怎样降低风险？
   • 进阶回答：对已发布客户端保持可预期的兼容窗口，使用明确版本或可选字段，避免无通知删除仍被旧客户端依赖的字段。
3. 问题：跨域失败如何判断是前端还是后端问题？
   • 考点：浏览器策略与接口配置协作。
   • 回答思路：先记录实际来源、方法、头、凭据和响应头，再查网关。
   • 详细答案：前端要确认请求目标、是否携带不必要自定义头和凭据，以及页面实际来源；后端或网关要核对预检、允许来源、方法、头、凭据与业务鉴权。浏览器（网页浏览器）执行拦截，但授权策略由服务端响应提供，因此不是简单归咎某一方。最终以网络记录和网关日志判定。
   • 进阶追问：开发代理为何不能证明生产没问题？
   • 进阶回答：本地代理改变了请求源和路径，生产域名、证书、CDN（内容分发网络）和网关策略可能不同，必须在接近生产的配置验证。

7.2 布局抖动、主线程阻塞、内存增长与恢复策略

布局抖动常来自无尺寸异步内容、读写交错或高频状态更新；主线程阻塞常来自大脚本、解析、序列化、图表绘制或第三方代码；内存增长常来自监听器、计时器、闭包、缓存和未释放资源。恢复策略应先保护用户：显示骨架或局部错误、避免重复写命令、保留可查询标识；再用性能记录、堆快照和服务端关联证据找根因。

sequenceDiagram
  participant U as 用户
  participant P as 页面
  participant T as 性能时间线
  participant S as Java服务
  U->>P: 交互后页面卡顿
  P->>T: 记录长任务、布局与内存
  alt 仅展示计算过重
    P->>P: 分批、取消旧任务或转移计算
    P-->>U: 局部恢复响应
  else 写命令结果未知
    P->>S: 按幂等键查询
    S-->>P: 返回权威状态
    P-->>U: 显示成功、失败或处理中
  end

图解读（六要素）。 节点：用户、页面、性能时间线和 Java（编程语言）服务；箭头：交互、证据采集、恢复与状态查询；前提：写命令有幂等键且页面不伪造结果；正常路径：展示计算通过切分恢复；失败路径：业务结果未知时查询而非重发；观测：长任务、布局、堆与服务端状态；结论：恢复先保护一致性，再追求流畅度。

数据演绎 15：恢复未知支付状态。 演练输入：支付确认请求在 10 秒后超时，客户端同时检测到 140 毫秒主线程长任务。状态变化：按钮从“发送中”转“待确认”，而不是“失败”；事件顺序：先终止可取消的展示计算、保留幂等键、调用查询接口、按服务端状态更新；观测：长任务调用栈、请求标识、支付状态和审计事件；结论：性能故障不能成为重复扣款的理由，业务一致性优先于立即重试。

热门面试题

1. 问题：布局抖动如何系统排查？
   • 考点：可见位移来源与时序。
   • 回答思路：先定位发生位移的元素，再反查其尺寸、资源和状态更新。
   • 详细答案：通过布局位移记录找到受影响元素和触发时间，检查它是否由无尺寸图片、字体、异步卡片、广告位、图表或脚本读写交错造成。修复优先建立稳定尺寸契约与占位，再把批量状态变化合并到合适帧；不要靠强行禁用所有动画掩盖真实结构问题。
   • 进阶追问：接口字段变化会引起布局抖动吗？
   • 进阶回答：会。后端返回异常长度文本、缺少尺寸元信息或延迟插入模块都可能改变布局，因此契约需包含展示边界和降级值。
2. 问题：主线程阻塞时为什么不能只“加防抖”？
   • 考点：减少触发频率与减少单次成本不同。
   • 回答思路：说明防抖对每次仍然昂贵的工作无能为力。
   • 详细答案：防抖可降低连续输入触发次数，但若最终一次仍要同步解析巨量数据、创建大量节点或绘制大图表，用户仍会遇到长任务。应先测量单次工作，做分页、窗口化、增量处理、工作线程聚合或服务端下推，并保证筛选版本与取消语义正确。
   • 进阶追问：如何判断是第三方脚本？
   • 进阶回答：从时间线调用栈、资源来源和版本定位，做受控禁用或延后对照；不能在没有证据时直接指责供应商。
3. 问题：内存持续增长时，何时应优先修复而不是加大缓存？
   • 考点：泄漏风险与容量治理。
   • 回答思路：只要无界趋势和可达根清晰，就先消除泄漏。
   • 详细答案：若重复同一操作后对象、监听器或缓存持续增长且无业务上限、保留路径指向不再需要的资源，应优先修复生命周期错误；增加设备内存或缓存上限只会延后崩溃。若确属受控缓存，才根据命中收益、大小、淘汰和隐私边界调优。
   • 进阶追问：怎样保证修复不破坏业务？
   • 进阶回答：在清理前明确资源所有者与取消语义，保留未完成写命令的查询能力；用重复路由、弱网和未知态测试验证。

8. 设计思想与证据分层

设计思想与证据分层（补充）

本篇可归纳为五个设计判断：关键渲染路径优先保障用户尽早看到正确内容；流水线并行让网络、解析、计算与合成在适当边界重叠，但主线程仍是稀缺资源；缓存用空间与一致性复杂度换时间和带宽；最小权限和纵深防御把单点遗漏的破坏面压小；所有优化都必须以“事实、测量、推断、待核对”分层表达。对简历项目而言，应把 WMS（仓储管理系统）页面、跨境物流附件、支付未知态、Runner（执行器）任务和 IoT（物联网）大数据看板的前端表现连接到后端权威状态，而不虚构生产指标。

flowchart TD
  E0[待核对事实] --> E1[直接证据：配置、响应、记录]
  E1 --> E2[机制推断：网络、渲染、安全]
  E2 --> D[设计决策]
  D --> M[测量与回归]
  M --> R[可复述的项目话术]
  X[未测量的结论] -.禁止包装为事实.-> R

图解读（六要素）。 节点：待核对事实、直接证据、机制推断、决策、测量和话术；箭头：证据逐层支撑结论；前提：保留版本、环境、样本和链接；正常路径：先测量再形成项目表达；失败路径：把通用知识或单次演练写成线上事实；观测：审计清单、图表渲染和链接可达性；结论：高级回答的可信度来自可复查边界。

热门面试题

1. 问题：前端优化为什么必须先定义证据等级？
   • 考点：事实、推断和演练边界。
   • 回答思路：区分源码配置、真实监控、受控实验和待核对结论。
   • 详细答案：同一个“页面更快”可能来自真实用户监控、实验室复现、代码机制推断或主观感受，可信度完全不同。回答时应带上版本、设备、网络、样本量和操作路径；只有可复现、可关联的证据才能支撑项目效果，通用原理只能说明为什么值得验证。
   • 进阶追问：没有线上指标还能回答吗？
   • 进阶回答：可以诚实给出机制、测量方案和演练结果，但必须把实际收益标为待核对，不能编造生产数字。
2. 问题：缓存为什么体现以空间和一致性复杂度换时间？
   • 考点：副本、失效和权威边界。
   • 回答思路：从命中收益讲到版本、过期、清理和错误副本风险。
   • 详细答案：缓存用额外存储和副本管理减少计算、网络与回源延迟，但每个副本都引入键设计、过期、失效、主体隔离和版本兼容成本。静态资源可依靠内容散列长缓存，库存和支付等权威状态则不能由浏览器（网页浏览器）副本裁决；出现未知态时应查询后端而非相信陈旧页面。
   • 进阶追问：命中率越高是否越好？
   • 进阶回答：不一定；错误、越权或过期副本的高命中会放大事故，必须同时看正确性、新鲜度和恢复成本。
3. 问题：如何把一次性能修复讲成可信的项目话术？
   • 考点：问题、证据、决策、验证和边界。
   • 回答思路：按现象、分段证据、根因、方案、回归和未覆盖风险组织。
   • 详细答案：先描述用户可感知现象和固定复现脚本，再展示资源瀑布、主线程、渲染和服务端链路如何缩小故障域；随后说明为什么选择分包、分页、虚拟化或缓存，以及未选方案的代价。最后用同一条件复测正确性、分位数和错误率，并明确数据属于真实监控还是演练。
   • 进阶追问：只给优化前后平均值有什么问题？
   • 进阶回答：平均值缺少样本、长尾、版本和错误率，无法排除流量组成变化，也不能证明业务结果未被破坏。

9. 综合题库（34 题）

每题的“口述答案”均为 560 至 1000 字符的演练稿，真实指标、项目配置与线上链路均须在使用前核对。外链用于核验机制原文，不是替代项目证据。

综合题 1：从 URL（统一资源定位符）到首屏可见，如何讲完整链路？

口述答案： 我会先把导航拆为本地策略、网络链路和渲染链路。浏览器（网页浏览器）解析 URL（统一资源定位符）后，可能先经过缓存或 Service Worker（工作线程），回源才涉及 DNS（域名系统）、连接复用或 TCP（传输控制协议）建连、TLS（传输层安全）校验、HTTP（超文本传输协议）请求和 CDN（内容分发网络）命中。拿到文档字节后，渲染进程增量构建 DOM（文档对象模型），关键 CSS（层叠样式表）形成 CSSOM（层叠样式对象模型），二者生成渲染树，再经过 style（样式计算）、layout（布局）、paint（绘制）和 composite（合成）显示。若首屏慢，我不会立刻说“前端包大”，而是用瀑布定位首字节、资源发现、下载、脚本执行还是绘制；再关联边缘命中、网关和 Java（编程语言）服务请求标识。WMS（仓储管理系统）页面只可把库存作为读副本展示，是否有货仍由后端状态和权限裁决。机制核验可查 MDN 导航。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：TTFB（首字节时间）慢是否等于数据库慢？
  • 直答：不等于；它可能由解析、握手、边缘回源、网关排队或服务端任一依赖造成，需分段关联。
• 追问 2：为什么文档到达后仍可能白屏？
  • 直答：关键资源阻塞、脚本异常、缓存错配、策略拦截或样式使内容不可见都可能发生。
• 追问 3：前端能为导航失败做什么？
  • 直答：展示明确降级、记录非敏感证据、对可安全读取有限重试；证书、权限和写操作不能盲重试。

综合题 2：如何定位“接口很快但页面很慢”？

口述答案： 我会把“接口很快”限定为网络请求何时结束，而不是用户何时看见结果。首先从资源瀑布确认响应下载完成时刻，再查看渲染主线程之后是否有 JSON（数据交换格式）解析、大数组转换、节点创建、图表绘制、样式计算、布局或绘制。若网络结束后仍有长任务，用户输入和 requestAnimationFrame（动画帧请求）会排队，INP（交互到下次绘制）因此变差。IoT（物联网）报警风暴看板是典型场景：服务端应按权限、窗口和聚合返回可展示的数据，前端只处理必要点数；若本地转换仍重，应分批或转至 Worker（工作线程），并对消息加版本以丢弃旧筛选结果。不能用防抖掩盖单次 100 毫秒计算，也不能将大图表数组无上限缓存。验证要同时记录接口耗时、主线程火焰图、帧时间、堆变化和页面版本；没有实测数据时明确待核对。机制可查 web.dev 长任务。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：Worker（工作线程）能直接更新图表吗？
  • 直答：通常不能直接操作 DOM（文档对象模型）；它返回计算结果，主线程仍负责受控提交。
• 追问 2：如何避免旧筛选结果覆盖新结果？
  • 直答：请求和工作消息带单调版本，提交前比较当前版本，不匹配就丢弃。
• 追问 3：后端为什么仍应分页？
  • 直答：客户端转移计算不降低网络、解析、内存和权限风险，权威窗口与总量控制在后端更可靠。

综合题 3：如何设计版本化静态资源与缓存发布？

口述答案： 我会将入口文档、带内容散列的静态资源、CDN（内容分发网络）副本和 Service Worker（工作线程）看成不同生命周期的副本。静态脚本、样式和图片用内容散列命名，使不同内容拥有不同地址，可以较长时间缓存；入口文档使用较短新鲜期或协商策略，确保新导航能引用新散列；发布时保留旧散列资源一段兼容窗口，防止已打开旧入口的用户请求四百零四。若使用 Service Worker（工作线程），缓存名称、激活时机、旧缓存清理、接口结构兼容和失败回退必须一并设计。缓存命中不能取得库存、支付或权限裁决权，敏感响应不应被共享缓存扩散。排障时我会记录入口版本、资源散列、响应头、命中标记、工作线程版本和错误栈，区分缓存错配与普通脚本缺陷。具体缓存语义可核验 MDN 的 HTTP（超文本传输协议）缓存。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：为什么不覆盖同名 app.js？
  • 直答：边缘、浏览器（网页浏览器）和入口可能不同步，覆盖会使新旧副本混用，散列地址能显式区分内容。
• 追问 2：ETag（实体标签）是否适合所有资源？
  • 直答：适合需要校验的可复用资源；内容散列静态文件常可直接用长新鲜期，私有权威数据需另行设计。
• 追问 3：如何修复已经发生的缓存错配？
  • 直答：先保留或恢复被引用资源、提供兼容回退，再修正入口和工作线程更新策略并回归验证。

综合题 4：如何解释 Service Worker（工作线程）的安全与一致性边界？

口述答案： Service Worker（工作线程）可在浏览器（网页浏览器）请求路径中拦截并选择网络、Cache Storage（缓存存储）或离线副本，适合提升版本化静态资源和非敏感读取的可用性。它的风险是旧脚本可能继续控制页面、旧缓存可能返回与新代码不兼容的数据、错误的缓存优先策略可能掩盖服务端状态变化。因此我会把它视为一次有版本的客户端发布：缓存键必须区分应用版本和主体边界，更新时需考虑等待中的旧页面，登出或租户切换必须清理私有副本，写命令不能离线伪造成功而应保存幂等意图并在恢复后查询权威状态。对于支付资金一致性，离线只能显示待确认，不能把本地缓存的“提交成功”当成最终结果。观测至少包括工作线程版本、命中来源、缓存大小、网络回退率和白屏错误；具体生命周期可查 MDN 的 Service Worker（工作线程）。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：缓存优先为什么会过期？
  • 直答：它优先复用旧副本，若没有版本、过期或网络校验策略，就可能长期看不到服务端变化。
• 追问 2：离线队列如何避免重复扣款？
  • 直答：只保存带幂等键的用户意图，恢复后先查询服务端状态，最终由后端状态机裁决。
• 追问 3：能缓存登录后的接口响应吗？
  • 直答：仅在数据分级、主体隔离、过期和撤销都明确时审慎缓存；默认不能把私有响应当共享静态资源。

综合题 5：同源策略与 CORS（跨域资源共享）应怎样向后端团队说明？

口述答案： 我会说明同源策略是浏览器（网页浏览器）阻止网页脚本任意读取其他源响应的默认机制，CORS（跨域资源共享）则是接口通过响应头明确告诉浏览器哪些来源、方法、请求头和凭据组合可以读取响应。它不是鉴权，也不是前端在请求里添加一个字段就能绕过。出现错误时，先确认页面实际来源、接口源、是否有自定义头和凭据，再查网络面板确认预检是否发生、允许头是否匹配，最后在网关和 Java（编程语言）服务日志中确认实际请求是否到达及业务是否授权。后端应对每个请求做身份、角色、租户和对象归属校验，不能只相信来源头；前端不应为绕过问题关闭校验或在生产使用宽松代理。跨境物流前端读取附件列表时，即使 CORS（跨域资源共享）允许，也必须由服务端再次核验下载主体。规范细节可查 MDN CORS。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：预检成功是否说明用户有权限？
  • 直答：不说明；预检只讨论浏览器策略，实际请求仍必须经过认证、授权与业务校验。
• 追问 2：CORS（跨域资源共享）错误为什么有时服务端仍有日志？
  • 直答：实际请求可能已到达，只是响应未被浏览器（网页浏览器）暴露给脚本；需结合瀑布判定。
• 追问 3：能否允许所有来源？
  • 直答：公开、无凭据、无敏感数据的资源才可能考虑；带会话或私有数据必须最小白名单并仍鉴权。

综合题 6：如何设计 CSRF（跨站请求伪造）防护？

口述答案： CSRF（跨站请求伪造）的关键是用户已登录时，攻击站诱导浏览器（网页浏览器）向受信服务发起写操作，自动携带的会话上下文可能让后端误以为是用户意图。设计时不能只依赖页面按钮禁用：后端必须对状态变更接口校验与当前会话绑定的防伪令牌、合适的来源或站点信息、权限和业务状态，同时把 Cookie（浏览器小型数据）设为合适的 SameSite、Secure、HttpOnly 属性。前端负责从受信页面携带规定的防伪数据、在过期或拒绝时进入明确状态；它不能生成一个服务端不验证的随机值来假装防护。支付或库存操作还要有幂等键、版本和审计，因此即便攻击请求到达也无法越过账户、对象和状态迁移检查。验证应包含跨站表单、跨站脚本、会话过期和多标签页场景。背景可查 OWASP CSRF 防护。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：SameSite 是否足够？
  • 直答：不够；它是缓解层，仍需服务端防伪令牌、来源校验、权限和审计。
• 追问 2：读取接口也需要同样强度吗？
  • 直答：读取也要鉴权与数据最小化，但 CSRF（跨站请求伪造）主要针对产生副作用的写操作。
• 追问 3：令牌校验失败前端如何处理？
  • 直答：显示可恢复提示、刷新受信会话或重新认证，并保留幂等查询入口，不盲目重复写入。

综合题 7：如何防御 XSS（跨站脚本）并分清前后端责任？

口述答案： XSS（跨站脚本）的根因是把不可信数据放入可执行或可解释的输出上下文，攻击者因此在受信页面权限内读取界面、调用接口或窃取可读凭据。前端首先应使用安全的 DOM（文档对象模型）渲染接口，把普通文本作为文本而非拼成 HTML（超文本标记语言），不要把服务端字段、查询参数或文件名直接交给危险插入路径；确有富文本需求时要有严格白名单与净化流程。后端不能假定前端已处理：必须验证输入、按 HTML（超文本标记语言）、属性、URL（统一资源定位符）或脚本等最终输出上下文编码，限制危险附件和下载内容。CSP（内容安全策略）再限制脚本来源、内联执行和违规报告，作为纵深防御而非根因修复。令牌设计也要避免让高价值秘密轻易被脚本读取。排查使用输入样本、输出位置、CSP（内容安全策略）报告和审计日志闭环。指南可查 OWASP XSS 防护。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：后端已转义，前端还要注意吗？
  • 直答：要；字段可能进入不同上下文或被二次解释，最终渲染位置仍需使用安全接口。
• 追问 2：CSP（内容安全策略）能修复拼接漏洞吗？
  • 直答：不能替代修复；它降低利用概率，根因仍是不可信数据进入危险执行路径。
• 追问 3：文件名为什么也危险？
  • 直答：文件名同样是不可信输入，展示、下载头和日志都需按各自上下文处理。

综合题 8：如何解释点击劫持与敏感操作保护？

口述答案： 点击劫持利用透明或伪装的嵌入页面诱导用户在不知情情况下点击受信页面的按钮。它的第一层修复是由服务端响应策略限制敏感页面被不受信源嵌入，并在需要合作嵌入的场景使用最小白名单；前端可对高风险操作显示清晰上下文、二次确认和最近认证提示，但不能依赖脚本检测自己是否在顶层窗口。更重要的是，后端必须让每个操作重新经过用户身份、对象归属、权限、金额或库存状态、风控和审计校验，因此单次被诱导点击不应绕过交易边界。支付资金一致性场景还应把“点击受理”与“最终处理”分开，页面只显示服务端返回的处理中或最终状态。测试需覆盖恶意嵌入、可信嵌入、移动端和会话超时，不因安全头导致合法集成失效。策略说明可查 OWASP 点击劫持防护。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：前端跳出框架脚本为何不足？
  • 直答：它可能被浏览器（网页浏览器）策略、沙箱或攻击环境限制，可靠限制应在服务端响应策略。
• 追问 2：是否所有页面都禁止嵌入？
  • 直答：按业务需要决定；公开嵌入与敏感写操作页面的风险不同，应最小授权而非一刀切。
• 追问 3：二次确认能替代授权吗？
  • 直答：不能；它改善用户意图确认，服务端授权和审计仍是安全裁决。

综合题 9：如何把 Cookie（浏览器小型数据）与 Web（万维网） Storage（网页存储）选型说清楚？

口述答案： 我不会把存储选型当作某个框架的固定偏好，而是先问数据是否敏感、是否需要随请求携带、是否必须跨刷新恢复、是否需要离线和登出清理。Cookie（浏览器小型数据）可由服务端设置 HttpOnly、Secure、SameSite 等属性，适合受控会话标识，但要配合 CSRF（跨站请求伪造）防护与服务端撤销；Web（万维网） Storage（网页存储）更适合主题、表格列宽、草稿等非敏感展示状态，因为脚本可以读取它，XSS（跨站脚本）会扩大泄露面。IndexedDB（索引数据库）和 Cache Storage（缓存存储）适合较大、可丢弃、受版本控制的离线副本，但不能让本地副本取代订单、库存、支付和权限的权威状态。所有存储都要有主体隔离、版本、容量、过期和登出清理。会话设计原则可查 MDN Set-Cookie。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：把令牌加密后放本地存储就安全吗？
  • 直答：若脚本能取得密钥或调用解密流程，XSS（跨站脚本）仍可利用；加密不替代会话与内容安全设计。
• 追问 2：页面刷新后如何恢复未知写操作？
  • 直答：持久化最小命令标识或由服务端查询，刷新后按幂等键查状态，而不是存最终成功结论。
• 追问 3：用户切换租户要做什么？
  • 直答：清理或严格隔离旧主体的客户端副本，并由服务端重新授权，防止跨租户展示。

综合题 10：如何治理 IndexedDB（索引数据库）离线数据？

口述答案： IndexedDB（索引数据库）适合保存比 Web（万维网） Storage（网页存储）更大的结构化客户端副本，例如非敏感字典、草稿、离线读取结果或待恢复的命令标识，但我会先定义它是“缓存、草稿还是队列”，而不是泛化成离线数据库。每条数据应包含主体、租户、业务版本、写入时间、过期时间和应用版本；登出、切换主体、权限变化和版本升级时必须清理或迁移。对于 WMS（仓储管理系统）库存修改，离线只能保存用户意图和幂等键，恢复网络后必须由 Java（编程语言）后端重新校验库存、权限和业务版本，再返回处理中、成功或失败。客户端应设置容量与淘汰上限，记录失败、迁移和清理事件，避免将临时缓存变成无界磁盘占用。浏览器（网页浏览器）可随空间策略清理存储，所以关键业务不能只存在本地。基础能力可查 MDN IndexedDB。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：离线副本为何要带租户？
  • 直答：否则账号或租户切换时可能展示前一主体的数据，造成越权泄露。
• 追问 2：迁移失败怎么办？
  • 直答：保留可安全丢弃的缓存原则，失败时清理并回源重建，不能损坏权威服务端数据。
• 追问 3：是否缓存所有接口？
  • 直答：不应；按敏感度、访问收益、失效和主体隔离选择，默认不缓存私有权威状态。

综合题 11：如何优化 LCP（最大内容绘制）？

口述答案： LCP（最大内容绘制）不是单纯图片体积指标，而是用户看到主要内容的完整关键路径。我会先确认被计为 LCP（最大内容绘制）的元素，再看它的文档发现时机、资源优先级、DNS（域名系统）与连接、CDN（内容分发网络）命中、下载与解码，以及是否被关键 CSS（层叠样式表）或主线程脚本阻塞。若它是商品或库存看板主图，后端应提供合适尺寸、格式、缓存策略和访问控制，前端用稳定空间避免 CLS（累计布局偏移），并在确有证据时使用 preload（预加载），而不是预加载所有图片。若元素早已下载却迟迟未出现，应转向脚本、样式、布局和绘制排查。实验室记录用于在固定设备与网络复现，RUM（真实用户监控）按版本和设备发现真实长尾；所有数字标为演练或待核对。指标定义可查 web.dev LCP。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：主图压缩后仍慢可能为何？
  • 直答：资源可能发现晚、首字节慢、优先级低，或下载后被长脚本和布局阻塞。
• 追问 2：文字能成为 LCP（最大内容绘制）元素吗？
  • 直答：能；应定位实际最大内容元素，而非预设一定是图片。
• 追问 3：后端怎样配合？
  • 直答：提供快速首字节、合适媒体变体、缓存与稳定元信息，且不向首屏发送无用大字段。

综合题 12：如何改善 INP（交互到下次绘制）？

口述答案： INP（交互到下次绘制）衡量从一次用户交互到下一次可见反馈的完整体验，我会拆成输入前排队、事件处理和处理后呈现三段。首先用性能时间线找长任务：它可能来自列表全量过滤、JSON（数据交换格式）转换、第三方脚本、布局读写交错或大图表绘制；然后将可独立的纯计算按时间预算分批或交给 Worker（工作线程），给请求与计算加版本以忽略陈旧结果；最后把视觉写入合并到 requestAnimationFrame（动画帧请求）并避免一帧内反复强制 layout（布局）。后端并非没有责任，若接口返回超大响应、没有分页或无法按视口聚合，客户端仍会被迫处理过多数据。对于支付和库存写入，性能退化时优先显示“处理中/待确认”，由幂等键查询权威状态，不能为追求立即反馈重复提交。验证要对比同版本、同路径的真实用户样本与实验室调用栈。机制可查 web.dev INP。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：防抖为何不是完整方案？
  • 直答：它减少触发次数，不降低最终一次的计算、布局和绘制成本。
• 追问 2：如何避免 Worker（工作线程）旧结果覆盖？
  • 直答：携带版本或参数摘要，主线程只接受与当前意图一致的结果。
• 追问 3：接口慢是否一定拉高 INP（交互到下次绘制）？
  • 直答：若交互必须等待接口会影响最终反馈，但仍要区分网络等待和客户端排队呈现。

综合题 13：如何控制 CLS（累计布局偏移）？

口述答案： CLS（累计布局偏移）关注用户已开始阅读或操作后，页面元素非预期移动造成的视觉不稳定。我的排查起点是记录中发生偏移的元素与时间，再反查是否有无尺寸图片、异步插入的卡片、字体切换、广告位、图表容器或接口字段长度异常。修复上，前端为媒体与动态区域提供宽高或比例占位，让骨架与最终内容几何一致，避免把新内容插到用户当前操作区域上方；对于列表、WMS（仓储管理系统）库存状态和跨境物流进度等异步数据，后端可提供稳定的媒体元信息、合理长度边界和空状态契约。不能通过遮掩动画或延迟所有内容来假装无位移，必须验证真实布局结果。实验室可复现某个页面版本，RUM（真实用户监控）可发现设备和网络差异；指标结论需带样本与版本。定义可查 web.dev CLS。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：骨架屏为何可能加重 CLS（累计布局偏移）？
  • 直答：骨架与最终内容尺寸不一致时，替换仍会推动其他元素移动。
• 追问 2：接口数据能影响布局稳定吗？
  • 直答：能，缺少尺寸、异常长文本或迟到模块都会改变几何，需要契约和前端约束。
• 追问 3：用户主动点击后位移是否都算问题？
  • 直答：用户预期的交互变化与非预期跳动不同，仍应按具体时机和体验判断。

综合题 14：如何建立 RUM（真实用户监控）与实验室指标体系？

口述答案： 我会先明确 RUM（真实用户监控）回答“真实用户在哪些版本、设备、路径和网络上退化”，实验室测试回答“在可重复环境下为何退化、改动是否有因果收益”。客户端采集导航、资源、LCP（最大内容绘制）、INP（交互到下次绘制）、CLS（累计布局偏移）、错误和必要的非敏感上下文；服务端关联请求标识、网关耗时、CDN（内容分发网络）命中、Java（编程语言）服务和依赖耗时。聚合时按版本、页面、区域、设备能力和网络分组，看分位数、样本量、错误率和发布前后趋势，不只看平均值。实验室则固定数据、设备和网络，记录瀑布、主线程、布局和堆快照，形成可回归的对照。隐私上只采最小必要字段，不把令牌、订单明细或个人信息送入前端监控。当前项目是否已有埋点与告警必须标待源码或现场核对。概念可查 web.dev 性能测量。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：为什么分位数比平均值更重要？
  • 直答：长尾用户体验会被平均值掩盖，分位数结合样本量更能显示退化范围。
• 追问 2：RUM（真实用户监控）能代替实验室吗？
  • 直答：不能；它发现真实分布，但复杂问题仍需受控复现和调用栈归因。
• 追问 3：监控数据如何避免泄密？
  • 直答：最小采集、脱敏、访问控制、保留期和后端审计，禁止上传凭据与敏感业务正文。

综合题 15：如何排查内存持续增长？

口述答案： 我会先固定一次可重复路径，例如连续进入和离开 IoT（物联网）报警页二十次，保持数据量、浏览器（网页浏览器）版本和操作步骤一致；分别采集基线、若干轮后和等待清理窗口后的堆快照。单次内存升高不等于泄漏，关键是对象数量和保留大小是否持续增长，以及根路径是否指向全局事件监听器、未清理计时器、缓存、闭包或已分离 DOM（文档对象模型）。若是图表、订阅或请求回调，我会明确谁创建、谁拥有、何时取消或释放，并让路由离开与清理逻辑成对。受控缓存则应能解释容量、键、淘汰、命中和登出清理，不能把无界 Map（映射接口）称为性能优化。修复后回归重复操作、弱网陈旧回调与多标签页，确认不会过早取消仍需的业务查询。服务端可通过分页、限量响应和可取消读取减少客户端压力，但不会自动释放前端对象。方法可查 Chrome 内存问题。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：怎样区分泄漏和垃圾回收未发生？
  • 直答：看多轮趋势、清理窗口和保留路径；可辅助触发回收，但最终以引用链和真实复现判断。
• 追问 2：闭包是否都是泄漏？
  • 直答：不是；闭包是正常机制，只有本应结束的资源仍被根对象持有才是泄漏。
• 追问 3：为什么要记录版本？
  • 直答：构建差异、第三方版本和发布策略都会影响对象路径，版本是可复现证据。

综合题 16：如何治理第三方脚本性能风险？

口述答案： 第三方脚本可能带来统计、客服、支付、地图或风控能力，但它们同样消耗下载带宽、解析与主线程时间，并可能引入供应链、安全和隐私风险。我会先建立清单：脚本来源、业务必要性、加载时机、版本、权限、是否可延后、失败时的降级和负责方；然后用资源瀑布与性能时间线确认它是否占据关键渲染路径或制造长任务，而不是仅按文件体积判断。首屏非必要脚本可在用户需要时或页面稳定后加载，但支付、风控等关键流程的延后必须和后端状态机、合规要求核对。CSP（内容安全策略）应只允许受信来源并记录违规，SRI（子资源完整性）等能力是否适用也需按实际部署验证。对 WMS（仓储管理系统）内部页，任何第三方都不能获得超过业务需要的订单、库存或令牌数据。上线后按版本看 LCP（最大内容绘制）、INP（交互到下次绘制）、错误和阻塞时间，支持快速关闭或回滚。性能策略可查 web.dev 第三方脚本。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：异步加载第三方脚本就无影响吗？
  • 直答：仍会占带宽、解析和执行主线程，只是减少某些解析阻塞，不等于免费。
• 追问 2：如何给第三方设故障边界？
  • 直答：功能降级、超时预算、错误隔离、最小数据和可关闭开关，核心业务不依赖其单点成功。
• 追问 3：前端能否直接把敏感字段发给第三方？
  • 直答：不能，必须先经过数据分级、合规、服务端授权与最小化处理。

综合题 17：如何设计大列表与图表的性能边界？

口述答案： 大列表和图表的第一原则不是“浏览器（网页浏览器）应该能画完”，而是定义用户当前需要看多少、服务端能安全提供多少、客户端能在帧预算内处理多少。跨境物流轨迹或 IoT（物联网）报警风暴应由 Java（编程语言）后端按租户、权限、时间窗、分页或游标、聚合粒度返回；前端对可视窗口做虚拟化、降采样或按需加载，给请求和计算加入版本、取消和错误状态。图表点数增长时，网络、解析、内存、布局和绘制会同时上升，单纯把数据挪到 Worker（工作线程）不能解决带宽和授权。若需要缓存，设置窗口、容量、版本、主体隔离和淘汰，不能无限保存历史。用户操作期间应优先响应缩放、筛选和取消，后台计算按批处理并在结果过期时丢弃。验证用响应体、节点数、主线程、内存和 INP（交互到下次绘制）综合观察，而不是只报一个帧率。实践建议可查 web.dev 渲染性能。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：虚拟列表是否改变业务数据完整性？
  • 直答：它只改变当前 DOM（文档对象模型）渲染窗口，权威数据与分页语义仍由后端保证。
• 追问 2：降采样会丢失峰值怎么办？
  • 直答：展示层可保留峰值摘要与明细下钻入口，不能把平滑结果当审计原始数据。
• 追问 3：何时服务端聚合优于客户端？
  • 直答：需要全量、权限过滤、复杂计算或数据量很大时，服务端聚合更可控且避免泄露。

综合题 18：如何处理缓存陈旧与库存一致性？

口述答案： 库存页面的浏览器（网页浏览器）缓存应被定义为展示优化，而非库存裁决。对于可短暂陈旧的列表或商品描述，可以通过版本化静态资源、ETag（实体标签）协商、CDN（内容分发网络）缓存和明确失效策略降低重复传输；但提交扣减、可售判断、支付确认和最终订单状态必须由 Java（编程语言）服务以事务、版本、幂等和权限裁决。前端若显示缓存数量，应标明刷新或确认时机，用户提交后进入处理中或未知态，并按业务标识重新查询，而不是用本地旧值判断“肯定有货”。缓存错配事故中，先保留请求标识、数据版本、响应头和页面版本，判断是读副本陈旧、接口契约变化还是业务并发；再制定回源、降级或回滚。这样能把“页面更快”与“库存不超卖”分开负责又连成闭环。缓存语义可查 RFC 9111。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：缓存命中能否直接放行下单？
  • 直答：不能；缓存只提供读副本，最终扣减由服务端当前状态与并发控制决定。
• 追问 2：用户看到旧库存怎么办？
  • 直答：明确展示可能陈旧的读状态，提交后以服务端结果收敛，不伪造确定性。
• 追问 3：ETag（实体标签）能解决库存超卖吗？
  • 直答：不能；它解决 HTTP（超文本传输协议）副本校验，不替代数据库事务和领域并发控制。

综合题 19：支付页面超时后如何兼顾性能与一致性？

口述答案： 支付确认请求超时只能说明浏览器（网页浏览器）未在期限内获得响应，不能说明服务端未受理、支付未发生或一定失败。前端应在一次用户意图开始时生成并复用幂等键，发送中限制重复触发；若网络或主线程阻塞导致响应未知，页面显示待确认并按幂等键查询，而不是新建一笔写命令。Java（编程语言）后端负责将幂等键与用户、订单、金额、状态机和审计绑定，返回未受理、处理中、成功或失败的权威状态。性能侧可优化静态资源、减少长任务、避免布局跳动和让确认页尽快可交互，但绝不能为了“秒开”提前宣布扣款成功。若用户离开页面，仍应允许他通过订单查询恢复最终状态；本地存储只能保存最小查询标识并受会话与清理边界约束。验证应覆盖重复点击、断网、响应丢失、旧页面恢复和服务端已受理但客户端取消。幂等原则可查 Stripe（国际支付网关）幂等请求。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：AbortController（中止控制器）能撤销扣款吗？
  • 直答：不能保证；它主要停止客户端等待或传输，服务端可能已处理，仍要查询权威状态。
• 追问 2：按钮禁用能否防止重复支付？
  • 直答：不能覆盖多标签、刷新和脚本请求，最终防线是后端幂等和状态迁移。
• 追问 3：超时后多久显示失败？
  • 直答：由服务端处理窗口与查询结果决定；在未获得权威失败前应保持可查询未知态。

综合题 20：如何设计前端错误观测与后端链路关联？

口述答案： 我会把用户可见错误分为导航与资源、脚本与渲染、网络与策略、业务拒绝和未知态，并让每类错误携带最小必要上下文：页面版本、路由、构建散列、时间、非敏感请求标识、缓存来源、浏览器（网页浏览器）能力和性能标记。前端错误上报不能包含令牌、完整订单、支付信息或用户输入原文；服务端以请求标识关联网关、Java（编程语言）服务、消息任务和审计记录。白屏时优先知道文档是否到达、资源是否四百零四、是否有 CSP（内容安全策略）或 CORS（跨域资源共享）拒绝、脚本栈指向哪个版本；业务超时则以幂等键查询而非把技术异常映射为最终业务失败。监控平台还要做采样、限流、脱敏、保留期和访问控制，防止错误系统本身成为隐私泄露面。当前项目是否已部署这些链路需明确待源码或现场核对。浏览器错误处理背景可查 MDN ErrorEvent。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：为什么不上传完整请求体？
  • 直答：可能含个人或交易敏感数据，应仅传可关联且脱敏的标识与错误分类。
• 追问 2：前端错误栈能说明后端失败吗？
  • 直答：不能；它只说明客户端执行位置，需要请求标识关联服务端链路。
• 追问 3：如何处理未知态？
  • 直答：保留业务标识、展示待确认、调用查询接口，以服务端状态收敛而不是盲重试。

综合题 21：如何解释 HTTP（超文本传输协议）条件请求与 ETag（实体标签）？

口述答案： 条件请求的目标是在资源可能变化时避免重复传输完整正文。浏览器（网页浏览器）或中间缓存保存副本与 ETag（实体标签）或 Last-Modified（最后修改时间），下次请求通过条件字段请服务端判断是否仍可复用；若内容未变，服务端返回未修改语义，客户端复用本地正文；若变更则返回新版本。设计时要明确 ETag（实体标签）由哪个层生成、集群是否一致、压缩或变体是否影响实体表示、Vary（变化维度）是否正确纳入缓存键。它适合公开或权限语义明确的读资源，却不能替代订单状态、库存扣减和支付结果的领域版本控制。对于用户私有内容，还要评估是否应使用私有缓存、是否可能跨主体泄露，以及登出、权限变更后的失效。排查时记录请求条件字段、响应状态、实体标签、命中层和页面版本，不把三百零四等同于业务成功。规范可查 MDN 条件请求。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：ETag（实体标签）和数据库版本是同一个概念吗？
  • 直答：不是；前者是 HTTP（超文本传输协议）表示副本校验，后者可用于领域并发控制，二者可关联但不能混用。
• 追问 2：Last-Modified（最后修改时间）有什么局限？
  • 直答：时间粒度、时钟与快速连续更新可能不够精确，需按资源特性选择。
• 追问 3：条件请求能否绕过权限？
  • 直答：不能；服务端必须先按当前主体授权，再决定是否返回或允许复用。

综合题 22：如何解释 CDN（内容分发网络）缓存失效？

口述答案： CDN（内容分发网络）把副本放到靠近用户的边缘以降低回源延迟和源站压力，但它也让同一资源同时存在浏览器（网页浏览器）、边缘、源站和可能的 Service Worker（工作线程）多个副本。失效设计不能只靠“发布后等几分钟”，而应将内容寻址静态资源、入口文档、接口读副本和私有响应分开：带散列静态文件可长缓存并保留旧版本，入口需较快看到新引用，接口按业务新鲜度与授权定义缓存，私有数据默认谨慎。紧急修复时可能需要回滚入口、保留旧文件、定向刷新边缘或撤销错误工作线程，但任何动作都要保留版本、时间和命中证据。跨境物流附件、导出文件等还要考虑下载授权和生命周期，不能因边缘缓存而让过期用户继续访问。上线后对比命中率、回源率、四百零四、白屏与首字节，验证没有把一致性问题转移给用户。指南可查 Cloudflare 缓存概念。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：为什么静态资源要保留旧版本？
  • 直答：已打开的旧入口可能仍请求旧散列，立即删除会造成四百零四和白屏。
• 追问 2：清理 CDN（内容分发网络）是否能解决所有错配？
  • 直答：不能，浏览器（网页浏览器）缓存和 Service Worker（工作线程）仍可能持有旧副本，需全链路版本治理。
• 追问 3：私有附件能否走 CDN（内容分发网络）？
  • 直答：可以在严格授权、签名、缓存隔离和过期策略下设计，但不能把边缘命中当作授权替代。

综合题 23：如何处理图片、字体与资源优先级？

口述答案： 首屏资源优化要从用户最早需要看到的内容倒推，而不是按文件类型一刀切。首先定位 LCP（最大内容绘制）元素和关键文字、样式、主图，保证它们被及时发现、拥有稳定尺寸并在网络预算中获得合理优先级；必要时对确实会立即使用的资源使用 preload（预加载），但必须验证它被使用且没有挤占文档、样式或主图带宽。非首屏图片和稀有功能可 lazy（延迟加载）或按路由分割，不过要给占位尺寸并避免滚动瞬间突发请求造成 CLS（累计布局偏移）和 INP（交互到下次绘制）退化。字体、图片格式、响应式媒体和 CDN（内容分发网络）变体应与后端资源服务的缓存、权限、尺寸元信息和回源能力配合。对于 WMS（仓储管理系统）商品图或跨境附件预览，不能预取未授权文件。验证用请求优先级、瀑布、LCP（最大内容绘制）、未使用字节、布局稳定性和真实访问概率共同判断。图像优化可查 web.dev 图片优化。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：预加载越多越好吗？
  • 直答：不好；错误预加载会抢占有限带宽和缓存，反而延迟真正关键资源。
• 追问 2：lazy（延迟加载）为何要有尺寸？
  • 直答：没有稳定占位，资源到达后会推动页面布局，增加 CLS（累计布局偏移）。
• 追问 3：字体为何影响性能？
  • 直答：它会影响下载、文本呈现与几何，错误策略可能延迟主要文字或引起布局变化。

综合题 24：如何处理浏览器（网页浏览器）主线程上的 JSON（数据交换格式）解析与大对象？

口述答案： JSON（数据交换格式）解析看似只是网络响应后的一个步骤，但大响应会在主线程占用解析、转换、分配和后续渲染时间，接口即使很快结束，用户仍可能等待结果出现。我会先在服务端限制返回数据：分页、游标、按视口或时间窗聚合、字段裁剪、权限过滤，并在响应中提供版本和总量语义；客户端再对必要的转换做预算化批处理，重计算可用 Worker（工作线程）承接，但消息传输与复制成本也要测量。页面状态使用不可变快照时只复制变更路径，不对大图表数组盲目深拷贝；缓存设上限与淘汰，路由离开解除对大响应的监听。若用户快速切换筛选，旧响应和旧计算必须由版本守卫丢弃，避免既耗资源又覆盖新结果。对当前项目的体积和耗时只可写演练或待核对，不能虚构线上数字。JavaScript（脚本语言）性能背景可查 MDN 关于工作线程的说明。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：压缩响应是否一定解决卡顿？
  • 直答：它降低传输，但解压、解析、对象分配和渲染仍可能成为主线程瓶颈。
• 追问 2：为何不能总用深拷贝？
  • 直答：大对象深拷贝会放大时间和内存，应按所有权、变更路径和可变缓冲边界选择。
• 追问 3：如何判断旧响应？
  • 直答：请求携带版本或参数摘要，页面仅提交与当前意图匹配的响应。

综合题 25：如何讲资源瀑布的排障方法？

口述答案： 资源瀑布不是“文件列表”，而是按时间显示请求发现、排队、DNS（域名系统）、连接、TLS（传输层安全）、等待首字节和下载等阶段的证据。我排查时先锁定用户症状对应的页面与构建版本，找文档、关键样式、LCP（最大内容绘制）资源、接口和脚本的启动时刻与依赖关系；若关键资源发现晚，看 HTML（超文本标记语言）结构、脚本阻塞和优先级；若等待首字节长，关联 CDN（内容分发网络）、网关和 Java（编程语言）服务；若请求结束后页面仍慢，转看主线程、布局和绘制。还要辨别缓存命中、重定向、四百零四、CORS（跨域资源共享）和服务工作线程来源，避免把已缓存资源的零网络耗时误读为后端快速。演练中可人为限制网络和 CPU（中央处理器）复现，但结论要注明环境。最终方案必须有前后对照和回归，不只是“看起来瀑布短了”。工具背景可查 Chrome 网络面板。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：瀑布请求很多一定坏吗？
  • 直答：不一定，协议复用、缓存和关键路径关系更重要；关键资源串行阻塞才是重点。
• 追问 2：请求排队长说明什么？
  • 直答：可能有连接、优先级、带宽或浏览器（网页浏览器）调度竞争，需要结合资源类型判断。
• 追问 3：为什么要关联构建散列？
  • 直答：同一路径不同版本的资源依赖不同，不带版本无法可靠复现或定位缓存错配。

综合题 26：如何解释重排、重绘和合成优化？

口述答案： 我会避免把任何视觉性能问题都称为“重绘”。style（样式计算）先决定规则和计算值，layout（布局）决定几何位置，paint（绘制）生成视觉内容，composite（合成）把图层合成帧；改尺寸和位置常会影响布局及后续阶段，改颜色可能主要影响绘制，改变换或透明度在适当条件下可能更多走合成。真正的优化流程是先用性能记录找到连续占用帧预算的阶段与调用栈，再减少节点、批量读写、避免读布局后立刻写样式、缩小绘制区域，最后才评估是否让稳定动画元素进入合成层。强制创建大量图层会增加显存、上传和管理负担，不能当作通用药方。后端可通过分页、稳定尺寸元信息和字段裁剪减少前端布局压力，但不能替浏览器（网页浏览器）处理样式与绘制。验证以同设备、同数据量的帧时间、布局、绘制和图层记录为准。术语背景可查 web.dev 渲染性能。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：为何读写交错会卡顿？
  • 直答：读最新几何可能迫使浏览器（网页浏览器）提前结算布局，循环中反复发生会切碎批处理。
• 追问 2：变换动画一定不触发布局吗？
  • 直答：常可避免某些布局影响，但具体效果取决于元素和实现，应以记录验证。
• 追问 3：优化优先级是什么？
  • 直答：先消除不必要工作，再减少影响范围，再评估图层和合成策略。

综合题 27：如何设计文件上传与下载的全链路安全？

口述答案： 文件上传是从不可信字节到受控业务资产的过程。前端可做大小、格式、进度和失败提示，减少用户等待，但不能信任扩展名、声明类型或任何客户端校验；Java（编程语言）后端必须认证上传主体、校验对象归属、限制大小与类型、检测实际内容特征、做恶意内容扫描、将文件放入隔离存储，并记录审计。文件名、描述和错误信息都是不可信文本，展示时按输出上下文编码，不能直接拼入 HTML（超文本标记语言）；下载也不能返回永久可猜路径，而是每次根据用户、租户、任务、文件状态和有效期重新授权。跨境物流报关附件可采用任务标识加受控下载接口，页面只保存最小引用并在会话失效时清理。性能上可用分片、后台任务和进度查询，但进度不能取代最终安全扫描结果。验证覆盖伪造类型、超大文件、跨租户访问、取消恢复和下载过期。安全指南可查 OWASP 文件上传。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：为什么不能只校验后缀？
  • 直答：后缀可伪造，实际内容可能不是宣称类型或包含恶意载荷。
• 追问 2：上传成功是否意味着可立即公开下载？
  • 直答：不一定，扫描、转码、权限绑定和业务审核可能尚未完成，应返回处理中状态。
• 追问 3：前端进度条如何避免误导？
  • 直答：区分本地上传、服务端处理和最终可用三个阶段，不能把字节上传完当成业务完成。

综合题 28：如何防止令牌泄露和会话固定？

口述答案： 我会把令牌与会话安全放在服务端可撤销、可轮换、可审计的模型里，而不是只讨论存储位置。敏感会话标识尽量通过受属性约束的 Cookie（浏览器小型数据）承载，减少脚本直接读取面，同时由后端在登录、权限提升、密码变更和可疑事件后轮换或撤销；前端不记录长期秘密，不把令牌写入错误日志、URL（统一资源定位符）、分析事件或第三方脚本上下文。XSS（跨站脚本）防护、CSP（内容安全策略）、最小权限和 CSRF（跨站请求伪造）防护需要协同，因为任何单层被绕过都可能扩大会话风险。会话固定问题要求认证成功后更换会话标识，服务端不接受攻击者预先控制的标识继续代表高权限主体。支付与库存接口还需逐请求授权和业务状态校验，持有会话不等于可执行任意动作。排查时记录会话生命周期事件和脱敏标识，绝不记录完整凭据。原则可查 OWASP 会话管理。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：HttpOnly 能防止所有令牌泄露吗？
  • 直答：不能，它减少脚本直接读取，但 XSS（跨站脚本）仍可能以用户身份发起操作，需纵深防御。
• 追问 2：为何登录后要轮换会话？
  • 直答：避免攻击者预置或已知的低权限会话在认证后继续有效，降低会话固定风险。
• 追问 3：前端日志为何不能打令牌？
  • 直答：日志、监控和第三方采集链路扩大读取范围，凭据应从一开始就不进入它们。

综合题 29：如何处理移动网络、弱网与离线？

口述答案： 弱网设计的目标不是假装所有操作立即成功，而是让用户知道当前状态、尽量保留意图并在网络恢复后以服务端事实收敛。读取页可使用版本化静态资源、受控缓存和明确过期策略，给出离线副本时间；非敏感草稿可写入 IndexedDB（索引数据库），带主体、版本和清理规则。对于 WMS（仓储管理系统）库存、支付或 Runner（执行器）任务写操作，前端生成幂等键，网络失败时进入未知态或离线待提交，恢复后先查服务端是否已受理，再决定重发；不能在本地扣库存或显示支付完成。资源层面优先保证文档、关键样式和主要内容，非首屏媒体 lazy（延迟加载），大数据按窗口拉取，避免在高延迟网络中浪费带宽。观测要分网络类型、设备与版本看失败和恢复率，实验室节流仅是复现手段。离线能力可查 web.dev 离线。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：离线缓存能否保存权限？
  • 直答：可保存非权威展示副本，但当前权限必须在恢复请求时由服务端重新裁决。
• 追问 2：何时自动重试读取？
  • 直答：对幂等、可安全读取的请求按预算退避；鉴权、四百类契约错误和写命令不能盲重试。
• 追问 3：用户离线提交后刷新怎么办？
  • 直答：保留最小命令标识或队列项，恢复后查询权威状态，不依赖内存中的“已提交”标志。

综合题 30：如何审查前端缓存的隐私风险？

口述答案： 缓存审查先列清所有副本位置：浏览器（网页浏览器）内存、HTTP（超文本传输协议）缓存、CDN（内容分发网络）、Service Worker（工作线程）、Cache Storage（缓存存储）、Web（万维网） Storage（网页存储）、IndexedDB（索引数据库）和监控系统。然后按数据敏感度、主体、租户、用途、保留期、失效条件、是否脚本可读和是否可能共享逐项判断。公开版本化静态资源可以长缓存；用户偏好可短期本地保存；订单、支付、个人信息、权限和下载凭据必须遵循最小化、私有性、撤销和登出清理原则。接口响应头、CDN（内容分发网络）规则和前端缓存键要一致，不能让一个层标记私有、另一个层按公共资源复用。跨境物流附件预览还需考虑设备共享、截图和离线副本，不能因为技术上可缓存就默认保存。审计应输出缓存键、版本、命中、清理与拒绝证据，不记录敏感正文。缓存安全背景可查 OWASP 缓存控制。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：浏览器缓存是否天然按用户隔离？
  • 直答：不能凭此假设设计私有数据，应由响应语义、缓存键、会话和清理明确隔离。
• 追问 2：登出只清 Cookie（浏览器小型数据）够吗？
  • 直答：不够，还要评估脚本可读存储、离线缓存、内存状态和工作线程副本。
• 追问 3：为何要记录缓存来源？
  • 直答：它能区分网络、边缘和本地副本，为陈旧或错配排障提供证据。

综合题 31：如何做前端性能发布回归？

口述答案： 性能发布回归不能只在开发机打开一次页面，而要建立可比较的基线、受控实验与真实用户监控。发布前锁定页面版本、测试数据、设备档位、网络条件和关键用户路径，记录文档与关键资源瀑布、LCP（最大内容绘制）、INP（交互到下次绘制）、CLS（累计布局偏移）、长任务、内存与错误；发布后按构建散列和灰度范围观察 RUM（真实用户监控）分位数、样本量、错误率、缓存命中和后端链路。若新版本导致白屏、资源四百零四、缓存错配或明显体验退化，应保留版本化资源并切换入口或功能开关，回滚只回退前端展示和资源策略，不改变已受理的支付或库存业务事实。前后端共同确认响应体、缓存头、权限和接口兼容窗口，避免前端优化发布暗中破坏旧客户端。所有阈值需按业务与实际基线核对，不能写死未经测量的数字。回归背景可查 web.dev 性能预算。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：为什么要按构建版本聚合？
  • 直答：缓存、代码、资源和第三方差异随构建变化，不分版本无法判断退化是否来自本次发布。
• 追问 2：灰度期间如何处理缓存？
  • 直答：采用内容散列和兼容入口，避免不同用户副本相互覆盖，并监控资源缺失与命中。
• 追问 3：回滚能否撤销支付？
  • 直答：不能；页面回滚与业务状态分离，支付仍按服务端状态机和查询结果处理。

综合题 32：如何构建浏览器（网页浏览器）安全排查清单？

口述答案： 我会把安全排查按资产、入口、边界和证据展开。资产包括会话、令牌、个人信息、订单、库存、支付、文件和监控数据；入口包括 URL（统一资源定位符）参数、表单、富文本、文件、第三方脚本、跨域接口和缓存；边界包括同源策略、CORS（跨域资源共享）、Cookie（浏览器小型数据）属性、CSRF（跨站请求伪造）防护、XSS（跨站脚本）输出编码、CSP（内容安全策略）、点击劫持限制、上传下载授权和服务端审计。前端审查不可信数据是否进入危险 DOM（文档对象模型）路径、秘密是否进入脚本可读存储或日志、缓存是否跨主体共享；后端审查认证、授权、对象归属、输入验证、输出编码、速率限制、文件扫描和错误脱敏。每一项都要有可验证的响应头、接口测试、日志或报告，而不是只凭“代码里有个开关”。最后将发现按风险、受影响主体、修复责任和回归用例闭环。通用检查项可查 OWASP ASVS。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：为何浏览器策略不能保护非浏览器客户端？
  • 直答：同源和 CORS（跨域资源共享）由浏览器执行，脚本、命令行或恶意客户端不会被它们约束，服务端必须独立鉴权。
• 追问 2：安全排查为何要看缓存？
  • 直答：缓存复制了数据，错误键、过期或主体隔离会造成隐私泄露和陈旧授权。
• 追问 3：发现漏洞后第一步是什么？
  • 直答：先按风险限制暴露、保留证据并启动修复流程，不能在公开日志中泄露利用细节或敏感数据。

综合题 33：如何设计浏览器（网页浏览器）故障恢复状态机？

口述答案： 页面状态应至少区分未开始、加载中、局部可用、已受理、未知、最终成功、最终失败和安全拒绝，不能用一个布尔值覆盖网络、业务和渲染所有结果。读取资源失败可在预算内重试、用旧的受控副本降级或提示刷新；跨域策略、认证、权限、脚本异常和缓存错配应给出不同错误分类与可观测标识。写命令尤其是库存和支付必须绑定幂等键：超时、浏览器（网页浏览器）关闭或 Service Worker（工作线程）切换后，前端恢复时先调用查询接口，再根据 Java（编程语言）服务返回的权威状态推进，不直接重发或宣布失败。页面性能恢复也遵循同一思想：长任务可取消、切分或转移，旧计算结果因版本不符丢弃，但服务端业务结果不受前端取消影响。状态机的每次迁移都应有用户展示、允许动作、禁止动作和证据字段，帮助客服与工程排查。设计参考可查 MDN AbortController。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：未知态为何不能直接显示失败？
  • 直答：客户端没收到响应不代表服务端未处理，直接失败会诱发重复写入。
• 追问 2：缓存错配属于业务失败吗？
  • 直答：通常是客户端交付或资源一致性故障，应降级、上报和恢复资源，不篡改业务状态。
• 追问 3：状态机如何帮助客服？
  • 直答：可通过命令标识、版本和当前状态快速区分未受理、处理中、已完成和技术故障。

综合题 34：请用一个项目故事串联浏览器（网页浏览器）性能、安全与后端责任。

口述答案： 我会以“跨境物流异常件处理页”为演练故事：用户打开页面时，浏览器（网页浏览器）通过 CDN（内容分发网络）取得版本化入口和首屏样式，非首屏附件预览 lazy（延迟加载）；主接口由 Java（编程语言）服务按用户、租户和时间窗返回分页摘要，页面只渲染可视列表并在 Worker（工作线程）聚合可展示统计。若 LCP（最大内容绘制）偏慢，我从主元素、资源优先级、首字节、脚本和绘制逐层取证；若 INP（交互到下次绘制）偏慢，检查长任务、读写交错和大数据转换；若 CLS（累计布局偏移）偏高，为附件和图表预留稳定尺寸。安全上，接口的 CORS（跨域资源共享）只允许受信页面读取，但每次仍由后端鉴权；会话遵循最小暴露，上传经服务端类型、内容、权限和扫描校验，文件名按上下文编码，下载再次授权并审计。用户提交异常处理后若超时，页面持有幂等键进入待确认并查询服务端，绝不因缓存或本地状态重复提交。这里的指标是设计与验证方法，项目实际配置和数据必须待源码或现场核对。综合原则可查 OWASP 应用安全。落地时我会把上述判断写成可审计的检查项：记录页面版本、构建散列、资源或请求标识、用户路径、网络条件、设备能力和数据量；先在受控环境复现，再按真实用户样本验证。若证据相互矛盾，优先保留未知态、明确错误和可回滚降级，不把单次观测写成稳定结论。前端修改必须与 Java（编程语言）后端的接口契约、缓存策略、权限校验、审计字段和发布回滚一起评审，确保性能改动不扩大数据泄露面，也不改变库存、支付、导出任务等服务端权威状态。同时用异常率、成功率、分位数与样本量确认收益，并记录未覆盖的浏览器差异、弱网与旧版本风险。

• 追问 1：为什么这里要同时讲性能和安全？
  • 直答：资源、缓存、存储和请求策略同时影响体验与泄露面，分开优化易产生新的事故。
• 追问 2：前端能最终确认异常件已处理吗？
  • 直答：不能；页面只能展示服务端返回的受理或最终状态，领域裁决与审计在后端。
• 追问 3：没有线上指标如何回答结果？
  • 直答：明确这是演练方案，给出采集字段、验证步骤和回滚条件，不虚构数值。

10. 复习清单

• 能从 URL（统一资源定位符）导航说到 DNS（域名系统）、连接、HTTP（超文本传输协议）、解析、布局、绘制与合成，并按证据分层定位慢点。
• 能区分 DOM（文档对象模型）、CSSOM（层叠样式对象模型）、渲染树、style（样式计算）、layout（布局）、paint（绘制）和 composite（合成）。
• 能解释资源优先级、preload（预加载）、prefetch（预取）、lazy（延迟加载）、缓存协商、版本化静态资源和 Service Worker（工作线程）错配。
• 能按敏感度选择 Cookie（浏览器小型数据）、Web（万维网） Storage（网页存储）、IndexedDB（索引数据库）与 Cache Storage（缓存存储），并明确服务端权威边界。
• 能区分 CORS（跨域资源共享）、CSRF（跨站请求伪造）、XSS（跨站脚本）、CSP（内容安全策略）和点击劫持，且不把前端体验校验说成安全裁决。
• 能用 LCP（最大内容绘制）、INP（交互到下次绘制）、CLS（累计布局偏移）、TTFB（首字节时间）、RUM（真实用户监控）、瀑布和堆快照做排障闭环。
• 能面对白屏、缓存错配、跨域失败、布局抖动、主线程阻塞和内存增长，先保护一致性，再以版本、标识和测量证据恢复。