# 深圳某海外电商（一面）

# 原型链

• 每个对象有 __proto__，指向构造函数的 prototype
• 找属性沿着链向上找，到 Object.prototype 还没有就 undefined
• Function.__proto__ === Function.prototype（鸡生蛋蛋生鸡）
• Object.prototype.__proto__ === null（链尾）

简版：对象通过 __proto__ 串成链，查属性沿链向上找，链尾是 null。

# 闭包

函数 A 内部的函数 B 引用 A 的变量，B 就是闭包。本质是 B 的作用域链里持有 A 的活动对象。

经典 var 循环问题三种解法：IIFE、setTimeout 第三参数、let。

简版：内部函数引用外部变量就是闭包，让外部变量不被 GC。

# 浏览器渲染原理

简化版：

HTML → Tokens → Nodes → DOM Tree
CSS → CSSOM Tree
DOM + CSSOM → Render Tree
布局（Layout） → 绘制（Paint） → 合成（Composite） → 屏幕

阻塞规则：

• 解析 HTML 遇到 <script> 默认阻塞
• defer：并行下载、HTML 解析完按顺序执行
• async：并行下载、下完立即执行（不保序）

简版：HTML 转 DOM、CSS 转 CSSOM，合并成 Render Tree，再 Layout → Paint → Composite。

# 为什么操作 DOM 慢

• DOM 在渲染引擎，JS 在 JS 引擎，跨线程通信有成本
• 每次操作可能触发回流/重绘
• 频繁操作就是不停跨线程 + 重排

优化：批量操作（DocumentFragment）、合并样式、虚拟滚动、用 transform 替代 top。

简版：跨线程通信 + 触发回流，频繁操作就是双重消耗。

# 重绘和回流（Reflow / Repaint）

• 回流：几何属性变化（宽高、位置、布局）→ 必须重新计算布局，开销大
• 重绘：只是颜色、背景等不影响布局的视觉变化，开销小
• 回流必引起重绘，反之不一定

减少手段：

• transform 替代 top/left
• visibility: hidden 替代 display: none（只重绘）
• 一次性更新（写入到一个 class，而不是改多次内联样式）
• will-change 提升图层
• 离屏处理（DocumentFragment、requestAnimationFrame 批处理）

简版：动几何 = 回流，只动样式 = 重绘。回流贵，能用 transform 就别用 top。

# XSS 防御

• 持久型 XSS：恶意脚本被存进数据库（评论、富文本）
• 反射型 / DOM 型：恶意脚本通过 URL 注入

防御：

• 输入输出转义
• 富文本走白名单（DOMPurify、xss）
• CSP（Content-Security-Policy）
• HttpOnly + Secure cookie 减少 cookie 被窃取风险

简版：转义 + CSP + 富文本白名单 + cookie HttpOnly。

# CSRF 防御

• SameSite Cookie（Lax / Strict）
• CSRF Token（同步表单令牌）
• 验证 Referer / Origin
• 关键操作二次验证（验证码 / 短信）

简版：SameSite + CSRF Token + Referer 校验，三件套基本够用。

# 点击劫持防御

• 设置 X-Frame-Options: DENY 或 SAMEORIGIN
• 用 CSP frame-ancestors
• JS 兜底：if (top !== self) top.location = self.location

简版：响应头加 X-Frame-Options，禁止被 iframe 嵌套。

# 浏览器缓存机制

缓存位置（优先级从高到低）：Service Worker → Memory Cache → Disk Cache → Push Cache → 网络

缓存策略：

• 强缓存：Expires（HTTP/1）/ Cache-Control（HTTP/1.1，优先级更高）
• 协商缓存：Last-Modified + If-Modified-Since 或 ETag + If-None-Match，命中返 304

实战：

• HTML 不缓存或短缓存
• 静态资源（带 hash 文件名）Cache-Control: max-age=31536000, immutable

简版：先强缓存（Cache-Control），过期再协商（ETag / Last-Modified），HTML 不缓存，静态资源一年永久缓存。

# 技术选型怎么做

要素：

• 框架：业务场景（CSR / SSR