从输入 url 到浏览器渲染经过了哪些流程
最新回答
风花雪月夜
2022-09-02 09:28:21
从输入URL到浏览器渲染出页面，主要经历以下流程：
一、DNS解析URL的过程DNS解析是将域名转换为IP地址的过程，具体步骤如下：
- 浏览器缓存：浏览器会按照一定频率缓存DNS记录，优先查询本地缓存。
- 操作系统缓存：若浏览器缓存未找到，则查询操作系统的DNS缓存（如hosts文件）。
- 路由器缓存：若本地无记录，向路由器发起DNS查询请求。
- ISP的DNS服务器：若路由器缓存未命中，请求会发送至互联网服务提供商（ISP）的DNS服务器。
- 根服务器递归查询：若ISP的DNS服务器无法解析，会向根服务器发起递归查询，最终获取域名对应的IP地址。
- 建立TCP连接：
浏览器通过TCP协议与服务器进行三次握手，建立可靠连接。
- 发送HTTP请求：
浏览器根据解析到的IP地址和端口（默认80或443）发起HTTP请求。
请求包含Header（如请求方法GET/POST、协议类型HTTP/HTTPS、Cookie等）和Body（POST请求的数据）。
- 服务器处理请求：
服务器接收请求后，搜索对应的HTML页面资源。
返回HTTP响应报文，状态码为200表示成功，其他状态码（如404、500）表示错误。
- 接收响应数据：
浏览器接收到HTML文件后，开始解析并准备渲染。
- 构建DOM树：
浏览器将HTML解析为DOM树（文档对象模型），通过深度遍历生成节点树结构。
- 构建CSSOM树：
解析CSS文件或内联样式，生成CSSOM树（CSS对象模型）。
- 生成Render树：
合并DOM树和CSSOM树，形成Render树（渲染树），仅包含可见节点（如排除display: none的元素）。
- 布局（回流）：
根据Render树计算每个节点在屏幕中的精确位置和尺寸（布局阶段可能因DOM或样式变化多次触发）。
- 绘制（重绘）：
遍历Render树，调用硬件API（如GPU）绘制所有节点到屏幕上。若仅样式变化（如颜色），可能跳过布局直接重绘。
- 性能优化点：
DNS缓存可减少解析时间；
TCP连接复用（HTTP/1.1的Keep-Alive）避免重复握手；
减少DOM操作和CSS阻塞可优化渲染性能。
- 异步加载：
脚本（如<script>）可能阻塞DOM构建，可通过async或defer优化。
以上流程涵盖了从URL输入到页面渲染的核心步骤，实际过程中可能因网络、资源加载或脚本执行产生细微差异。
热门标签
