浏览器输入url后，知总结DNS解析、识点TCP握手、知总结HTTP请求、识点服务器响应、知总结浏览器渲染——这套流程每个前端面试者都能背。识点但真正决定页面性能的知总结，往往是识点那些被忽略的细节。

比如DNS解析。知总结你以为只是识点查个缓存？实际上浏览器有严格的DNS缓存层级：内存缓存、hosts文件、知总结本地DNS服务器、识点根域名服务器。知总结Chrome的识点DNS预解析会在用户鼠标悬停链接时就开始解析，这招能省下100ms以上的知总结首屏时间。我见过不少团队优化图片压缩、合并请求，却忘了给<link rel="dns-prefetch">加上。

HTTP缓存才是重头戏。强缓存和协商缓存的区别，很多人能背出来，但实际配置时总出错。强缓存用Expires和Cache-Control，后者优先级更高，max-age单位是秒。协商缓存靠Last-Modified和ETag，ETag更精确但每次都要发请求验证。有个坑：当Cache-Control: no-cache时，浏览器会走协商缓存，但no-store才是完全不缓存。这俩差一个字，性能天壤之别。

TCP三次握手四次挥手，我见过最生动的解释是：三次握手像打电话"喂，能听到吗？""能，你呢？""我也能听到"；四次挥手像分手对话"我要挂了""等我收拾完""好了我也挂了""行吧"。但实际开发中，真正影响体验的是TCP慢启动——新连接传输速度是逐步提升的，所以HTTP/2的多路复用才那么重要，它复用同一个TCP连接，避免了多次慢启动。

浏览器渲染这块，有个冷知识：DOMContentLoaded和load事件之间，可能相隔几秒。前者是HTML解析完毕，后者要等所有资源加载完。如果你的页面有大量图片，load事件会明显延迟。但真正拖慢首屏渲染的，往往是同步脚本。HTML解析遇到<script>会暂停，直到脚本下载执行完。这就是为什么推荐把脚本放body底部，或者用defer、async属性。defer保证执行顺序，async不保证——这俩区别，面试官最爱考。

CSS阻塞渲染这件事，很多人忽略了。浏览器会等CSSOM构建完才渲染页面，所以CSS文件太大，白屏时间就长。有个技巧：把首屏需要的CSS内联到HTML里，剩余的部分异步加载。这招能显著提升LCP指标，但代价是HTML体积变大，需要权衡。

本地存储这块，localStorage和sessionStorage的区别不用多说。但很多人不知道，localStorage是同步操作，存大对象会阻塞主线程。实测1MB的字符串写入，在低端手机上可能卡顿几十毫秒。IndexedDB是异步的，但API太繁琐，所以出现了Dexie.js这种封装库。如果你只需要存键值对，可以考虑用localStorage的变体——存JSON字符串，但要注意大小限制通常5MB。

跨域问题，CORS是标准解法。但实际开发中，我看到很多人遇到跨域就加代理，忽略了简单请求和预检请求的区别。GET和POST（部分情况）是简单请求，不需要预检；自定义头、PUT、DELETE都要先发OPTIONS预检。如果接口设计成简单请求能搞定，就少一次往返延迟。但安全起见，敏感操作还是得用预检验证。

最后说个容易踩的坑：Cookie的SameSite属性。Chrome 80以后默认Lax，跨站请求不携带Cookie。如果你在做第三方支付回调，没设置SameSite=None和Secure，回调请求就带不上session。这个坑我亲眼见过线上事故——支付成功但订单状态没更新，排查了一下午才发现是Cookie策略变更。

Web技术迭代快，但底层原理几十年没变。理解TCP、HTTP、渲染机制这些地基，比追新框架有用得多。毕竟，框架会过时，协议不会。