前端2月20日 13:29
Chrome 里如何定位并优化慢网络请求？优化 Chrome 网络请求，先用 DevTools Network 找慢在哪里。一次请求会经历 DNS、TCP/TLS、排队、TTFB、下载等阶段；不同阶段慢，处理手段完全不同。TTFB 高通常是后端或网关慢，下载慢可能是资源太大，排队多可能是连接数、优先级或主线程阻塞。
## 追问
### HTTP/2 以后还要合并 JS 和 CSS 吗？
不一定。HTTP/2 多路复用降低了小请求连接成本，过度合并反而会让缓存失效范围变大。
### preload、prefetch、preconnect 怎么选？
preconnect 提前建立跨域连接；preload 抢首屏关键资源；pref...
乐闻
前端2月20日 13:36
Chrome 为什么会拦截跨域请求？前端该怎么解决？Chrome 拦截跨域是同源策略在保护用户数据。协议、域名、端口任意一个不同就算跨域；前端可以发起请求，但浏览器会在读取响应时检查 CORS 头。真正的解决点通常在服务端：明确允许哪些来源、方法、请求头，是否允许携带 Cookie。开发环境可以用代理绕过限制，生产不要靠关闭安全策略或插件。
## 追问
### CORS 和 JSONP 有什么区别？
CORS 是标准跨域机制，支持多种方法和预检；JSONP 只利用 script 标签，只能 GET，安全边界差。
### 为什么有些请求会先发 OPTIONS？
带自定义请求头、非简单方法或特殊 Content-Type 时，Chrome...前端2月20日 13:36
Chrome 如何管理内存？V8 垃圾回收和泄漏排查怎么做？Chrome 的内存管理主要由多进程架构、Blink 渲染管线和 V8 垃圾回收一起完成。每个标签页、iframe、扩展或站点隔离进程都可能占用独立内存；JS 对象由 V8 管，DOM、样式、图片、GPU 资源则不完全在 JS 堆里。所以排查内存问题不能只看一个数字，要分清是 JS 堆增长、DOM 节点泄漏，还是图片、Canvas、WebGL 资源没有释放。
## 追问
### V8 垃圾回收大概怎么工作？
V8 会把对象分成新生代和老生代，短命对象优先在新生代快速回收，存活久的对象会晋升到老生代。
### 最常见的内存泄漏有哪些？
定时器没清、事件监听没移除、全局数组当缓存、闭包引...前端2月20日 13:37
Chrome Service Worker 是什么？生命周期和缓存坑有哪些？Service Worker 是运行在页面之外的浏览器脚本，Chrome 用它来做请求拦截、离线缓存、推送通知和后台同步。它不直接操作 DOM，也不是一直常驻后台线程，而是被 install、activate、fetch、push 等事件唤醒，处理完任务后可能被浏览器回收。理解它的关键不是背 API，而是记住：它站在页面和网络之间，但生命周期由浏览器控制。
## 追问
### Service Worker 和普通 JS 脚本有什么区别？
普通 JS 跟着页面走，页面关闭脚本就结束；Service Worker 注册后独立于页面。它不能访问 window 和 DOM，需要用 postMe...前端2月20日 13:37
Chrome 如何支持 PWA？安装、离线和缓存边界是什么？Chrome 支持 PWA，靠的不是某个“打包开关”，而是浏览器把 Web App Manifest、Service Worker、HTTPS、安装入口和权限能力串在一起。页面先要像普通网站一样可访问，再通过 manifest 告诉 Chrome 应用名称、图标、启动地址、显示模式和主题色；Service Worker 负责接管部分网络请求，让核心资源可以缓存，弱网或离线时仍有可用界面。
## 追问
### Chrome 判断网站能不能安装成 PWA 看什么？
通常要有 HTTPS、有效 manifest、合适尺寸图标，以及可被 Service Worker 控制的页面。安装提示还会结...前端2月20日 13:37
Chrome GPU 加速怎么实现？合成层、will-change 和动画怎么取舍？Chrome 的 GPU 加速主要发生在合成阶段：页面先经过样式计算、布局、绘制，再把部分内容交给 GPU 作为合成层处理。它能让 transform、opacity 这类动画更顺，但不是所有属性都适合丢给 GPU；如果滥用，反而会增加显存、纹理上传和合成成本。
## 追问
### 哪些 CSS 更容易触发 GPU 合成？
常见的是 transform、opacity，以及部分 filter、视频、Canvas、固定定位元素。开发里通常用 transform 做位移和缩放，不要用 left、top 频繁改位置。
### will-change 是不是越多越好？
不是。它只是提前告诉浏...前端2月20日 13:37
Chrome DevTools 调试技巧有哪些？断点、网络和性能怎么用？Chrome 调试的核心不是把 DevTools 每个面板都点一遍，而是按问题类型选工具：样式错看 Elements，请求慢看 Network，逻辑异常看 Sources，卡顿掉帧看 Performance，内存上涨看 Memory。这样排查更快，也不容易在 Console 里靠猜。
## 追问
### Elements 面板适合解决什么问题？
它适合查 DOM 结构、CSS 覆盖关系、盒模型尺寸和最终计算样式。要注意样式可能来自媒体查询、伪类、继承和组件库默认规则。
### Sources 断点怎么用才高效？
普通断点查确定位置，条件断点只在某个参数或状态出现时暂停，XHR/fet...前端2月20日 13:37
Chrome 隐私保护功能有哪些？无痕、Cookie 和权限怎么设置？Chrome 的隐私保护不是只开无痕窗口就够了。无痕模式只能让本机不保留历史记录、Cookie 和表单数据，网站、公司网络、运营商仍然可能看到访问行为。真正有用的做法，是把 Cookie、网站权限、安全浏览、密码检查、同步数据和扩展权限一起管起来。
## 追问
### 无痕模式到底保护什么？
它主要保护这台设备上的痕迹，比如浏览历史、临时 Cookie、搜索记录和表单输入。它不等于匿名上网。
### 第三方 Cookie 要不要全部禁用？
多数情况下建议阻止第三方 Cookie，因为它们常用于跨站跟踪。遇到老旧登录或支付异常时，可以只给可信站点加例外。
### 哪些权限最容易被忽略...前端2月20日 15:44
Astro View Transitions 如何工作？怎么避免页面过渡踩坑？Astro View Transitions 的核心是：页面仍然按多页应用导航，但 Astro 在跳转时拦截链接、获取新页面、替换 DOM，并借助浏览器 View Transitions API 做过渡动画。它给静态站带来接近 SPA 的切页手感，但不等于把站点变成完整 SPA；SEO、静态输出和按页加载的优势仍保留。
## 追问
### View Transitions 和 SPA 路由有什么区别？
SPA 通常只替换客户端状态和组件树。Astro 更像增强版 MPA 导航，新页面仍是单独文档，只是在切换时接管加载和替换过程。
### 为什么脚本状态会丢？
导航后 DOM 会被替换...前端2月20日 18:55
Astro 如何做好 SEO？Meta、结构化数据和站点地图怎么配？Astro 做 SEO 的优势不在插件多，而在默认输出更接近搜索引擎喜欢的页面：静态 HTML、少 JavaScript、首屏快、内容能直接被爬虫读到。落地时重点不是堆满 meta，而是保证每页有唯一标题、稳定 canonical、准确 description、可分享 OG、合适结构化数据，以及能被发现的 sitemap。
## 追问
### Astro 为什么比很多 SPA 更适合 SEO？
Astro 默认把页面渲染成 HTML，爬虫不需要等客户端 JavaScript 执行完才看到正文。但如果正文依赖客户端接口再拉取，仍可能被漏抓。
### Meta 标签是不是越多越好？
不是...