前端5月30日 19:58
Chrome 的 V8 引擎如何执行 JavaScript？V8 执行 JavaScript 不是直接把源码一路翻成机器码。大致流程是：源码先被解析成 AST，再由 Ignition 生成并执行字节码；运行中如果某段代码频繁执行，V8 会收集类型反馈，把它交给 TurboFan 优化成机器码。优化依赖“假设”，比如对象形状稳定、函数参数类型稳定；一旦假设被打破，就会发生去优化。
## 追问
### 隐藏类和内联缓存是什么？
V8 会给结构相似的对象建立隐藏类，用来快速定位属性。内联缓存会记录某个属性访问曾经遇到的对象形状。
### 为什么不建议频繁 delete 属性？
delete 可能改变对象形状，让原本稳定的隐藏类失效。热点路径里更常见做法是置为 null 或创建新对象。
### V8 的垃圾回收怎么影响页面？
大量临时对象会增加 minor GC 频率，长期被闭包、全局数组、事件监听器引用的对象会进入老生代，严重时页面会间歇卡顿。
### 代码怎么写更友好？
让对象结构稳定、避免热路径混用类型、减少循环里的临时对象。先用 Performance 和 Memory 确认瓶颈，再优化热点。
## 写段代码
```js
function makeUser(id, name) { return { id, name, active: true }; }
const u = makeUser(1, 'A');
u.active = false;
```标签
Chrome
Google Chrome是一款由Google开发的免费网页浏览器，首次发布于2008年。Chrome以其简洁的用户界面、高性能和安全性而广受欢迎，很快成为世界上使用最广泛的浏览器之一。它是基于开源项目Chromium进行开发的，而Chromium项目也同时为其他开发者提供了构建自己浏览器的基础。
前端5月30日 19:58
Chrome 缓存机制有哪些？强缓存和协商缓存怎么选？Chrome 缓存是一组从近到远的命中链路。页面请求资源时，可能先被 Service Worker 接管，再命中内存缓存或磁盘缓存；HTTP 层又分强缓存和协商缓存。强缓存看 `Cache-Control: max-age`，没过期就不问服务器；协商缓存会带 `If-None-Match` 或 `If-Modified-Since` 去问服务器，没变就返回 304。
## 追问
### 强缓存和协商缓存怎么取舍？
带内容 hash 的 JS、CSS、图片适合强缓存很久；HTML 入口更适合短缓存或协商缓存，避免用户一直拿旧入口。
### ETag 和 Last-Modified 有什么区别？
Last-Modified 依赖修改时间，精度受构建流程影响；ETag 通常基于内容或版本生成，更精确但有计算成本。
### memory cache 和 disk cache 有什么区别？
memory cache 快，通常跟当前页面生命周期相关；disk cache 更持久。开发者主要通过 HTTP 头影响策略。
### Service Worker 缓存会不会覆盖 HTTP 缓存？
会，它能拦截 fetch 并决定读 Cache Storage 还是走网络。缓存策略写错会导致用户长期拿旧数据。
## 写段配置
```http
Cache-Control: public, max-age=31536000, immutable
ETag: "app-v42"
```前端5月30日 19:58
Chrome 事件循环中宏任务和微任务到底怎么执行？Chrome 的事件循环可以先记一句话：同步代码先进调用栈，栈清空后清空微任务，然后浏览器选择是否渲染，再执行下一个宏任务。宏任务包括 script、setTimeout、用户事件等；微任务包括 Promise.then、queueMicrotask、MutationObserver。微任务优先级高，但太多会让渲染一直没机会发生。
## 追问
### setTimeout(fn, 0) 为什么不是立刻执行？
它只是把回调放进宏任务队列，必须等当前同步代码和本轮微任务执行完。后台标签页和嵌套定时器还可能被节流。
### Promise.then 和 requestAnimationFrame 谁先执行？
Promise.then 属于微任务，会在当前宏任务结束后尽快清空；rAF 通常在下一次渲染前执行。
### 实际项目常见坑是什么？
接口返回后连续触发大量 Promise 回调，在里面同步计算列表、改 DOM、再追加微任务，页面就会点击无响应。
### 怎么拆重任务？
把非关键计算切片，用 setTimeout、MessageChannel 或 requestIdleCallback 给浏览器处理输入和渲染的机会。
## 写段代码
```js
console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D'); // A D C B
```前端5月30日 19:58
Chrome 里如何定位并优化慢网络请求？优化 Chrome 网络请求，先用 DevTools Network 找慢在哪里。一次请求会经历 DNS、TCP/TLS、排队、TTFB、下载等阶段；不同阶段慢，处理手段完全不同。TTFB 高通常是后端或网关慢，下载慢可能是资源太大，排队多可能是连接数、优先级或主线程阻塞。
## 追问
### HTTP/2 以后还要合并 JS 和 CSS 吗？
不一定。HTTP/2 多路复用降低了小请求连接成本，过度合并反而会让缓存失效范围变大。
### preload、prefetch、preconnect 怎么选？
preconnect 提前建立跨域连接；preload 抢首屏关键资源；prefetch 适合空闲加载下一页资源。
### Network 面板看哪些指标？
先看瀑布图是否有长串阻塞，再看 Timing。TTFB、Content Download、Queueing 分别对应不同问题。
### 缓存策略怎么避免旧资源？
HTML 用短缓存或协商缓存；带 hash 的 JS、CSS、图片可设置长强缓存。没有版本号的资源不要随手缓存一年。
## 写段代码
```html
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" href="/assets/app.abcd.js" as="script">
```前端5月30日 19:58
Chrome 为什么会拦截跨域请求？前端该怎么解决？Chrome 拦截跨域是同源策略在保护用户数据。协议、域名、端口任意一个不同就算跨域；前端可以发起请求，但浏览器会在读取响应时检查 CORS 头。真正的解决点通常在服务端：明确允许哪些来源、方法、请求头，是否允许携带 Cookie。开发环境可以用代理绕过限制，生产不要靠关闭安全策略或插件。
## 追问
### CORS 和 JSONP 有什么区别？
CORS 是标准跨域机制，支持多种方法和预检；JSONP 只利用 script 标签，只能 GET，安全边界差。
### 为什么有些请求会先发 OPTIONS？
带自定义请求头、非简单方法或特殊 Content-Type 时，Chrome 会先发预检请求确认服务端是否允许。
### 携带 Cookie 时为什么不能写 `*`？
如果 `credentials: include`，服务端必须回显具体 origin，不能是星号，还要设置 `Access-Control-Allow-Credentials: true`。
### 开发代理和服务端 CORS 怎么取舍？
本地代理适合调试；上线后要让网关或应用服务配置 CORS，因为开发服务器代理不会跟着用户浏览器上线。
## 写段代码
```js
res.setHeader('Access-Control-Allow-Origin', 'https://www.example.com');
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Authorization');
res.setHeader('Access-Control-Allow-Credentials', 'true');
```前端5月30日 19:58
Chrome 如何管理内存？V8 垃圾回收和泄漏排查怎么做？Chrome 的内存管理主要由多进程架构、Blink 渲染管线和 V8 垃圾回收一起完成。每个标签页、iframe、扩展或站点隔离进程都可能占用独立内存；JS 对象由 V8 管，DOM、样式、图片、GPU 资源则不完全在 JS 堆里。所以排查内存问题不能只看一个数字，要分清是 JS 堆增长、DOM 节点泄漏，还是图片、Canvas、WebGL 资源没有释放。
## 追问
### V8 垃圾回收大概怎么工作？
V8 会把对象分成新生代和老生代，短命对象优先在新生代快速回收，存活久的对象会晋升到老生代。
### 最常见的内存泄漏有哪些？
定时器没清、事件监听没移除、全局数组当缓存、闭包引用大对象、已删除 DOM 还被 JS 变量保存，都是高频原因。
### Chrome DevTools 怎么排查？
先用 Performance 或 Task Manager 观察内存是否持续上升，再到 Memory 面板拍 Heap Snapshot，对比 Retained Size 和 Detached DOM tree。
### WeakMap 能解决所有泄漏吗？
不能。它适合存跟对象生命周期绑定的附加信息，但如果外部还有全局引用，WeakMap 也救不了。
### 代码里应该怎么清理？
组件卸载时清理事件、定时器和订阅，长列表做虚拟滚动，大图和 Blob URL 用完释放。
```js
const timer = setInterval(sync, 5000);
window.addEventListener('resize', onResize);
return () => { clearInterval(timer); window.removeEventListener('resize', onResize); };
```前端5月30日 19:58
Chrome Service Worker 是什么？生命周期和缓存坑有哪些？Service Worker 是运行在页面之外的浏览器脚本，Chrome 用它来做请求拦截、离线缓存、推送通知和后台同步。它不直接操作 DOM，也不是一直常驻后台线程，而是被 install、activate、fetch、push 等事件唤醒，处理完任务后可能被浏览器回收。理解它的关键不是背 API，而是记住：它站在页面和网络之间，但生命周期由浏览器控制。
## 追问
### Service Worker 和普通 JS 脚本有什么区别？
普通 JS 跟着页面走，页面关闭脚本就结束；Service Worker 注册后独立于页面。它不能访问 window 和 DOM，需要用 postMessage、Cache Storage、IndexedDB 与页面协作。
### install、activate、fetch 分别做什么？
install 适合预缓存静态资源，activate 适合清理旧版本缓存并接管客户端，fetch 决定请求走网络还是缓存。
### 缓存策略怎么选？
静态资源通常 cache first，HTML 入口常用 network first 或 stale-while-revalidate，接口数据按业务新鲜度决定。
### 更新为什么经常“不生效”？
Chrome 发现 sw.js 字节变化后会安装新版本，但旧页面仍被旧 worker 控制，新版本要等旧页面关闭才激活。
### 必要代码长什么样？
下面只是兜底示例，真实项目要区分静态资源、HTML 和接口。
```js
self.addEventListener('fetch', event => {
event.respondWith(fetch(event.request).catch(() => caches.match(event.request)));
});
```前端5月30日 19:58
Chrome 如何支持 PWA？安装、离线和缓存边界是什么？Chrome 支持 PWA，靠的不是某个“打包开关”，而是浏览器把 Web App Manifest、Service Worker、HTTPS、安装入口和权限能力串在一起。页面先要像普通网站一样可访问，再通过 manifest 告诉 Chrome 应用名称、图标、启动地址、显示模式和主题色；Service Worker 负责接管部分网络请求，让核心资源可以缓存，弱网或离线时仍有可用界面。
## 追问
### Chrome 判断网站能不能安装成 PWA 看什么？
通常要有 HTTPS、有效 manifest、合适尺寸图标，以及可被 Service Worker 控制的页面。安装提示还会结合用户访问行为，不是文件写好就立刻弹窗。
### Manifest 里最容易漏掉什么？
常见漏项是 start_url、scope、display 和 192/512 尺寸图标。scope 配错会让用户从图标打开后跳回普通浏览器标签页。
### 离线能力是不是把所有接口都缓存起来？
不是。HTML 壳、CSS、JS、图标适合预缓存；用户数据、价格、库存、权限状态更适合网络优先或短缓存。
### 更新 PWA 时有什么坑？
Service Worker 更新不是刷新就立即生效，新 worker 要等旧页面关闭后才接管，除非主动调用 skipWaiting 和 clients.claim。
### 最小实现需要哪些代码？
页面注册 Service Worker，worker 在 install 阶段缓存核心资源，fetch 阶段兜底返回缓存。生产还要加版本号和清理旧缓存。
```js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
```前端5月30日 19:50
Chrome GPU 加速怎么实现？合成层、will-change 和动画怎么取舍？Chrome 的 GPU 加速主要发生在合成阶段：页面先经过样式计算、布局、绘制，再把部分内容交给 GPU 作为合成层处理。它能让 transform、opacity 这类动画更顺，但不是所有属性都适合丢给 GPU；如果滥用，反而会增加显存、纹理上传和合成成本。
## 追问
### 哪些 CSS 更容易触发 GPU 合成？
常见的是 transform、opacity，以及部分 filter、视频、Canvas、固定定位元素。开发里通常用 transform 做位移和缩放，不要用 left、top 频繁改位置。
### will-change 是不是越多越好？
不是。它只是提前告诉浏览器这个元素可能要变，浏览器可能因此提前建层和分配资源。动画结束后应移除。
### GPU 加速为什么有时反而变慢？
合成层不是免费的，层太多会占显存，内容变化频繁还会导致纹理反复上传。低端设备最容易出问题。
### 怎么确认页面真的用了合成层？
用 DevTools 的 Layers、Performance 和 Rendering 工具。看是否有大量 Layout、Paint，或异常多图层。
## 写段 CSS
```css
.card { will-change: transform, opacity; }
.card.is-moving { transform: translate3d(0, 12px, 0); opacity: .92; }
```前端5月30日 19:50
Chrome DevTools 调试技巧有哪些？断点、网络和性能怎么用？Chrome 调试的核心不是把 DevTools 每个面板都点一遍，而是按问题类型选工具：样式错看 Elements，请求慢看 Network，逻辑异常看 Sources，卡顿掉帧看 Performance，内存上涨看 Memory。这样排查更快，也不容易在 Console 里靠猜。
## 追问
### Elements 面板适合解决什么问题？
它适合查 DOM 结构、CSS 覆盖关系、盒模型尺寸和最终计算样式。要注意样式可能来自媒体查询、伪类、继承和组件库默认规则。
### Sources 断点怎么用才高效？
普通断点查确定位置，条件断点只在某个参数或状态出现时暂停，XHR/fetch 断点适合追接口是谁发起的。
### Network 面板看哪些字段？
先看 Status、Method、Initiator、Payload、Response，再看 Timing 里的 DNS、SSL、TTFB 和下载耗时。
### 性能卡顿从哪里开始录？
用 Performance 面板录制真实操作，重点看 Main 线程长任务、Layout、Recalculate Style 和 Paint。前端5月30日 19:50
Chrome 隐私保护功能有哪些？无痕、Cookie 和权限怎么设置？Chrome 的隐私保护不是只开无痕窗口就够了。无痕模式只能让本机不保留历史记录、Cookie 和表单数据，网站、公司网络、运营商仍然可能看到访问行为。真正有用的做法，是把 Cookie、网站权限、安全浏览、密码检查、同步数据和扩展权限一起管起来。
## 追问
### 无痕模式到底保护什么？
它主要保护这台设备上的痕迹，比如浏览历史、临时 Cookie、搜索记录和表单输入。它不等于匿名上网。
### 第三方 Cookie 要不要全部禁用？
多数情况下建议阻止第三方 Cookie，因为它们常用于跨站跟踪。遇到老旧登录或支付异常时，可以只给可信站点加例外。
### 哪些权限最容易被忽略？
位置、摄像头、麦克风、通知、剪贴板和后台同步最容易被随手允许。通知权限尤其要定期清理。
### 扩展程序会不会破坏隐私设置？
会，尤其是申请“读取和更改所有网站数据”的扩展。安装前看权限，安装后清理不用的扩展。前端5月27日 22:41
Chrome DevTools 性能分析怎么做？## Chrome DevTools 性能分析怎么做？
用 Performance 面板录制页面活动，从火焰图找长任务，用 Bottom-Up 定位耗时函数，配合 Network 排查资源瓶颈——这是核心路径。
### Performance 面板：录制和读火焰图
点击 Record 后操作页面，再停止录制。火焰图横轴是时间，纵轴是调用栈，关键看三行数据：
- **FPS 图**：红色块表示掉帧，绿色柱越高越流畅
- **Main 线程**：宽条是长任务（>50ms），点进去看 Scripting/Rendering/Painting 各占多少
- **Timings 标记**：直接显示 FCP、LCP、DCL 等关键节点
用 Bottom-Up 按 Self Time 排序，快速找到吃 CPU 最多的函数。
### Network 面板：找慢请求
按 Duration 列排序，定位最慢的接口和资源。瀑布图里看关键资源是否阻塞渲染——render-blocking 的 JS/CSS 没加 async/defer，LCP 就会被拖慢。
### Memory 面板：查内存泄漏
拍堆快照，操作页面后再拍一次，对比 Delta 列。某类对象持续增长不释放，大概率是泄漏。也可用 Allocation Timeline 实时观察分配。
### Lighthouse：一键出报告
Lighthouse 给出 Performance/Accessibility/SEO/Best Practices 四项评分和建议，适合快速体检，深度分析还得靠 Performance 面板。
### 实战流程
开启 CPU 4x slowdown + Network Fast 4G 模拟真实环境 → Record and reload 录制加载过程看 LCP 阻塞 → 交互场景用普通 Record 找长任务 → Bottom-Up 定位函数 → 优化后重录对比。
**追问：怎么判断一个长任务是否需要拆分？** 超过 50ms 的任务阻塞主线程响应用户输入，用 `requestIdleCallback` 或 `setTimeout(fn, 0)` 拆成小块，让浏览器有机会处理渲染和交互。前端5月27日 22:36
如何开发 Chrome 浏览器插件？## Chrome 插件的核心架构是怎样的？
Chrome 插件由 Manifest、Background（Service Worker）、Content Script、Popup 四部分协作运行。Manifest 声明权限与入口，Service Worker 处理后台逻辑，Content Script 操作页面 DOM，Popup 提供交互界面。组件之间通过 `chrome.runtime.sendMessage` 和 `chrome.tabs.sendMessage` 通信。
追问：Manifest V2 和 V3 有什么区别？MV3 用 Service Worker 替代了 Background Page，禁止远程代码执行，权限系统改为按需申请（optional_permissions），action 替换了 browser_action 和 page_action。
## 如何编写一个最小的 Chrome 插件？
只需要一个 `manifest.json` 和一个弹出页面：
```json
{
"manifest_version": 3,
"name": "Hello Extension",
"version": "1.0",
"action": {
"default_popup": "popup.html"
}
}
```
```html
<!-- popup.html -->
<button id="btn">点击</button>
<script src="popup.js"></script>
```
在 `chrome://extensions` 开启开发者模式，点击"加载已解压的扩展"即可运行。
追问：`manifest_version` 必须填 3 吗？Google 已强制要求新提交插件使用 MV3，旧 MV2 插件已无法上架 Chrome Web Store。
## Content Script 和 Background 如何通信？
Content Script 注入到网页上下文，Background 运行在插件独立环境，两者不能直接访问对方变量，必须通过消息传递：
```javascript
// Content Script 发送
chrome.runtime.sendMessage({ type: "GET_DATA" }, (response) => {
console.log(response.data);
});
// Background 接收并回复
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (msg.type === "GET_DATA") {
sendResponse({ data: "result" });
}
});
```
反向通信用 `chrome.tabs.sendMessage(tabId, payload)`。
追问：如果需要跨域请求怎么办？在 Manifest 中声明 `host_permissions`，由 Background 发起 fetch，Content Script 通过消息获取结果。
## 常用 API 有哪些？
- `chrome.storage`：持久化存储，分 local 和 sync 两种
- `chrome.tabs`：创建、查询、操作标签页
- `chrome.webRequest` / `chrome.declarativeNetRequest`：MV3 中后者替代前者处理请求拦截
- `chrome.alarms`：定时任务，Service Worker 休眠后仍可唤醒
追问：为什么 MV3 不推荐 `chrome.webRequest`？它以阻塞方式拦截请求，影响性能。`declarativeNetRequest` 声明式规则更高效，但灵活性降低。
## 开发中有哪些常见坑？
1. **Service Worker 会休眠**：MV3 的 Background 是 Service Worker，5 分钟无活动自动休眠，长连接用 `chrome.alarms` 保活
2. **Content Script 的 CSP 限制**：不能使用内联脚本和 `eval`，所有逻辑必须放独立 JS 文件
3. **消息回调丢失**：`sendResponse` 在异步场景下需返回 `true` 保持通道开放
4. **权限最小化**：只在 `host_permissions` 声明实际需要的域名，避免审核被拒前端5月27日 22:35
Chrome 浏览器如何处理兼容性问题？## 核心答案
Chrome 处理兼容性问题围绕三条线展开：**CSS 前缀自动补全、JS Polyfill 按需加载、特性检测优先于浏览器嗅探**。实际工程中，Babel 负责 JS 降级，Autoprefixer 负责 CSS 前缀，core-js 补齐 API 差异——三条工具链配合覆盖了绝大多数兼容场景。
## CSS 兼容：前缀与盒模型
不同浏览器对 CSS 新属性的实现节奏不同，导致前缀碎片化。Autoprefixer 基于 Can I Use 数据自动补全前缀，配置 `.browserslistrc` 即可：
```json
{ "browserslist": ["> 1%", "last 2 versions", "not dead"] }
```
盒模型差异曾是历史痛点，`box-sizing: border-box` 配合 CSS Reset 统一了默认样式，目前已不是主要问题。真正需要注意的是 Flexbox 和 Grid 在低版本 Chrome（<57）中的行为差异，比如 `flex-basis` 计算和 `gap` 属性支持。
## JS 兼容：Babel 降级与 Polyfill
Babel 将 ES6+ 语法转为 ES5，但语法转换不等于 API 补齐。`Promise`、`Array.from` 等全局对象需要 polyfill：
```js
// babel.config.js — 按需注入
{
presets: [
["@babel/preset-env", {
useBuiltIns: "usage",
corejs: 3
}]
]
}
```
`useBuiltIns: "usage"` 只打包实际用到的 polyfill，避免体积膨胀。面试中要强调一点：**Babel 只管语法，polyfill 才管 API**，两者缺一不可。
## 特性检测 vs 浏览器判断
永远用特性检测，不要用 `navigator.userAgent` 判断浏览器。UA 字符串可以伪造且各厂商互相模仿，结论不可靠：
```js
// 错误：靠 UA 判断
if (navigator.userAgent.includes("Chrome")) { ... }
// 正确：特性检测
if ("IntersectionObserver" in window) {
new IntersectionObserver(callback)
} else {
// 降级到 scroll 监听
}
```
## 追问：如何验证兼容性效果？
- **BrowserStack / LambdaTest**：真实设备云端测试，覆盖 Safari、Firefox、Edge
- **Chrome DevTools Rendering 面板**：模拟 CSS 媒体查询和渲染差异
- **CI 集成**：用 Playwright 跑多浏览器 E2E，上线前自动拦截回归
兼容性不是一次性工程，而是随浏览器迭代持续维护的过程。锁定 browserslist 目标、定期更新依赖、关注 Chrome Release Notes 中的 Breaking Changes，才能把问题卡在上线前。前端5月27日 22:34
Chrome 浏览器有哪些存储机制？## 核心答案
Chrome 提供四种主流存储机制，按容量从小到大排列：
| 存储方式 | 容量 | 生命周期 | 操作方式 | 是否随请求发送 |
|---------|------|---------|---------|--------------|
| Cookie | ~4KB | 可设过期时间 | 同步 | 是 |
| SessionStorage | ~5MB | 标签页关闭即清 | 同步 | 否 |
| LocalStorage | ~5MB | 永久（手动清除） | 同步 | 否 |
| IndexedDB | 可用磁盘50% | 永久 | 异步 | 否 |
## Cookie：最小但最忙
Cookie 每次请求自动携带到服务端，适合认证和会话管理。容量仅 4KB，可通过 `HttpOnly` 防 XSS、`Secure` 限 HTTPS、`SameSite` 防 CSRF。
```js
document.cookie = 'token=abc; HttpOnly; Secure; SameSite=Strict; max-age=3600';
```
## SessionStorage 与 LocalStorage：同源下的两种策略
两者都只能存字符串，API 一致：
```js
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // 'dark'
```
关键区别：**SessionStorage 标签页隔离**，关闭即消失，不同标签页不共享；**LocalStorage 同源共享**，跨标签页可读写，持久存在。
## IndexedDB：大数据场景的选择
IndexedDB 是浏览器内置的事务型数据库，支持索引和游标查询，适合离线应用和大量结构化数据。
```js
const req = indexedDB.open('myDB', 1);
req.onupgradeneeded = e => {
const db = e.target.result;
db.createObjectStore('users', { keyPath: 'id' });
};
req.onsuccess = e => {
const db = e.target.result;
const tx = db.transaction('users', 'readwrite');
tx.objectStore('users').add({ id: 1, name: 'Tom' });
};
```
异步 API 不阻塞主线程，可在 Web Worker 中使用——这是 localStorage 做不到的。
## 追问：Storage 存满会怎样？
写入操作静默失败（不抛异常），可提前用 `navigator.storage.estimate()` 查询已用和可用空间。
## 追问：如何给 localStorage 加过期时间？
localStorage 本身不支持，需要手动封装：存储时附带时间戳，读取时校验是否过期并清除。
```js
function setWithExpiry(key, value, ttl) {
const item = { value, expiry: Date.now() + ttl };
localStorage.setItem(key, JSON.stringify(item));
}
function getWithExpiry(key) {
const raw = localStorage.getItem(key);
if (!raw) return null;
const item = JSON.parse(raw);
if (Date.now() > item.expiry) {
localStorage.removeItem(key);
return null;
}
return item.value;
}
```
实际项目中推荐用 `localstorage-ttl` 这类成熟库，别重复造轮子。前端5月27日 22:34
Chrome 浏览器有哪些安全机制？## 答案要点
Chrome 的安全机制可以分三层理解：**进程级隔离**、**网络级防护**、**页面级约束**。面试时按这个层次回答，逻辑清晰且不容易遗漏。
## 进程级隔离
**沙箱（Sandbox）** 是 Chrome 安全的基石。每个标签页对应独立的渲染进程，渲染进程没有直接访问系统资源的权限——文件系统、网络、GPU 都要经过浏览器主进程中转。就算渲染进程被攻破，攻击者也只能在一个受限环境里打转。
Chrome 2026 年已遭遇 4 个被利用的零日漏洞，分别涉及 CSS 处理、Skia 图形库、V8 引擎和 WebGPU/Dawn 组件。沙箱机制正是限制这类漏洞影响范围的关键防线。
## 网络级防护
**HTTPS 强制**：Chrome 逐步标记所有 HTTP 页面为不安全，默认将 http:// 升级为 https://。证书验证链确保你连的是真实服务器，而非中间人。
**混合内容拦截**：HTTPS 页面中加载的 HTTP 资源会被自动阻止，防止加密通道被侧面突破。
**安全浏览（Safe Browsing）**：Google 维护恶意网址和钓鱼网站黑名单，Chrome 在导航前实时比对，发现风险会弹出醒目警告。
## 页面级约束
**同源策略（SOP）** 是 Web 安全的核心规则：协议 + 域名 + 端口三者一致才算同源。跨源读操作被默认禁止，JS 无法读取不同源的 DOM、Cookie 或响应数据。
**CORS（跨域资源共享）** 是 SOP 的补充：服务器通过 `Access-Control-Allow-Origin` 等 HTTP 头声明允许哪些源访问，浏览器据此放行。注意：CORS 是浏览器端限制，服务端之间互相请求不存在跨域问题。
**CSP（内容安全策略）** 通过 `Content-Security-Policy` 头或 meta 标签限制页面能加载哪些资源，从根本上切断 XSS 的注入通道：
```
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-abc123'
```
这段配置只允许加载同源脚本，且必须携带指定 nonce，内联脚本和 eval 都会被拦截。
**SameSite Cookie**：设置为 `Strict` 或 `Lax` 后，跨站请求不再自动携带 Cookie，CSRF 攻击失去赖以生存的身份凭证。
## 面试追问方向
- 沙箱能不能完全防止漏洞利用？不能，零日漏洞说明沙箱是纵深防御的一层而非万能方案
- CORS 预检请求什么场景触发？非简单请求（自定义头、非 GET/POST 方法等）会先发 OPTIONS
- CSP 的 nonce 和 hash 模式有什么区别？nonce 是一次性随机值，hash 是脚本内容的摘要指纹
- 浏览器安全 vs 浏览器隐私有什么区别？安全防护恶意攻击，隐私防止用户追踪，Chrome 安全强但隐私默认偏弱前端5月27日 22:32
Chrome 浏览器如何进行性能优化？## Chrome 性能优化从哪几个维度入手？
三大维度：**加载性能**（资源到浏览器的时间）、**渲染性能**（浏览器绘制页面的效率）、**运行时性能**（页面交互的流畅度）。面试中按这个框架回答，比零散列举更有说服力。
## 加载性能怎么优化？
核心目标是缩短首屏时间。关键手段：
- **资源压缩**：Brotli 替代 Gzip，CSS/JS 做 Tree Shaking 删除死代码，图片用 WebP/AVIF 格式
- **代码分割**：路由级懒加载，首屏只加载关键 CSS 和 JS，非关键资源 defer 或 async
- **缓存策略**：静态资源配强缓存（Cache-Control: max-age），API 走协商缓存（ETag/Last-Modified）
- **预加载**：`<link rel="preload">` 加载关键资源，`<link rel="prefetch">` 预取下一页资源
```html
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero.webp" as="image">
```
**追问**：首屏 LCP 6 秒怎么排查？先用 DevTools Performance 面板定位 LCP 元素，再看网络瀑布图找阻塞链，逐项优化。
## 渲染性能怎么优化？
关键是减少重排（Layout）和重绘（Paint），因为它们会阻塞主线程。
- **批量 DOM 操作**：用 DocumentFragment 或 `requestAnimationFrame` 合并更新
- **CSS 动画优先**：用 `transform` 和 `opacity` 做动画，这两个属性只触发合成层，不触发布局和绘制
- **避免强制同步布局**：读写样式分开，不要在循环中交替读取 offsetWidth 和修改样式
- **will-change 谨慎使用**：提前告知浏览器该元素将变化，但滥用会导致图层爆炸
```javascript
// 差：读写交替，触发强制同步布局
elements.forEach(el => {
const width = el.offsetWidth; // 读
el.style.width = width * 2 + "px"; // 写
});
// 好：先读完再写
const widths = elements.map(el => el.offsetWidth);
elements.forEach((el, i) => {
el.style.width = widths[i] * 2 + "px";
});
```
**追问**：如何判断页面是否存在布局抖动？DevTools Performance 面板中紫色 Layout 块频繁出现且与 Recalculate Style 交替就是布局抖动。
## 运行时性能怎么优化？
- **长任务拆分**：超过 50ms 的任务会阻塞交互，用 `requestIdleCallback` 或 `scheduler.yield()` 拆分
- **事件委托**：列表场景在父元素绑定一个监听器，而非每个子元素都绑定
- **防抖节流**：scroll/resize/input 事件必须节流，搜索建议用防抖
- **内存泄漏排查**：DevTools Memory 面板拍快照对比，关注 Detached DOM 节点和未清理的定时器
**追问**：内存泄漏常见原因有哪些？未清除的 setInterval、闭包持有大对象引用、DOM 移除后事件监听器未移除、全局变量意外挂载。
## 用什么工具度量性能？
- **Lighthouse**：一键生成性能评分和优化建议
- **Performance 面板**：录制用户操作，分析主线程占用、布局、绘制耗时
- **Core Web Vitals**：LCP（加载）、INP（交互）、CLS（稳定），这三个指标直接影响搜索排名
性能优化不是罗列清单，而是**先度量再优化**。找到瓶颈，针对性处理，才是面试官想听到的思路。前端5月27日 22:32
Chrome 浏览器的多进程架构是怎样的？Chrome 多进程架构将浏览器功能拆分到独立进程中运行，核心目标是隔离故障、提升安全和利用多核性能。最新版 Chrome 打开一个页面至少启动 4 个进程：浏览器进程、渲染进程、GPU 进程和网络进程。
## 五种核心进程
**浏览器进程**是整个浏览器的"总管"，负责地址栏、书签、前进后退等 UI 交互，同时协调其他子进程的创建与销毁。
**渲染进程**是数量最多的进程，每个标签页（严格说是每个站点）分配一个。它运行 Blink 排版引擎和 V8 引擎，将 HTML/CSS/JS 转化为可交互页面。渲染进程被沙箱隔离，即使被恶意代码攻破也无法直接访问系统资源。
**GPU 进程**专门处理 GPU 任务，最初只为 3D CSS，现在所有页面合成和 UI 绘制都依赖它。
**网络进程**负责所有网络请求，从浏览器进程中独立出来后，网络 I/O 不再阻塞 UI 线程。
**插件进程**运行浏览器扩展，每个插件独立一个进程，崩溃不影响其他页面。
## 架构演进：从多进程到面向服务
2016 年起 Chrome 推进 SOA（面向服务架构）重构，将浏览器进程内的模块（存储、网络、UI 等）拆成独立服务，按需运行在独立进程或合并到现有进程中。资源充裕时拆分更细，资源紧张时合并更省内存——这种弹性是传统多进程架构做不到的。
## Site Isolation 站点隔离
2018 年 Spectre 漏洞暴露了同进程内不同 iframe 可互相读取内存的风险。Chrome 随即上线 Site Isolation：不同站点（same-site）的页面强制分到不同渲染进程，即使同一标签页内的跨站 iframe 也不例外。这是对"每个标签页一个进程"策略的重要补丁。
## 进程间通信
各进程通过 Mojo（Chrome 现代 IPC 框架）进行异步消息传递，大数据场景使用共享内存。渲染进程通过 `RenderProcess` 对象与浏览器进程保持连接。
## 追问方向
- Chrome 多进程的内存代价如何？——每个进程独立一份 V8 堆和 Blink 对象，内存开销显著，Chrome 用进程复用（Process Sharing）缓解。
- 渲染进程为什么必须沙箱化？——渲染进程直接执行第三方代码，沙箱限制其系统调用，即使被攻破也只能在受限环境中操作。
- 如何用 DevTools 观察进程？——打开 `chrome://process-internals` 或任务管理器（Shift+Esc）查看各进程的内存和 CPU 占用。前端5月27日 21:52
Chrome 浏览器渲染流程是什么？## 渲染流程六步走
Chrome 将 HTML、CSS、JavaScript 转化为屏幕像素，依次经历六个阶段：
1. **构建 DOM 树**：HTML 解析器将标签转为节点。遇到非阻塞资源（如图片）继续解析，遇到 `<script>` 则暂停 DOM 构建，等脚本执行完才恢复。
2. **构建 CSSOM 树**：CSS 解析器将样式规则转为 CSS 对象模型。CSS 是阻塞渲染的资源——CSSOM 未就绪前不会进行下一步。
3. **构建渲染树**：DOM 与 CSSOM 合并，只保留可见节点。`<head>` 及子元素、`display: none` 的节点不进入渲染树（`visibility: hidden` 仍保留，因占空间）。
4. **布局（Layout/Reflow）**：计算每个节点的位置和大小，输出盒模型。这是重排发生的阶段。
5. **绘制（Paint）**：将可见部分绘制到屏幕。样式变化不影响布局时只触发重绘，开销远小于重排。
6. **合成（Composite）**：多个图层合并为最终画面。使用 3D transform、`will-change`、video/canvas 的元素被提升为独立合成层，由 GPU 处理，跳过主线程的重排和重绘。
## 重排、重绘与直接合成
- **重排**：几何属性变化（宽高、位置、边距、字体大小），或读取 `offsetWidth`/`scrollTop` 等触发布局计算的属性
- **重绘**：外观属性变化（颜色、背景、阴影），几何未变
- **直接合成**：仅改 `transform` 和 `opacity`，跳过布局和绘制
## JS 与 CSS 的阻塞关系
- JS 阻塞 DOM 构建：遇到 `<script>` 暂停解析，`async`/`defer` 可改变行为
- CSS 阻塞 JS 执行：脚本依赖样式时须等 CSSOM 构建完毕
- GUI 渲染线程与 JS 引擎线程互斥：JS 执行期间不渲染
## 追问方向
- 从输入 URL 到页面渲染完成，完整链路是什么？
- `requestAnimationFrame` 在渲染流程哪一步执行？与 `setTimeout` 有何区别？
- 如何用 DevTools 定位重排重绘？（Performance 面板查看 Layout/Paint 事件）
- 合成层隐式提升机制是什么？过多合成层会导致什么问题？