共 27 道 浏览器与网络 方向的面试题，每题附完整答案与代码示例。点击右侧方框可标记掌握度。
对比 特性 HTTP HTTPS ------ ------ ------- 端口 80 443 加密 ❌ 明文传输 ✅ TLS/SSL 加密 证书 不需要 需要 CA 证书 性能 快 略慢（握手开销…
请求方法 方法 说明 幂等 安全 ------ ------ ------ ------ GET 获取资源 ✅ ✅ POST 创建资源 ❌ ❌ PUT 完整更新资源 ✅ ❌ PATCH 部分更新资源 …
缓存流程 强缓存 不发请求，直接从缓存读取。 HTTP/1.1：Cache-Control（优先） HTTP/1.0：Expires（已过时） 协商缓存 发请求验证缓存是否有效，有效返回 304。 方…
同源策略 浏览器安全策略： 协议、域名、端口 三者完全相同才算同源。不同源的请求默认被浏览器拦截。 跨域解决方案 1. CORS（最常用） 服务端设置响应头允许跨域： 简单请求 条件（同时满足）： -…
XSS（跨站脚本攻击） 攻击者在页面中注入恶意脚本，在用户浏览器中执行。 类型： 1. 存储型 XSS ：恶意代码存入数据库，所有访问者都受影响 2. 反射型 XSS ：恶意代码在 URL 中，服务器…
对比 特性 Cookie localStorage sessionStorage ------ -------- ------------- ---------------- 大小 4KB 5MB 5…
完整流程 1. URL 解析 2. DNS 查询 3. TCP 三次握手 4. 浏览器渲染流程 详细步骤： 1. 解析 HTML → 构建 DOM 树 2. 解析 CSS → 构建 CSSOM 树 3…
概念 重排（Reflow） ：元素的大小、位置发生变化，浏览器重新计算布局。 重绘（Repaint） ：元素外观变化（颜色、背景等），但不影响布局，浏览器重新绘制。 触发重排的操作 - 添加/删除可见…
事件流三个阶段 事件委托 利用事件冒泡，在父元素上统一处理子元素的事件。 事件委托优势 1. 减少事件监听器数量 ，节省内存 2. 动态元素自动处理 ：后添加的 li 也能响应点击 3. 方便管理 ：…
DOM（Document Object Model） DOM 是 HTML/XML 文档的编程接口，将文档表示为树形结构，JavaScript 可以通过 DOM API 操作页面内容。 获取元素 创建…
存储方案对比 方案 容量 类型 异步 适用场景 ------ ------ ------ ------ ---------- Cookie 4KB 字符串 ❌ 认证凭证 localStorage 5M…
加载优化 1. 减少请求 - 合并文件（JS/CSS 打包） - 雪碧图 → CSS 图标/字体图标 → SVG sprite - 内联关键 CSS（Critical CSS） 2. 压缩 - Gzi…
方案 1：原生 loading 属性（最简单） - 浏览器原生支持，零 JS - 兼容性：Chrome 76+、Firefox 75+、Safari 15.4+ - 简单场景推荐 方案 2：Inter…
虚拟列表只渲染 可视区域 内的元素，而非全部，适用于大数据列表。 原理 实现核心 动态高度的虚拟列表 当每项高度不固定时，需要维护位置缓存： 现成库 适用场景 - 万级数据列表 - 聊天记录 - 表格…
Web Worker JavaScript 是单线程的，Web Worker 允许在 后台线程 中运行 JS，不阻塞主线程。 基本使用 主线程： Worker 线程（worker.js）： 使用场景 …
基本操作 分支操作 撤销操作 合并 vs 变基 rebase 金科玉律 ：不要 rebase 已推送到远程的公共分支！ 储藏（Stash） 远程操作 常见工作流 Git Flow： GitHub Fl…
PWA（Progressive Web App） 渐进式 Web 应用，结合 Web 和原生应用的优点： - 可安装（添加到主屏幕） - 离线可用 - 推送通知 - 后台同步 Service Work…
WebSocket vs HTTP 特性 HTTP WebSocket ------ ------ ----------- 通信方式 请求-响应 全双工 连接 短连接（HTTP/1.1 keep-al…
常见安全威胁 1. XSS（跨站脚本攻击） （详见 BE-005） 2. CSRF（跨站请求伪造） （详见 BE-005） 3. 点击劫持（Clickjacking） 攻击者用透明 iframe 覆盖…
CDN（Content Delivery Network） 内容分发网络，将资源缓存到全球各地的边缘节点，用户就近获取，减少延迟。 工作原理 DNS 智能解析 CDN 缓存策略 前端利用 CDN 1.…
CI/CD 概念 - CI （持续集成）：代码推送后自动构建、测试 - CD （持续交付/部署）：自动部署到测试/生产环境 典型前端 CI/CD 流程 GitHub Actions 示例 分支策略 常…
前端监控三大领域 1. 错误监控 ：JS 错误、资源加载失败、API 错误 2. 性能监控 ：加载时间、FCP、LCP、白屏时间 3. 行为监控 ：PV/UV、点击流、用户路径 错误监控 1. JS …
SEO 核心原则 1. 可爬取 ：搜索引擎能访问页面内容 2. 可索引 ：页面能被搜索引擎收录 3. 内容相关 ：页面内容与搜索关键词匹配 4. 性能好 ：加载速度影响排名 技术优化 1. 语义化 H…
ESLint 常用规则： - no-unused-vars：未使用变量 - no-console：禁用 console - eqeqeq：必须用 === - prefer-const：优先 const…
流式场景（如 AI 对话）的核心是「 边读边处理，不 accumulate 全量 」。 1. 用 ReadableStream 逐块消费，而不是等全部读完 2. 避免内存暴涨的关键点 - 不要拼接整个…
把「5s - 200ms」拆成三段瓶颈，逐段优化： 1. 网络层（TTFB 太大） - 服务端 ：接口加缓存（Redis）、数据库加索引、预计算/预渲染热点数据。 - CDN ：静态资源与可缓存接口走…
定义 指标 含义 优秀阈值 ------ ------ ---------- FCP （First Contentful Paint） 浏览器 首次 渲染出任何文本/图片/非空白内容 < 1.8s L…