前端2026年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项目也同时为其他开发者提供了构建自己浏览器的基础。
前端2026年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"
```前端2026年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
```前端2026年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">
```前端2026年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');
```前端2026年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); };
```前端2026年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)));
});
```前端2026年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');
}
```前端2026年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; }
```前端2026年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。