从输入URL到页面渲染完成的全过程

张开发
• 2026/4/17 23:03:41 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

从输入URL到页面渲染完成的全过程
概述当用户在浏览器地址栏输入一个URL，按下回车键后，浏览器需要将域名解析为服务器的IP地址，如果缓存中有这个域名对应的IP地址，则直接获取，否则会向域名服务器发起DNS查询请求来获得Ip地址。拿到IP地址后，浏览器会与目标服务器通过三次握手建立TCP连接。如果URL时HTTPS，则需要额外进行TLS握手，确保传输的安全性。成功建立连接后，客户端向服务器发送HTTP请求，服务端接到请求后，开始处理请求，并返回响应。然后浏览器开始渲染页面，渲染页面的过程包括解析HTML，构建DOM树、解析CSS文件和style标签，构建CSSOM树、将DOM树和CSSOM树合并成渲染树，渲染树中只包含可见元素、确定好每个元素的位置和大小后，根据盒模型布局，绘制每个元素（文本、图片、背景等），渲染层分为多个图层，每个图层独立绘制后组成完整页面，之后进行首屏加载以及页面的可交互事件。在页面渲染时，浏览器遇到script标签会暂停解析和构建DOM，直到脚本加载完毕，但async和defer属性可以异步加载，不会阻塞DOM解析。页面加载完成后，浏览器会继续处理用户的操作，比如点击事件、滚动事件，并根据事件绑定的处理函数，执行相应的JS代码。至此，就完成了从输入URL到页面渲染完成的全过程。1.输入URL用户在浏览器地址栏输入一个URL，按下回车键2.DNS解析浏览器需要将域名解析为服务器的IP地址，以建立连接- 检查本地/浏览器缓存，如果有该域名的IP地址，则直接获取，否则会向本地域名服务器发起DNS查询请求，通过递归查询的方式获得IP地址- 客户端使用递归查询，本地DNS服务器使用迭代查询来获取最终的DNS纪录。在实际的网络环境中，递归查询和迭代查询会结合使用，以实现高效的域名解析3.TCP连接（三次握手）浏览器与目标服务器通过三次握手建立TCP连接1.SYN：浏览器发送SYN（同步序列号）请求包，要求服务器建立连接 【浏览器对服务器说：你好，请求连接】2.SYN

更多文章