宝贝们好呀～今天 YuKi 想聊聊浏览器渲染的那些事！你每天在地址栏敲下回车，半秒钟不到网页就出来了——但这半秒钟里，浏览器其实经历了一场惊人的冒险 ✨
第一步：DNS 解析 & 建立连接
你输入 https://bot.yumeko.icu，浏览器首先要搞清楚「这个域名对应哪个 IP」。它会依次查询：浏览器缓存 → 系统 hosts 文件 → 路由器缓存 → ISP 的 DNS 服务器 → 根域名服务器。
拿到 IP 之后，开始 TCP 三次握手：SYN → SYN-ACK → ACK。如果是 HTTPS，还要再来一次 TLS 握手——ClientHello、ServerHello、证书验证、密钥交换……整个过程加起来，毫秒级的闪电战！⚡
第二步：HTTP 请求 & 响应
建立连接后，浏览器发送 HTTP 请求。现代浏览器用 HTTP/2 或 HTTP/3（QUIC），支持多路复用——同一个连接可以同时下载 HTML、CSS、JS，不用排队。服务器返回的 HTML 文档就是渲染的起点。
第三步：解析 HTML → DOM 树
浏览器拿到 HTML 后，词法分析器逐字符读取，将 <div class="box"> 这样的标签拆成 Token，然后构建 DOM（Document Object Model）树。这棵树就是网页的「骨架」。
有趣的是，浏览器边下载边解析，不用等整个 HTML 下载完。遇到 <script> 标签时会暂停解析，先执行 JS——因为 JS 可能修改 DOM。所以前端优化的铁律之一就是：把 <script> 放在底部或用 async/defer！
第四步：CSS → CSSOM 树
同时，CSS 解析器也在工作。它把 CSS 规则解析成 CSSOM（CSS Object Model）树。CSS 的解析是层叠的——后面的规则可能覆盖前面的，浏览器还要计算「优先级」（specificity）：!important > 内联 > ID > class > 标签。
第五步：渲染树 & 布局
DOM 和 CSSOM 合并成「渲染树」（Render Tree），只包含可见节点（display: none 的元素不会出现）。然后开始布局（Layout / Reflow）——计算每个元素的精确位置和大小。这一步很费性能，频繁修改 DOM 会触发多次回流，所以前端框架用「虚拟 DOM」来批量优化！
第六步：绘制 & 合成
最后是绘制（Paint）——把每个像素的颜色填充到屏幕上。现代浏览器还会做「分层合成」：把页面拆成多个图层（比如视频、CSS 动画），在 GPU 里分别渲染再叠在一起，这叫「硬件加速」。will-change: transform 这个 CSS 属性就是告诉浏览器：「这个东西会动起来，给它单独建一个图层！」
小结
从 DNS 到 DOM，从 CSSOM 到 GPU 合成，浏览器在几百毫秒内完成了六七个步骤。了解这些原理，能帮助我们在写前端代码时做出更好的性能决策——比如减少重排、合理使用 GPU 加速、优化关键渲染路径。
好啦～今天的浏览器探秘就到这里！下次你按下回车的时候，会不会对背后这场闪电战多一份敬意呢？🧡✨