这是一个经典的前端面试题，从输入URL到页面渲染完成的全过程：
1. URL解析与DNS查询
URL解析：
- 浏览器解析输入的URL，提取协议(http/https)、域名、端口、路径等信息
- 检查URL格式是否正确
DNS查询：
- 浏览器检查本地DNS缓存
- 如果缓存中没有，依次查询：操作系统DNS缓存 → 路由器缓存 → ISP DNS服务器
- 最终获得域名对应的IP地址
2. 建立TCP连接
- 浏览器与服务器进行TCP三次握手建立连接
- 如果是HTTPS，还需要进行TLS握手建立安全连接
3. 发送HTTP请求
- 浏览器构造HTTP请求报文（包含请求行、请求头、请求体）
- 通过TCP连接发送给服务器
4. 服务器处理请求
- 服务器接收请求，解析请求内容
- 根据请求路径查找对应资源
- 执行服务器端逻辑（如果需要）
- 构造HTTP响应报文
5. 浏览器接收响应
- 接收服务器返回的HTML文档
- 检查响应状态码（200、404、500等）
- 开始解析HTML内容
6. 页面渲染过程
6.1 构建DOM树
- 浏览器解析HTML标签，构建DOM（文档对象模型）树
- 遇到外部资源（CSS、JS、图片等）时发起新的HTTP请求
6.2 构建CSSOM树
- 解析CSS文件和内联样式，构建CSSOM（CSS对象模型）树
- CSS解析会阻塞渲染
6.3 构建渲染树（Render Tree）
- 将DOM树和CSSOM树合并，生成渲染树
- 只包含可见元素（display:none的元素不在渲染树中）
6.4 布局（Layout/Reflow）
- 计算每个元素在页面中的确切位置和大小
- 这个过程也叫”回流”
6.5 绘制（Paint）
- 将渲染树中的每个节点转换为屏幕上的实际像素
- 包括颜色、阴影、边框等视觉效果
6.6 合成（Composite）
- 将各个图层合成最终的页面
- GPU加速的图层会在这个阶段处理
7. JavaScript执行
- HTML解析过程中遇到
<script>标签时会暂停DOM构建 - 执行JavaScript代码（可能修改DOM和CSS）
- 异步脚本（async/defer）不会阻塞HTML解析
8. 资源加载优化
并行加载：
- 浏览器可以并行下载多个资源（但有连接数限制）
- 现代浏览器支持HTTP/2多路复用
缓存机制：
- 浏览器缓存、CDN缓存等减少重复请求
- 强缓存和协商缓存提高加载速度
9. 页面完全加载
- 所有资源加载完成
- 触发
DOMContentLoaded事件（DOM构建完成） - 触发
load事件（所有资源加载完成）
面试加分点
性能优化相关：
- 提到关键渲染路径优化
- DNS预解析、资源预加载
- 代码分割、懒加载
- CDN、HTTP/2等技术
深入技术细节：
- 浏览器的多进程架构
- V8引擎的工作原理
- 重排和重绘的区别及优化
实际应用：
- 结合具体的性能监控指标（FCP、LCP、CLS等）
- 提到现代框架的SSR、CSR等渲染方式