输入url到浏览器会发生什么
问题： 输入url到浏览器会发生什么
答案：
- （1）第一步，URL解析与DNS查询
当我们按下回车，浏览器首先会解析这个URL，提取出里面的域名。如果拿到的是域名，下一步就是关键的DNS查询，也就是把域名转换成服务器能识别的IP地址。
查询过程是这样的：浏览器会先检查本机缓存和操作系统的hosts文件。如果找不到，就会向本地DNS服务器发起请求，这通常是一个迭代查询的过程，一级一级向上，直到找到负责这个域名的权威DNS服务器，拿到最终的IP地址。
- （2）第二步，建立连接与发送请求
拿到IP后，浏览器就要和它建立网络连接。这里主要分为两步：
TCP三次握手：通过SYN，SYN-ACK，ACK三个步骤，建立一个可靠的TCP连接。如果是HTTPS，还会额外进行TLS握手，协商加密密钥。
发送HTTP请求：连接建立后，浏览器会构建一个HTTP请求报文（包括方法、路径、请求头等），通过这个连接发送给服务器。
- （3）第三步，服务器处理与响应
服务器收到请求后，会根据路径和参数进行相应的处理（比如访问数据库、运行后端逻辑），然后生成一个HTTP响应发回给浏览器。这个响应的主体，通常就是我们最关心的HTML文档。
这里有一个重要的分水岭：这个HTML文档是怎么来的？ 这引出了两种主要的渲染模式。
模式一：客户端渲染
也就是CSR。这种情况下，服务器返回的HTML通常非常简单，可能只有一个这样的根容器。页面的主体内容，需要靠后续的JavaScript来动态生成。
浏览器的处理流程是：
解析到script标签（没有async/defer）时，会阻塞HTML解析，去下载并执行JS。
执行JS（通常是React/Vue等框架代码）时，会通过Ajax再去请求数据，然后动态插入DOM。
在这个过程中，如果遇到引入的CSS，CSS的加载和解析不会阻塞DOM解析，但会阻塞页面的首次渲染，也会阻塞后续JS的执行，因为JS可能需要获取样式。
模式二：服务端渲染
也就是SSR。为了更好的首屏速度和SEO，服务器会直接执行前端框架的代码，生成一个包含完整初始数据的HTML文档，直接返回给浏览器。这样，浏览器一拿到就能立刻解析出有内容的页面，用户感觉更快。之后，页面再加载同一个前端应用的JavaScript代码，进行“水合”，接管交互，变成可响应的单页应用。
- （4）第四步，浏览器的渲染流程（核心不变）
请注意，无论HTML是来自CSR的空壳，还是SSR的完整内容，只要它到达浏览器，后续的渲染流水线是完全一样的：
解析HTML，构建DOM树：将HTML标签转换成内存中的树形结构。
解析CSS，构建CSSOM树：计算出每个节点的样式规则。
合并成渲染树：结合DOM和CSSOM，生成包含所有可见元素及其样式的渲染树。
布局：计算渲染树中每个节点在视口中的精确位置和大小（也叫重排）。
绘制：将布局后的节点转换成屏幕上的实际像素。
合成与显示：将各层绘制结果合成，最终显示在屏幕上。
- （5）总结一下完整链条：
输入URL-> DNS解析-> TCP/TLS握手-> 发送HTTP请求-> 服务器返回HTML-> 浏览器解析渲染。
