从URL到页面加载完成的过程📚 学习指导本章重点：理解浏览器从接收URL到页面完全加载的完整流程，为性能优化打下理论基础。
学习目标：
掌握页面加载的各个阶段和关键节点理解浏览器渲染机制和阻塞原理识别性能优化的关键时机和优化点前置知识：建议先阅读 性能优化整体思路 建立全局认知。
后续学习：掌握页面加载原理后，建议学习 用户角度的性能指标 了解如何衡量这些过程。
页面加载的完整流程当用户在浏览器地址栏输入URL并按下回车键时，一个复杂的页面加载过程就开始了。理解这个过程对于性能优化至关重要。
整体流程图1. 输入URL阶段用户行为用户在地址栏输入URL按下回车键或点击跳转浏览器开始处理请求浏览器处理解析URL格式检查是否为有效URL准备发起网络请求2. DNS解析阶段DNS查询流程图性能影响DNS查询时间：通常50-200ms移动网络下可能更长首次访问无缓存，后续访问有缓存优化策略DNS预解析使用CDN减少域名数量3. TCP连接建立三次握手流程图连接类型HTTP/1.1: 每个域名最多6个并发连接HTTP/2: 多路复用，单个连接处理多个请求HTTPS: 额外的TLS握手过程性能影响TCP连接建立：通常100-300msHTTPS额外开销：200-400ms移动网络延迟更高4. 发送HTTP请求请求组成GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0...
Accept: text/html,application/xhtml+xml...
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive请求优化减少请求头大小使用HTTP/2压缩合并小请求5. 服务器处理请求服务器处理流程图处理时间影响因素服务器性能数据库查询复杂度缓存命中率服务器负载优化方向服务器端缓存数据库优化负载均衡静态资源CDN6. 接收响应数据响应结构HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1234
Cache-Control: max-age=3600
Date: Mon, 23 May 2023 22:38:34 GMT
... ...数据传输分块传输流式处理压缩解压7. 浏览器解析HTMLHTML解析流程图关键节点DOMContentLoaded: DOM树构建完成CSSOM构建: 样式计算完成渲染树合并: 准备开始渲染阻塞资源外部CSS文件内联JavaScript外部JavaScript文件8. 资源加载和执行资源加载流程图JavaScript执行解析JavaScript代码创建执行上下文执行代码逻辑操作DOM和CSSOM图片和媒体资源异步加载图片视频和音频预加载字体文件加载第三方资源分析脚本广告代码社交分享按钮9. 页面渲染完成渲染阶段流程图关键指标First Paint (FP): 首次绘制First Contentful Paint (FCP): 首次内容绘制Largest Contentful Paint (LCP): 最大内容绘制Time to Interactive (TTI): 可交互时间10. 用户交互响应交互处理流程图交互处理事件监听器绑定用户输入响应页面状态更新性能要求输入延迟 < 100ms动画流畅度 60fps页面滚动流畅性能瓶颈分析常见瓶颈点流程图常见瓶颈点DNS解析: 首次访问无缓存TCP连接: 移动网络延迟高服务器响应: 后端处理慢资源加载: 大文件下载慢JavaScript执行: 主线程阻塞渲染计算: 复杂布局计算优化优先级减少关键资源数量优化关键渲染路径减少主线程工作量优化资源加载策略📚 学习总结关键知识点回顾网络阶段：DNS解析 → TCP连接 → HTTP请求 → 响应接收解析阶段：HTML解析 → DOM构建 → CSS解析 → CSSOM构建渲染阶段：渲染树合并 → 布局计算 → 绘制合成 → 显示完成性能优化关键点DNS优化：减少DNS查询时间连接优化：复用TCP连接，启用HTTP/2资源优化：减少阻塞资源，优化加载顺序渲染优化：减少重排重绘，优化JavaScript执行面试重点 🔥页面加载的完整流程关键渲染路径和阻塞原理各阶段的时间消耗和优化策略🚀 下一步学习理解了页面加载原理后，您已经掌握了性能优化的理论基础。接下来建议学习：
用户角度的性能指标 - 了解如何从用户体验角度衡量页面性能，掌握Core Web Vitals等关键指标。
这些指标将帮助您：
量化页面性能表现识别具体的性能问题制定针对性的优化策略