内容摘要：打开浏览器，按下F12，你看到的那个Network面板里跳动的每一行，都是web数据在说话。请求头、响应体、状态码、加载耗时——这些东西平时没人盯着看，但网站能不能跑起来，全指望它们。 大部分人理解的

打开浏览器，按下F12，你看到的那个Network面板里跳动的每一行，都是web数据在说话。请求头、响应体、状态码、加载耗时——这些东西平时没人盯着看，但网站能不能跑起来，全指望它们。

大部分人理解的“web数据”就是网页上显示的文字和图片。这个理解不算错，但太窄了。网页上你看到的内容只是冰山浮在水面上的那一角。水面下是什么？是JSON、XML、HTML片段、Cookie、LocalStorage里塞的各种键值对。浏览器像个搬运工，把这些东西从服务器搬到你的屏幕上，中间还要经过DNS解析、TCP握手、TLS加密、HTTP传输这一整套流程。任何一个环节卡住，你看到的就是白屏或者转圈。

我前阵子帮朋友查一个网站加载慢的问题。打开DevTools一看，首页请求数237个，总传输量4.6MB。其中有一个字体文件占了1.2MB，加载时间3.8秒。问题是这个字体只用在页面底部一个版权声明的小图标上。把那个字体换成系统默认字体之后，首屏时间直接从5秒降到了1.7秒。这就是web数据的实际分量——一个不起眼的请求，能把整个体验拖垮。

数据在浏览器和服务器之间来回跑，格式其实就那么几种。HTML负责结构，CSS负责样式，JavaScript负责行为，JSON负责数据传输。早些年XML是主流，现在JSON几乎通吃。原因也简单：JSON更轻，解析更快，JavaScript原生支持。你在Chrome的Network面板里看到的那些XHR或Fetch请求，返回的十有八九是JSON。打开看一眼，就是一堆花括号和方括号套在一起，但前端工程师就靠这些东西把页面拼出来。

Cookie和LocalStorage经常被搞混。Cookie每次HTTP请求都会自动带上，大小限制4KB左右。LocalStorage不会自动发送，容量大得多，一般5MB到10MB。SessionStorage跟LocalStorage差不多，但关掉标签页就清空。选哪个用，取决于你要存什么、存多久、要不要发给服务器。我见过有人把用户登录态存在LocalStorage里，结果XSS攻击一打一个准。这不是web数据本身的问题，是用的人没想清楚。

再说一个容易被忽略的东西：缓存。Cache-Control、ETag、Last-Modified这几个响应头，决定了浏览器要不要重新向服务器要数据。配好了，用户第二次访问快得飞起。配错了，要么每次都在拉重复内容，要么用户永远看不到更新。我见过一个后台管理系统，CSS文件缓存设了一年，结果改了样式之后所有用户都得手动清缓存。运维折腾了一下午才发现是响应头的问题。

Web数据不只是技术层面的东西。它还是隐私的载体。你访问一个页面，浏览器会带上User-Agent、Accept-Language、Referer，加上Cookie里的各种标识符。这些数据拼在一起，足够识别出你是谁、用什么设备、从哪来、之前干了什么。GDPR和国内的个人信息保护法盯着这块，不是没有道理。每次你点“接受所有Cookie”的时候，实际上是在授权一堆你根本没看过的数据被收集和传输。

搞web开发的人，每天就是在跟这些数据打交道。调接口、看响应、改请求头、查缓存策略。做得久了会有一种直觉：页面出问题，先开Network面板，看哪个请求红了、哪个响应慢了、哪个状态码不对。大部分时候，答案就在那里摆着。