Web 开发是一个复杂的领域，既有广度又有深度，但归纳起来，大部分都可以用一句话完整表达。
希望这里归纳的每一句，都可以针针见血、刀刀致命。
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：标注页面作者。资源预请求 (rel)：
preload：高优先级。强制浏览器立即下载当前页面必需的资源（如关键字体、核心 CSS）。prefetch：低优先级。利用空闲时间下载未来可能需要的资源（如预测用户会点击的下一页）。dns-prefetch：提前进行域名解析，减少跨域资源请求的延迟。preconnect：不仅解析 DNS，还提前完成 TCP 和 TLS 握手。prerender：在后台静默渲染整个页面（最耗性能，慎用）。脚本加载：
async：加载完立即执行，会阻塞 HTML 解析。defer：加载完后等待 HTML 解析完成、DOMContentLoaded 事件前按顺序执行（推荐）。图片优化：
loading="lazy"：浏览器原生支持的图片懒加载。<picture> 标签：响应式图片，根据媒体查询加载不同尺寸或格式（如 WebP）。| 方式 | 占位 | 响应事件 | 重绘/回流 |
|---|---|---|---|
display: none |
否 | 否 | 回流 + 重绘 |
visibility: hidden |
是 | 否 | 重绘 |
opacity: 0 |
是 | 是 | 重绘（通常走合成层，性能好） |
一、Flex 垂直居中
12345
.parent {
display: flex;
justify-content: center;
align-items: center;
}
二、绝对定位 + transform
123456
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
transition + transform 使用 GPU 渲染位移。animation 帧动画。content-box 和 border-box 的区别？content-box 默认值，W3C 标准盒模型，不包含边框和内边距。border-box 原 IE 模型，包含边框和内边距。默认 content-box，可通过 box-sizing 指定。
BFC （Block Formatting Context）是一块独立布局渲染区域，内部布局不会影响外部，常用于：
overflow 非 visible（如 hidden / auto / scroll）float 非 none。display: flex / inline-block / flow-root。position: absolute / fixed。clear 属性: left、right、both。overflow：hidden.clearfix::after { content: ""; display: block; clear: both; }overflow: hidden 为什么能清除浮动overflow：hidden 本意是溢出隐藏，但浏览器需要知道该显示多少才能隐藏剩下的，默认高度又是 auto，所以浮动的元素都会被计算为父元素的高度，顺带就实现了清除浮动的目的。
副作用：脱离文档流的元素，超出部分可能会被隐藏。
回流本质上是 「计算几何属性」，任何破坏布局稳定的操作都会触发它。反之亦然：
transform：由于变换发生在合成层（Composite Layer），它不会影响其他元素的布局，通常由 GPU 完成，既不触发回流也不触发重绘。opacity：改变透明度时，如果元素已被提升为合成层，浏览器只需重新合成图层，不触发回流。visibility：设置为 hidden 时，元素虽然不可见，但在页面中仍占据原本的空间。改变它只会触发重绘（Repaint），不会引发布局计算。仅触发重绘的属性：
这些属性只改变元素的外观，不改变几何尺寸：
color、background-color。outline、box-shadow、border-style。em 和 rem 的区别？em：相对单位，相对于当前元素的字体大小（继承自父元素，或继承链上的 font-size），更「局部」。rem：相对单位，相对于根元素（html）的字体大小，更「全局」。feature query：@supports (...) { ... }DNS 解析部分可以简单分为：
一个完整的渲染周期包含以下五个步骤：
在改变一些数据或属性时，浏览器会跳过一些不必要的阶段，以进行性能优化。
路径 A：回流（Reflow）—— 全流程
当修改了几何属性（如 width、height、margin、top、left）时：
路径 B：重绘（Repaint）—— 跳过布局
当修改了外观属性（如 color、background-color、visibility: hidden、box-shadow）时：
路径 C：合成（Composite Only）—— 性能最优
当修改了 transform（位移、缩放、旋转）或 opacity 时：
在 CSS 中使用 will-change: transform; 可以显式告诉浏览器提前为该元素准备独立图层，从而确保动画极其丝滑。（但每个图层都会消耗额外的内存，要谨慎设计。）
垃圾标记
垃圾回收
强缓存：不向服务器发请求，直接从本地读取。
Cache-Control：max-age (相对时间，优先级高)。Expires：绝对过期时间（受客户端时间影响）。协商缓存：向服务器发请求，由服务器决定是否使用缓存（304）。
ETag / If-None-Match：基于文件内容的 Hash 值（最准确）。Last-Modified / If-Modified-Since：基于文件最后修改时间（秒级误差）。Cache-Control 指定过期时间、缓存状态、选项，优先级高于 ExpiresExpires 1.0 协议中的头，指定缓存过期时间Last-modified 服务端资源最后变更时间，若资源未变更会返回 304If-Modified-Since 向服务端请求本地资源和远程资源的一致性（判断修改时间）If-None-Match 向服务端请求本地资源和远程资源的一致性（判断 hash 值）ETag 标识资源状态的随机串Last-modified 标注的修改时间只能精确到秒级，是以时间为单位，一秒内修改多次的话就无法判断了Last-modified 字段而频繁被更新Last-modified 的时间会受生产环境（服务器、代理服务器）影响，不是百分百准确真实生产中推荐使用 ETag，同时也可以与 Last-modified 一同使用，浏览器会优先验证 ETag，才会继续比对 Last-Modified，最后才决定是否返回 304。
Content-TypeToken 的优点：支持跨域、可扩展性强（多端通用）、天然防 CSRF（不自动携带，需手动放入 Header）。
RESTful 是啥？GET 和 POST 的本质区别一句话：URL 仅代表资源，HTTP 请求类型来描述行为。
本质上，GET 就是请求，且 URL 的长度有限制，一般在 2k 之内；
POST 就是发送数据，以 body 为数据宿主，常见类型有：application/json xml text formData 等；
PUT 用于全量修改，PATCH 用于单量修改，DELETE 按照标准是不支持 body 的，但大部分浏览器和服务端都兼容实现了，但在代理情况下，数据可能会丢失。
RESTful 规范中，修改文章的显示隐藏属性，用什么方法（用 Patch，Post 是创建资源，Put 是更新完整资源，Patch 是更新资源属性
OPTIONS 预检请求）。<script> 标签不受同源策略限制。只支持 GET。OPTIONS 预检请求只在「非简单请求」时发出。
非简单请求的标准是：
PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH。Accept、Accept-Language、Content-Language、Content-Type 以外的自定义 Header（例如 Authorization、X-Token 等）。Content-Type 的值不属于以下三种：text/plainmultipart/form-dataapplication/x-www-form-urlencodedOPTIONS 预检请求的发起过程：
OPTIONS 请求，包含 Access-Control-Request-Method（真实请求的方法）和 Access-Control-Request-Headers（自定义头部）。XSS (跨站脚本攻击)：注入恶意脚本。
XSS 防御方式：输入过滤、输出转义（HTML Entity）、使用 HttpOnly Cookie 防止脚本读取、配置 CSP。
CSRF (跨站请求伪造)：冒充用户发起非法请求。
CSRF 防御方式：验证 Referer/Origin、使用 Anti-CSRF Token、Samesite Cookie 属性。
TODO：补充
本质上压根没关系。
简单说：将数据进行对称/非对称加密后进行传输。
SSL (Secure Sockets Layer) 由网景公司开发，3.0 后被 ISOC 接管升级为 TLS。
TODO
多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息，在 HTTP1.1 中「浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞」。
HTTP2 在 应用层（HTTP/2）和传输层（TCP / UDP）之间增加一个二进制分帧层。
在二进制分帧层中， HTTP/2 会将所有传输的信息分割为更小的消息和帧（frame），并对它们采用二进制格式的编码，其中 HTTP1.x 的首部信息会被封装到 header frame，而相应的 Request Body 则封装到 data frame 里面。
使用 HPACK 算法将重复的、多余的、正常的头部信息进行压缩处理。
简单说：当一个客户端请求资源 X，而服务器知道它很可能也需要资源 Z 的情况下，服务器可以在客户端发送请求前，主动将资源 Z 推送给客户端。
postmessage / onmessagewindow.namelocalstorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件。
关闭浏览器清空存储，用哪种方式：sessionStorage / localStorage / cookie
主要做的事：将 HTML 标签解析为转义符，或将转移符解析为标签。
Web Components 是一个抽象概念，按照 MDN 的解释（Web Components），包含下面 4 个技术体系：
类似：几乎所有框架的组件机制
即，模板片段，HTML <template> 元素是一种保存客户端内容的机制，在加载页面时不会呈现，但可能随后在运行时使用 JavaScript 实例化。
内容区隔离
可以通过 HTML link 导入 Html
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。