浏览器与网络

---

第一部分：浏览器原理

一、浏览器架构与进程线程模型

Q1：Chrome 多进程架构包含哪些进程？为什么采用多进程？

标准答案：

1. 核心进程分类

   • 浏览器主进程：负责界面展示、用户交互、进程管理、网络请求调度、存储管理；

   • 渲染进程：每个标签页/iframe 独立一个（默认），负责 HTML/CSS/JS 解析、页面渲染、JS 执行、事件循环；

   • GPU 进程：负责 UI 绘制、硬件加速、3D 渲染，所有标签页共享；

   • 插件进程：负责第三方插件运行（如 Flash），插件独立隔离；

   • 网络进程：独立处理网络请求、资源加载（Chrome 67+从主进程拆分）。

2. 多进程优势

   • 隔离性：单个标签页崩溃不影响整个浏览器，插件崩溃不影响渲染；

   • 安全性：沙箱机制隔离渲染/插件进程，限制系统权限；

   • 性能：多核 CPU 并行处理，渲染、网络、GPU 任务解耦。

坑点：渲染进程默认是站点隔离（同一站点 iframe 共享），而非绝对每个标签页独立。

追问：渲染进程内有哪些核心线程？

Q2：渲染进程的核心线程有哪些？各自职责？

标准答案：

1. GUI 渲染线程：解析 HTML/CSS 生成 DOM/CSSOM、构建渲染树、执行布局/绘制/合成，与 JS 引擎线程互斥；

2. JS 引擎线程：执行 JS 代码（V8），JS 执行会阻塞 GUI 渲染；

3. 事件触发线程：管理事件队列（鼠标/键盘/网络），将任务放入宏任务队列；

4. 定时器触发线程：处理setTimeout/setInterval，浏览器自带定时器校准，规避 JS 单线程阻塞；

5. 异步 HTTP 请求线程：处理 XHR/fetch 请求，请求完成后将回调放入宏任务队列。

关键约束：GUI 渲染和 JS 引擎互斥运行，JS 长时间执行会阻塞页面渲染。

Q3：什么是浏览器沙箱？作用是什么？

标准答案：

沙箱是浏览器的安全隔离机制，限制渲染/插件进程的系统权限：

1. 渲染进程无法直接访问本地文件、系统 API、内存；

2. 网络、文件读写等高危操作必须通过 IPC 通信交由浏览器主进程执行；

3. 防止恶意网页获取系统权限、窃取本地数据。

---

二、页面渲染全流程（高频压轴题）

Q4：从输入 URL 到页面展示，完整发生了什么？（网络+浏览器全链路）

标准答案：

1. 网络阶段

   • DNS 解析：域名 →IP（递归+迭代查询）；

   • TCP 三次握手：建立可靠连接；

   • HTTPS 握手：TLS 协商加密套件、验证证书；

   • 发送 HTTP 请求，服务器响应返回 HTML；

   • TCP 四次挥手（请求完成后）。

2. 浏览器解析阶段

   • 解析 HTML 生成DOM 树，遇到 CSS/JS 暂停解析并加载资源；

   • 解析 CSS 生成CSSOM 树，与 DOM 树合并为渲染树（RenderTree）（只包含可见节点）；

3. 渲染阶段

   • 布局（Layout/Reflow）：计算渲染树节点几何信息（位置/宽高）；

   • 绘制（Paint/Repaint）：填充像素、绘制背景/文字/边框；

   • 合成（Composite）：将图层合并，交给 GPU 渲染展示页面。

4. 交互阶段：JS 执行、事件绑定、后续重排重绘。

追问：CSS/JS 分别如何阻塞渲染？如何解决？

Q5：CSS/JS 阻塞渲染的原理与优化方案？

标准答案：

1. CSS 阻塞规则

   • CSSOM 未构建完成前，GUI 渲染被阻塞，避免无样式闪烁（FOUC）；

   • CSS 不会阻塞 HTML 解析，但会阻塞 JS 执行（JS 可能读取样式）。

2. JS 阻塞规则

   • JS 执行会暂停 HTML 解析+GUI 渲染，JS 可修改 DOM/CSSOM；

   • 异步 JS（async/defer/动态 script）不会阻塞解析。

3. 优化方案

   • CSS：内联关键 CSS、非关键 CSS 异步加载、压缩合并；

   • JS：defer（顺序执行，DOMContentLoaded 前）、async（无序执行）、动态 import、放在 body 底部。

Q6：重排(Reflow)、重绘(Repaint)、合成(Composite) 区别与优化？

标准答案：

类型	触发条件	开销	优化核心
重排	修改几何属性（宽高/位置/display/字体）、窗口 resize、读取布局属性	极高（全渲染树重新计算）	减少几何修改、批量 DOM 操作、读写分离
重绘	修改非几何样式（颜色/背景/阴影）	中等	减少昂贵样式、合并绘制区域
合成	修改 transform/opacity（合成层属性）	极低	优先用合成属性做动画，开启硬件加速
高频坑点：

1. 强制同步布局：连续读取布局属性（offsetWidth/scrollTop）+ 修改样式，浏览器强制多次重排；

2. will-change 提前创建合成层，但滥用会导致层爆炸，占用内存。

优化手段：

• 批量 DOM 操作用DocumentFragment；

• 动画元素脱离文档流（absolute/fixed），缩小重排范围；

• 用 transform/opacity 做动画，避免重排重绘。

Q7：什么是合成层？层爆炸的危害与规避？

标准答案：

1. 合成层：浏览器将页面拆分为独立图层，GPU 单独渲染后合并，提升动画性能；

2. 触发合成层的条件：transform/opacity 动画、will-change: transform、video/canvas、3D transforms；

3. 层爆炸危害：图层过多导致 GPU 内存占用飙升，页面卡顿甚至崩溃；

4. 规避：

   • 不滥用will-change，用完移除；

   • 避免大量子元素同时创建合成层；

   • 通过 Chrome DevTools Layers 面板监控图层数量。

---

三、浏览器事件循环（结合 JS 执行）

Q8：浏览器事件循环中，微任务/宏任务/渲染的执行顺序？

标准答案：

执行优先级：同步代码 > 微任务队列 > 浏览器渲染 > 单个宏任务

完整流程：

1. 执行执行栈中的同步代码；

2. 清空当前所有微任务（Promise.then/await/MutationObserver）；

3. 检查是否需要渲染页面（浏览器刷新频率 60Hz，约 16ms 一次），需要则执行 GUI 渲染；

4. 取出一个宏任务（setTimeout/点击事件/XHR 回调）执行；

5. 循环往复。

关键：微任务每次循环清空队列，宏任务每次只执行一个；渲染时机在微任务之后、宏任务之前。

Q9：MutationObserver 是什么？属于宏任务还是微任务？

标准答案：

1. MutationObserver 是监听 DOM 树变化（节点增删/属性修改）的 API；

2. 属于微任务，DOM 变化后不会立即触发，而是等同步代码执行完、微任务队列清空时触发；

3. 对比 DOM Mutation Event（废弃）：异步不阻塞、批量触发、性能更高。

---

四、浏览器存储与离线能力

Q10：Cookie/LocalStorage/SessionStorage/IndexedDB 区别？

标准答案：

存储方式	容量	生命周期	跨域	与服务端通信	数据类型	适用场景
Cookie	4KB	手动设置 expires/max-age	同源+domain/path 配置	每次请求自动携带	字符串	身份认证、会话状态
LocalStorage	5-10MB	永久生效（手动清除）	同源	不携带	字符串	持久化本地配置、缓存
SessionStorage	5-10MB	标签页关闭失效	同源	不携带	字符串	临时会话、单页状态
IndexedDB	无上限	永久生效	同源	不携带	对象/文件	大量数据、离线应用、文件缓存
追问：Cookie 的 SameSite 属性作用？

Q11：Cookie 的 SameSite 取值与作用？防范什么攻击？

标准答案：

1. 取值：

   • Strict：完全禁止跨站携带 Cookie，最严格；

   • Lax：默认值，仅 GET 请求、顶级导航跨站携带，大部分场景平衡安全；

   • None：允许跨站携带，必须配合Secure+HTTPS；

2. 核心作用：防范 CSRF 跨站请求伪造，限制第三方站点携带 Cookie 发起请求。

Q12：Service Worker 核心作用与生命周期？

标准答案：

1. 核心作用：

   • 代理网络请求，实现离线缓存（HTTP 缓存补充）；

   • 后台同步、消息推送、拦截请求做缓存策略；

   • 运行在独立线程，不阻塞主线程，HTTPS/[localhost](http://localhost)环境生效。

2. 生命周期：install → activate → fetch/message/sync → redundant；

3. 关键 API：caches.open缓存资源、fetch拦截请求、skipWaiting激活新 SW。

---

五、浏览器安全（大厂必问）

Q13：同源策略（SOP）限制哪些行为？哪些标签不受限？

标准答案：

1. 同源定义：协议+域名+端口完全一致；

2. 限制行为：

   • 无法读取跨域 DOM、Cookie、Storage、IndexedDB；

   • 无法发送跨域 AJAX 请求（浏览器拦截响应）；

3. 不受限标签：<script>/<img>/<link>/<video>，利用 src/href 发起跨域请求，即跨域资源嵌入。

Q14：XSS 攻击分类、原理、防御方案？

标准答案：

1. 攻击分类：

   • 存储型 XSS：恶意脚本存入数据库，页面渲染时执行（高危）；

   • 反射型 XSS：恶意脚本放在 URL 参数，服务端直接返回执行；

   • DOM 型 XSS：前端 JS 直接拼接用户输入到 DOM，无服务端参与。

2. 防御方案：

   • 输入转义：对用户输入的< > & " '转义为 HTML 实体；

   • CSP 内容安全策略：限制资源加载源、禁止内联脚本/eval；

   • Cookie 设置HttpOnly：禁止 JS 读取 Cookie；

   • 避免使用innerHTML/document.write拼接用户数据；

   • 输入白名单校验。

Q15：CSRF 攻击原理、防御方案？

标准答案：

1. 原理：攻击者诱导用户在已登录态下，访问第三方站点，发起跨域请求，自动携带目标站 Cookie，伪造用户操作；

2. 防御方案：

   • Cookie 设置SameSite=Lax/Strict；

   • 接口添加Token 验证（JWT/自定义请求头 Token）；

   • 校验 Referer/Origin 请求头；

   • 敏感操作二次验证（验证码/密码）。

Q16：CSP 内容安全策略配置与作用？

标准答案：

1. 作用：指定页面可加载的资源源、禁止危险行为，从源头防范 XSS/资源劫持；

2. 配置方式：HTTP 响应头Content-Security-Policy、meta 标签；

3. 常用指令：

   • default-src：默认资源源；

   • script-src：JS 脚本源；

   • style-src：样式源；

   • img-src：图片源；

   • object-src 'none'：禁止插件；

   • inline-script：禁止内联脚本。

Q17：点击劫持原理与防御？

标准答案：

1. 原理：攻击者用 iframe 嵌入目标站点，叠加透明层诱导用户点击，伪造操作；

2. 防御：

   • HTTP 头X-Frame-Options: DENY/SAMEORIGIN，禁止 iframe 嵌套；

   • CSP 的frame-ancestors 'none'；

   • 前端防嵌套脚本（if(top!==self) top.location.href = location.href）。

---

第二部分：网络通信协议（前端网络核心）

一、HTTP 协议全版本

Q18：HTTP1.0/1.1/2/3 核心特性与痛点？

标准答案：

1. HTTP1.0

   • 特性：短连接（一次请求一次 TCP）、缓存简陋、无 Host 头；

   • 痛点：连接开销大、队头阻塞、性能差。

2. HTTP1.1

   • 特性：长连接（Connection: keep-alive）、管道化、分块传输、Host 头、缓存增强；

   • 痛点：队头阻塞（单连接串行请求，前一个失败阻塞后续）、头部冗余、文本协议。

3. HTTP2

   • 特性：二进制分帧、多路复用（单连接多流并行）、头部压缩（HPACK）、服务器推送、流优先级；

   • 痛点：TCP 层队头阻塞（丢包导致整个连接阻塞）。

4. HTTP3

   • 特性：基于 QUIC 协议（UDP）、0-RTT 握手、解决 TCP 队头阻塞、连接迁移；

   • 痛点：UDP 被防火墙限制、生态兼容待完善。

追问：HTTP2 多路复用为什么能解决 HTTP1.1 队头阻塞？

Q19：HTTP 常见请求头/响应头高频字段（面试必背）

标准答案：

1. 缓存相关：Cache-Control/Expires/Last-Modified/ETag/If-Modified-Since/If-None-Match；

2. 跨域相关：Access-Control-Allow-Origin/Access-Control-Allow-Methods/Access-Control-Max-Age；

3. 安全相关：Content-Security-Policy/X-Frame-Options/Secure；

4. 资源相关：Content-Type/Content-Encoding/Accept-Encoding；

5. 连接相关：Connection/Keep-Alive。

Q20：HTTP 状态码分类与高频码含义？

标准答案：

1. 1xx：信息响应（101 协议切换）；

2. 2xx：成功（200 正常/201 创建/204 无内容）；

3. 3xx：重定向（301 永久重定向/302 临时/304 协商缓存）；

4. 4xx：客户端错误（400 参数/401 未授权/403 禁止/404 不存在/405 方法不允许）；

5. 5xx：服务端错误（500 服务器异常/502 网关错误/504 超时）。

---

二、HTTP 缓存（高频核心）

Q21：强缓存与协商缓存的执行流程、优先级、字段？

标准答案：

1. 执行优先级：强缓存 > 协商缓存

2. 强缓存（不发请求，直接用本地）

   • 字段：Cache-Control: max-age=xxx（相对时间，优先级最高）、Expires（绝对时间，兼容）；

   • 状态码：200 OK (from disk cache/from memory cache)。

3. 协商缓存（发请求，服务端校验）

   • 响应头：Last-Modified(文件修改时间)、ETag(文件唯一标识)；

   • 请求头：If-Modified-Since、If-None-Match；

   • 状态码：304 Not Modified（命中）、200（未命中）。

优先级：Cache-Control > Expires；ETag > Last-Modified。

Q22：内存缓存(Memory Cache)与磁盘缓存(Disk Cache)区别？

标准答案：

1. Memory Cache：内存存储，读取速度极快，进程关闭失效，存储小资源（JS/CSS/字体）；

2. Disk Cache：磁盘存储，读取速度较慢，持久化保存，存储大资源（图片/视频）；

3. 淘汰规则：浏览器按资源大小、访问频率自动分配，优先使用 Memory Cache。

Q23：缓存策略如何设计（静态资源/接口）？

标准答案：

1. 静态资源（JS/CSS/图片/字体）

   • 文件名加 hash 指纹，设置Cache-Control: max-age=31536000（永久强缓存）；

   • 资源更新则 hash 变化，请求新文件；

2. 接口数据

   • 不做强缓存，用协商缓存ETag/Last-Modified；

   • 实时接口设置Cache-Control: no-cache/no-store；

3. 不常变的静态页面：Cache-Control: max-age=300（短时间强缓存）+ 协商缓存兜底。

---

三、跨域解决方案（全场景）

Q24：CORS 跨域完整流程？简单请求与预检请求区别？

标准答案：

1. CORS 核心：服务端设置Access-Control-Allow-Origin，允许指定源跨域访问；

2. 简单请求条件（满足全部）

   • 请求方法：GET/HEAD/POST；

   • 请求头仅包含：Accept/Accept-Language/Content-Language/Content-Type(三者之一：application/x-www-form-urlencoded/multipart/form-data/text/plain)；

3. 预检请求（OPTIONS）

   • 非简单请求会先发 OPTIONS 请求，校验服务端允许的方法/头/源；

   • 缓存预检结果：Access-Control-Max-Age: xxx；

4. 关键响应头：

   • Access-Control-Allow-Origin：允许的源；

   • Access-Control-Allow-Methods：允许的请求方法；

   • Access-Control-Allow-Credentials: true：允许携带 Cookie。

Q25：除了 CORS，还有哪些跨域方案？适用场景？

标准答案：

方案	原理	适用场景	缺点
JSONP	script 标签跨域嵌入，回调函数传参	仅 GET 请求	只支持 GET、不安全、无错误处理
代理服务器	前端请求同源代理，代理转发跨域请求	开发环境（webpack-dev-server）、生产 Nginx	需服务端配置
postMessage	窗口间通信 API	iframe 跨域通信	仅窗口通信
WebSocket	无同源策略限制	实时通信跨域	仅 WebSocket 场景
Nginx 反向代理	生产环境同源代理转发	生产环境跨域	运维配置

---

四、HTTPS 与加密

Q26：HTTPS 的 TLS 握手完整流程？

标准答案：

1. 客户端发送 ClientHello：TLS 版本、随机数 client_random、支持的加密套件；

2. 服务端发送 ServerHello：确认加密套件、随机数 server_random、数字证书；

3. 客户端验证证书合法性（CA 机构校验），生成预主密钥 pre_master，用服务端公钥加密发送；

4. 服务端用私钥解密 pre_master，双方通过 client_random+server_random+pre_master 生成对称会话密钥；

5. 双方握手完成，后续通信用对称加密传输数据。

核心：非对称加密交换密钥，对称加密传输数据，兼顾安全与性能。

Q27：HTTPS 如何防范中间人攻击？数字证书作用？

标准答案：

1. 数字证书包含：服务端公钥、域名、有效期、CA 签名；

2. 校验机制：客户端用 CA 根公钥验证证书签名，确保证书未篡改、归属合法域名；

3. 防范中间人：中间人无法伪造 CA 签名证书，无法替换公钥，无法窃听对称密钥。

Q28：HTTP 与 HTTPS 的端口、区别？

标准答案：

1. 端口：HTTP 默认 80，HTTPS 默认 443；

2. 区别：HTTPS 加密传输、身份验证、防篡改/窃听，握手有额外开销，需申请证书。

---

五、TCP 与 DNS 基础

Q29：TCP 三次握手流程？为什么不能两次握手？

标准答案：

1. 流程

   • 第一次：客户端 → 服务端，SYN 包，请求建立连接；

   • 第二次：服务端 → 客户端，SYN+ACK 包，确认并响应；

   • 第三次：客户端 → 服务端，ACK 包，连接建立。

2. 拒绝两次握手：防止失效的连接请求报文段到达服务端，导致服务端建立无效连接，浪费资源。

Q30：TCP 四次挥手流程？为什么要四次？

标准答案：

1. 流程

   • 第一次：客户端 → 服务端，FIN 包，请求关闭发送；

   • 第二次：服务端 → 客户端，ACK 包，确认关闭；

   • 第三次：服务端 → 客户端，FIN 包，服务端发送完成；

   • 第四次：客户端 → 服务端，ACK 包，确认关闭，等待 2MSL 后彻底断开。

2. 四次原因：TCP 是全双工通信，收发双方需独立关闭，服务端收到 FIN 后可能仍有数据未发送完。

Q31：DNS 解析流程？递归查询与迭代查询区别？

标准答案：

1. 解析流程：浏览器缓存 → 系统缓存 → 路由器缓存 → 递归 DNS 服务器 → 根 DNS 服务器 → 顶级域名 DNS 服务器 → 权威 DNS 服务器 → 返回 IP；

2. 递归查询：客户端 → 递归 DNS，DNS 逐级查询并返回最终结果；

3. 迭代查询：递归 DNS→ 根/顶级/权威 DNS，逐个询问获取 IP。

优化：<link rel="dns-prefetch" href="//xxx.com"> 预解析 DNS。

---

六、网络性能优化（结合前端）

Q32：前端网络性能优化全方案？

标准答案：

1. 资源加载优化：合并压缩、懒加载、预加载（preload/prefetch）、CDN 分发；

2. 缓存优化：强缓存+协商缓存+Service Worker 离线缓存；

3. 协议优化：升级 HTTP2/HTTP3、开启 Gzip/Brotli 压缩；

4. 请求优化：接口合并、防抖节流、分页、请求防抖、失败重试；

5. 弱网优化：资源降级、图片压缩、骨架屏、渐进式加载。

Q33：资源提示（Resource Hints）各标签作用？

标准答案：

• dns-prefetch：提前 DNS 解析；

• preconnect：提前建立 TCP+TLS 连接；

• preload：预加载当前页关键资源，高优先级；

• prefetch：预加载下一页资源，低优先级；

• modulepreload：预加载 ES 模块；

• prerender：预渲染整个页面（慎用，耗资源）。

---

浏览器与网络模块核心总结

1. 必背主线：输入 URL→ 网络请求 → 浏览器解析 → 渲染流程 → 交互优化，全链路无断点；

2. 高频难点：HTTP2/3 特性、HTTPS 握手、重排重绘合成、XSS/CSRF 防御、CORS 预检；

3. 面试加分项：结合性能优化讲网络+渲染的联动方案，讲清缓存策略、跨域落地实践；

4. 坑点集中区：事件循环渲染时机、Cookie SameSite、强制同步布局、HTTP 队头阻塞。

（注：文档部分内容可能由 AI 生成）