Web¶

主要内容

本篇整理计网与 Web 基础：域名、DNS、TCP、TLS、HTTP/HTTPS、浏览器从导航到渲染的流程、DOM/CSSOM/渲染树、主线程、Web 性能指标、DevTools，以及飞书中的域名和 HTTPS 思考题。

参考文档¶

HTTP与网络基础.md
Web渲染原理.md
Web性能指标.md
域名、DNS 与 HTTPS 配置.md
浏览器开发者工具.md
Viewport.md
UserAgent.md

Web 访问链路¶

一个网页不是“浏览器直接拿到页面”这么简单，而是经历：

输入 URL
  -> 浏览器检查缓存
  -> DNS 解析域名
  -> TCP 建立连接
  -> TLS 协商 HTTPS
  -> HTTP 请求 HTML
  -> 服务器响应
  -> 浏览器解析 HTML/CSS/JS
  -> 布局、绘制、合成
  -> 页面可交互

DNS¶

DNS 把域名解析为 IP。域名是给人看的，IP 是网络通信实际需要的地址。

一个页面可能引用很多域名下的资源：字体、图片、统计脚本、CDN、接口域名。每个不同 hostname 都可能带来 DNS 查询成本。

TCP 与 TLS¶

TCP 负责可靠传输。三次握手建立连接。

HTTPS 在 HTTP 外包了一层 TLS。TLS 做三件事：

加密，避免内容被窃听。
完整性校验，避免被篡改。
证书验证，确认服务器身份。

虽然 TLS 会增加握手成本，但公开服务必须使用 HTTPS。

HTTP 基础¶

HTTP 是请求-响应协议。常见方法：

方法	含义
GET	获取资源
POST	提交数据
PUT/PATCH	更新资源
DELETE	删除资源
OPTIONS	询问服务器支持什么，常用于 CORS 预检

状态码：

2xx 成功。
3xx 重定向。
4xx 客户端错误。
5xx 服务端错误。

浏览器渲染流程¶

浏览器收到 HTML 后开始解析：

构建 DOM。
构建 CSSOM。
合成 Render Tree。
Layout 计算位置和尺寸。
Paint 绘制像素。
Composite 合成图层。

HTML、CSS、JS 会互相影响。没有 async/defer 的脚本会阻塞 HTML 解析；CSS 会影响渲染，也会影响 JS 读取样式。

主线程与性能¶

浏览器大部分页面工作在主线程上完成。主线程忙时，用户点击、滚动、输入都会卡。

性能瓶颈大致分两类：

网络慢：DNS、TCP、TLS、TTFB、资源下载。
主线程忙：JS 执行、布局、绘制、长任务。

Web 性能指标¶

TTFB：首字节时间。
FCP：首次内容绘制。
LCP：最大内容绘制。
CLS：布局偏移。
INP：交互响应。
TTI：可交互时间。

优化方向：减少关键请求、压缩资源、缓存、合理拆包、减少 JS 长任务、给图片设置尺寸、避免频繁布局。

DevTools¶

Network：看请求、状态码、Header、Payload、瀑布图、CORS。

Console：看错误、运行 JS。

Elements：看 DOM 和 CSS。

Application：看 Cookie、localStorage。

Performance：看主线程、长任务、布局和绘制。

Viewport 与 UA¶

移动端要设置 viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

User-Agent 可以辅助判断环境，但更推荐特性检测和响应式设计。

实践清单¶

打开一个网站，用 Network 看 DNS/TLS/请求瀑布。
找一个接口，查看 Request Headers 和 Response Headers。
用 Performance 录制页面加载。
找出一个阻塞主线程的脚本。
给图片补尺寸，观察 CLS。

飞书思考题¶

从用户在浏览器中输入一个域名，到网页成功显示，中间至少会经过哪些关键步骤？¶

浏览器先解析 URL，查询缓存，如果没有可用缓存则通过 DNS 把域名解析为 IP。然后与服务器建立 TCP 连接；如果使用 HTTPS，还要进行 TLS 握手并验证证书。之后浏览器发送 HTTP 请求，Web 服务器或反向代理接收请求并返回 HTML、CSS、JS 等资源。浏览器解析 HTML 生成 DOM，解析 CSS 生成 CSSOM，合成渲染树，执行布局、绘制和合成，最后页面显示并进入可交互状态。

HTTPS 解决的核心问题是什么？相比 HTTP 增加了什么？没有正确配置 HTTPS 有哪些风险？¶

HTTPS 解决加密传输、身份验证和防篡改问题。相比 HTTP，它增加了 TLS 协商和证书验证。没有正确配置 HTTPS 时，用户的密码、Cookie、Token 可能被窃听，页面内容可能被中间人篡改，用户也无法确认自己访问的服务是否真实可信。

把博客或小型服务暴露到公网，需要考虑哪些配置或运维问题？¶

需要考虑域名购买、DNS 解析、服务器或托管平台、Web 服务器反向代理、HTTPS 证书、防火墙、端口开放、日志、备份、监控、自动重启、依赖更新和安全配置。域名负责可读入口，DNS 负责定位，HTTPS 负责安全，Web 服务器负责接入和转发请求。

知识卡片¶

Origin 与 Site¶

Origin 由协议、域名、端口共同决定；Site 通常按可注册域名区分。CORS 关注 Origin，Cookie SameSite 关注 Site。

TTFB¶

TTFB 高不一定是后端慢，也可能是 DNS、TCP、TLS、排队、代理链路导致。排查时要看瀑布图。

async 和 defer¶

async 下载完成后尽快执行，可能打乱顺序；defer 等 HTML 解析完成后按顺序执行，更适合依赖 DOM 的脚本。

Layout Shift¶

图片、广告、字体如果加载后改变尺寸，就会造成布局偏移。提前声明尺寸是最简单有效的优化之一。