Web 开发是一个复杂的领域，既有广度又有深度，但归纳起来，大部分都可以用一句话完整表达。

希望这里归纳的每一句，都可以针针见血、刀刀致命。

#HTML 篇

#一句话介绍 HTML5

• 语义化标签提升可读性、SEO、可维护性。
• 新增多媒体与绘图等能力，如 video、audio、canvas。

#meta 有哪些常见属性？

<meta> 标签主要用于定义页面的元数据（Metadata），一般服务于：浏览器解析、SEO、移动端适配。

• charset：定义字符编码（如 <meta charset="UTF-8">）。
• viewport：移动端适配核心。width=device-width, initial-scale=1.0 控制视口宽度和缩放。
• http-equiv：模拟 HTTP 响应头。
  • X-UA-Compatible：指定 IE 渲染版本。
  • Content-Security-Policy：配置内容安全策略（CSP）。
  • refresh：指定时间后重定向或刷新。
• name & content：描述性元数据。
  • keywords / description：SEO 优化。
  • robots：控制爬虫行为（index/noindex, follow/nofollow）。
  • author：标注页面作者。

#HTML 中有哪些性能优化项？

资源预请求 (rel)：

• preload：高优先级。强制浏览器立即下载当前页面必需的资源（如关键字体、核心 CSS）。
• prefetch：低优先级。利用空闲时间下载未来可能需要的资源（如预测用户会点击的下一页）。
• dns-prefetch：提前进行域名解析，减少跨域资源请求的延迟。
• preconnect：不仅解析 DNS，还提前完成 TCP 和 TLS 握手。
• prerender：在后台静默渲染整个页面（最耗性能，慎用）。

脚本加载：

• async：加载完立即执行，会阻塞 HTML 解析。
• defer：加载完后等待 HTML 解析完成、DOMContentLoaded 事件前按顺序执行（推荐）。

图片优化：

• loading="lazy"：浏览器原生支持的图片懒加载。
• <picture> 标签：响应式图片，根据媒体查询加载不同尺寸或格式（如 WebP）。

#CSS 篇

#隐藏元素有哪些方式？区别是什么？

#如何让元素垂直居中？

一、Flex 垂直居中

        

          
            
            CSS
          
          
            
          
        
        

          
1
2
3
4
5
          .parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
        
      

二、绝对定位 + transform

        

          
            
            CSS
          
          
            
          
        
        

          
1
2
3
4
5
6
          .child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
        
      

#实现一个 DOM 移动的动画有哪些方式？

• CSS3 transition + transform 使用 GPU 渲染位移。
• CSS3 animation 帧动画。
• JavaScript 定时器修改样式（适用于精细控制场景）。

#盒模型 content-box 和 border-box 的区别？

• content-box 默认值，W3C 标准盒模型，不包含边框和内边距。
• border-box 原 IE 模型，包含边框和内边距。

默认 content-box，可通过 box-sizing 指定。

#BFC 是什么？有什么用？

BFC （Block Formatting Context）是一块独立布局渲染区域，内部布局不会影响外部，常用于：

• 清除浮动（包裹浮动元素）
• 解决 Margin 合并、重叠、塌陷。
• 防止文字环绕。

#会触发 BFC 的常见场景？

• 溢出属性：overflow 非 visible（如 hidden / auto / scroll）
• 浮动元素：float 非 none。
• 显示模式：display: flex / inline-block / flow-root。
• 定位方式：position: absolute / fixed。

#清除浮动的方法

• clear 属性: left、right、both。
• 父容器触发 BFC overflow：hidden
• 伪元素清除浮动 .clearfix::after { content: ""; display: block; clear: both; }

#overflow: hidden 为什么能清除浮动

overflow：hidden 本意是溢出隐藏，但浏览器需要知道该显示多少才能隐藏剩下的，默认高度又是 auto，所以浮动的元素都会被计算为父元素的高度，顺带就实现了清除浮动的目的。

副作用：脱离文档流的元素，超出部分可能会被隐藏。

#不会导致回流（reflow）的操作有哪些？

回流本质上是 「计算几何属性」，任何破坏布局稳定的操作都会触发它。反之亦然：

• transform：由于变换发生在合成层（Composite Layer），它不会影响其他元素的布局，通常由 GPU 完成，既不触发回流也不触发重绘。
• opacity：改变透明度时，如果元素已被提升为合成层，浏览器只需重新合成图层，不触发回流。
• visibility：设置为 hidden 时，元素虽然不可见，但在页面中仍占据原本的空间。改变它只会触发重绘（Repaint），不会引发布局计算。

仅触发重绘的属性：

这些属性只改变元素的外观，不改变几何尺寸：

• 颜色相关：color、background-color。
• 装饰相关：outline、box-shadow、border-style。

#CSS 中 em 和 rem 的区别？

• em：相对单位，相对于当前元素的字体大小（继承自父元素，或继承链上的 font-size），更「局部」。
• rem：相对单位，相对于根元素（html）的字体大小，更「全局」。

#CSS 兼容性一般怎么处理？

• Autoprefixer / PostCSS 自动加前缀
• feature query：@supports (...) { ... }
• 渐进增强 / 优雅降级（必要时提供 fallback）

#浏览器、网络、安全篇

#在浏览器从输入网址到看到内容发生了什么？

1. DNS 解析（详见 《网络链路和跨域》 ）
2. 建立 TCP 连接（三次握手）
3. 发送 HTTP 请求
4. 服务器处理请求，返回响应数据
5. 浏览器渲染页面

DNS 解析部分可以简单分为：

1. 查询浏览器 DNS 缓存 / 本机 DNS 缓存。
2. 如果未命中，则：向 Local DNS Server 请求查询 NS。
3. 如果未命中，则：向 Root DNS Servers 请求查询 gTLD 地址。
4. 向 gTLD 请求，得到域名的 NS 地址。
5. 向 NS 请求域名对应的 IP 地址。
6. 向 IP 地址发起访问请求。

#浏览器渲染 HTML/CSS/JS 的过程是如何完成的？

一个完整的渲染周期包含以下五个步骤：

1. JavaScript / CSS Animation：通过 JS 或 CSS 触发视觉变化。
2. Style（样式计算）：根据选择器匹配规则，计算每个元素最终的 CSS 属性。
3. Layout（布局/回流）：浏览器计算每个元素在屏幕上的几何位置（宽度、高度、坐标）。
4. Paint（绘制/重绘）：将元素填充为颜色、背景、边框等像素，类似在画布上画出各层。
5. Composite（层合成）：将画好的各个图层按照正确的顺序（z-index 等）合并到屏幕上。

在改变一些数据或属性时，浏览器会跳过一些不必要的阶段，以进行性能优化。

路径 A：回流（Reflow）—— 全流程

当修改了几何属性（如 width、height、margin、top、left）时：

• 过程：JS → Style → Layout → Paint → Composite
• 开销：最高。因为一个元素的位置变动可能引起整个文档的连锁反应。

路径 B：重绘（Repaint）—— 跳过布局

当修改了外观属性（如 color、background-color、visibility: hidden、box-shadow）时：

• 过程：JS → Style → Paint → Composite
• 开销：中等。避开了昂贵的几何计算（Layout），但仍需重新像素填充（Paint）。

路径 C：合成（Composite Only）—— 性能最优

当修改了 transform（位移、缩放、旋转）或 opacity 时：

• 过程：JS → Style → Composite
• 开销：最低。直接由 GPU 处理图层位移或透明度变化，完全跳过 Layout 和 Paint。

在 CSS 中使用 will-change: transform; 可以显式告诉浏览器提前为该元素准备独立图层，从而确保动画极其丝滑。（但每个图层都会消耗额外的内存，要谨慎设计。）

#基本的 HTTP 状态码含义

• 2xx 正常
• 3xx 重定向（304 缓存除外）301 永久跳转、302 临时跳转
• 4xx 请求错误
• 5xx 服务端异常

#JS 解释器的 GC 机制

垃圾标记

• 执行标记：变量进入执行上下文和执行完上下文都分别有标记
• 引用计数：底层计算变量被引用了几次，为 0 则释放（Python 目前也如此）

垃圾回收

• 周期回收：类似内存监听/拦截，比如隔多久事件回收一次，内存使用率超多少回收一次
• 阈值回收：早期 IE 的 GC 机制，比如变量超过多少个就执行回收
• 动态阈值回收：IE7 中对 IE 本身 GC 的优化，阈值根据内存占用率和规律来确定，效果很好
• 增量回收：Chrome 中的机制，因为 GC 会产生不同时间的线程阻塞，所以不能一次处理太多，要分批次回收
• 优化回收：回收内存后，可能会出现内存碎片（不连贯），所以回收同时进行整理

#Web 缓存是如何工作的？

强缓存：不向服务器发请求，直接从本地读取。

• Cache-Control：max-age (相对时间，优先级高)。
• Expires：绝对过期时间（受客户端时间影响）。

协商缓存：向服务器发请求，由服务器决定是否使用缓存（304）。

• ETag / If-None-Match：基于文件内容的 Hash 值（最准确）。
• Last-Modified / If-Modified-Since：基于文件最后修改时间（秒级误差）。

#和缓存相关的常见 HTTP 头？

• Cache-Control 指定过期时间、缓存状态、选项，优先级高于 Expires
• Expires 1.0 协议中的头，指定缓存过期时间
• Last-modified 服务端资源最后变更时间，若资源未变更会返回 304
• If-Modified-Since 向服务端请求本地资源和远程资源的一致性（判断修改时间）
• If-None-Match 向服务端请求本地资源和远程资源的一致性（判断 hash 值）
• ETag 标识资源状态的随机串
  • Last-modified 标注的修改时间只能精确到秒级，是以时间为单位，一秒内修改多次的话就无法判断了
  • 避免定期生成的文件却无变动的文件因为 Last-modified 字段而频繁被更新
  • Last-modified 的时间会受生产环境（服务器、代理服务器）影响，不是百分百准确

真实生产中推荐使用 ETag，同时也可以与 Last-modified 一同使用，浏览器会优先验证 ETag，才会继续比对 Last-Modified，最后才决定是否返回 304。

#常见 Content-Type

• text/*
• audio/*
• image/*
• video/*
• application/*
• ...

#同源策略限制内容有哪些？

• Cookie
• LocalStorage / SessionStorage
• IndexedDB
• DOM
• AJAX 请求

#Cookie、Session、Token 的区别？以及 Token 的优点？

• Cookie：一种数据介质、机制，存储在客户端，容量小（4KB），每次请求自动携带，易受 CSRF 攻击。
• Session：一种数据结构，存储在服务端。用来跟踪用户的状态，这个数据可以保存在内存、数据库、文件中。
• Token (如 JWT)：无状态。服务端不存储，用户信息加密在 Token 中。

Token 的优点：支持跨域、可扩展性强（多端通用）、天然防 CSRF（不自动携带，需手动放入 Header）。

#RESTful 是啥？GET 和 POST 的本质区别

一句话：URL 仅代表资源，HTTP 请求类型来描述行为。

本质上，GET 就是请求，且 URL 的长度有限制，一般在 2k 之内； POST 就是发送数据，以 body 为数据宿主，常见类型有：application/json xml text formData 等； PUT 用于全量修改，PATCH 用于单量修改，DELETE 按照标准是不支持 body 的，但大部分浏览器和服务端都兼容实现了，但在代理情况下，数据可能会丢失。

#http 除了 get 和 post 的其他请求的一些规范？

RESTful 规范中，修改文章的显示隐藏属性，用什么方法（用 Patch，Post 是创建资源，Put 是更新完整资源，Patch 是更新资源属性

• HEAD：类似于 GET 请求，但不返回响应体，只返回响应头
• PUT：用于更新资源，通常是全量更新
• PATCH：用于更新资源，通常是部分更新
• DELETE：用于删除资源
• OPTIONS：用于查询服务器支持的 HTTP 方法

#跨域问题如何解决？有几种通信方案？

• CORS：现代标准。分为简单请求和非简单请求（后者会先发 OPTIONS 预检请求）。
• JSONP：利用 <script> 标签不受同源策略限制。只支持 GET。
• 反向代理：通过 Nginx 或其他 Proxy 将前端请求转发到同源后端接口。

#跨域时，预检请求的发起时机和过程？

OPTIONS 预检请求只在「非简单请求」时发出。

非简单请求的标准是：

• 使用了特殊的 HTTP 方法：PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH。
• 设置了非规范的 HTTP 头部：只要包含了 Accept、Accept-Language、Content-Language、Content-Type 以外的自定义 Header（例如 Authorization、X-Token 等）。
• Content-Type 的值不属于以下三种：
  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

OPTIONS 预检请求的发起过程：

1. 浏览器询问：浏览器自动发送 OPTIONS 请求，包含 Access-Control-Request-Method（真实请求的方法）和 Access-Control-Request-Headers（自定义头部）。
2. 服务器响应：服务器返回支持的方法和头部。
3. 发送真实请求：如果服务器允许，浏览器才真正发出原本的请求；如果不允许，控制台会报错。

#XSS 和 CSRF 怎么解决？

XSS (跨站脚本攻击)：注入恶意脚本。

XSS 防御方式：输入过滤、输出转义（HTML Entity）、使用 HttpOnly Cookie 防止脚本读取、配置 CSP。

CSRF (跨站请求伪造)：冒充用户发起非法请求。

CSRF 防御方式：验证 Referer/Origin、使用 Anti-CSRF Token、Samesite Cookie 属性。

#TCP & UDP 协议的区别？

TODO：补充

• TCP（Transmission Control Protocol，传输控制协议）
  • 面向连接：通信前需要建立连接（三次握手）
  • 可靠传输：数据包按顺序到达，丢包会重传
  • 流量控制和拥塞控制
  • 适用于需要高可靠性的应用，如网页浏览、文件传输、电子邮件等
• UDP（User Datagram Protocol，用户数据报协议）
  • 无连接：通信前不需要建立连接
  • 不可靠传输：数据包可能丢失、重复或乱序
  • 适用于对速度要求高且能容忍一定丢包的应用，如视频流、在线游戏、语音通话等

#TCP/IP、HTTP、Socket 的区别?

本质上压根没关系。

• TCP/IP：传输层协议，定义数据如何在网络中传输
• HTTP：应用层协议，定义如何包装数据，Web 使用 HTTP 协议作应用层协议，以封装 HTTP 文本信息
• Socket：非协议，更像一种标准、一种能力，一种对 TCP/IP 进行封装后可以进行全双工通信的能力；在 Web 中 WebSocket 是一种协议，需要使用 HTTP 发起 “握手” 来建立连接

#HTTP2 有哪些不一样，和 1 的区别？

#HTTPS

简单粗暴系列之 HTTPS 原理

简单说：将数据进行对称/非对称加密后进行传输。

SSL (Secure Sockets Layer) 由网景公司开发，3.0 后被 ISOC 接管升级为 TLS。

• 握手阶段：客户端向服务器端索要并验证公钥，双方协商生成"对话密钥"，共进行四次明文通信
• 通信阶段：双方采用"对话密钥"进行加密通信

TODO

#多路复用 (Multiplexing)

多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息，在 HTTP1.1 中「浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞」。

#二进制分帧

HTTP2 在 应用层（HTTP/2）和传输层（TCP / UDP）之间增加一个二进制分帧层。

在二进制分帧层中， HTTP/2 会将所有传输的信息分割为更小的消息和帧（frame），并对它们采用二进制格式的编码，其中 HTTP1.x 的首部信息会被封装到 header frame，而相应的 Request Body 则封装到 data frame 里面。

#首部压缩（Header Compression）

使用 HPACK 算法将重复的、多余的、正常的头部信息进行压缩处理。

#服务端推送（Server Push）

简单说：当一个客户端请求资源 X，而服务器知道它很可能也需要资源 Z 的情况下，服务器可以在客户端发送请求前，主动将资源 Z 推送给客户端。

#实时通信如何事件，长链接轮询和 websocket 的区别？

• 长轮询：客户端发送请求，服务器端保持连接，直到有数据返回或超时，客户端再重新发起请求
• WebSocket：建立持久连接，客户端和服务器端可以随时发送数据，实现双向通信

#websocket 的技术细节？

• 基于 TCP 协议
• 通过 HTTP 协议进行握手，升级为 WebSocket 协议
• 双向通信，客户端和服务器端都可以主动发送数据
• 数据传输采用帧（frame）结构，支持文本和二进制数据

#iframe/多窗口通信

• postmessage / onmessage
• window.name

#浏览器多页面通信

• localstorge
• sessionstorage
• cookies
• SharedWorker 多个页面共享线程

localstorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件。

关闭浏览器清空存储，用哪种方式：sessionStorage / localStorage / cookie

#HTML 编码解码

主要做的事：将 HTML 标签解析为转义符，或将转移符解析为标签。

#Web Components 是什么

Web Components 是一个抽象概念，按照 MDN 的解释（Web Components），包含下面 4 个技术体系：

1. Custom Elements

类似：几乎所有框架的组件机制

2. HTML Templates

即，模板片段，HTML <template> 元素是一种保存客户端内容的机制，在加载页面时不会呈现，但可能随后在运行时使用 JavaScript 实例化。

3. Shadow DOM

内容区隔离

5. HTML Imports

可以通过 HTML link 导入 Html

#JavaScript 篇