尧图网站建设 
博客主页小谢同学的小破站✍️本文由小谢同学的小破站原创首发于 CSDN ☕JavaSE专栏JavaSEJavaEE初阶专栏JavaEE初阶JavaEE进阶专栏JavaEE进阶数据结构专栏数据结构⚙️算法专栏算法MySQL初阶专栏MySQL初阶MySQL进阶专栏MySQL进阶计算机网络专栏计算机网络C语言专栏C语言欢迎点赞 收藏⭐ 留言发现错误欢迎指正✨脚踏实地持续深耕奔赴自己的目标✨----- 分割线 -------从输入 URL 到页面展示到底发生了什么?1. 输入 URL 到页面展示的发生过程1.1 URL 解析与缓存检查1.2 DNS 域名解析1.3 建立网络连接1.4 发送 HTTP 请求报文1.5 服务器处理请求并返回响应 与 浏览器接收、解码响应1.6 生成 DOM 树、CSSOM 树、渲染树1.7 JavaScript 脚本执行1.8 布局 Layout回流与绘制 Paint 与页面完成展示响应交互事件2. 总结前言这里是小谢同学的URL学习记录整理从输入 URL 到页面展示的发生过程。笔记用于自我复盘巩固有错误欢迎大家指出专栏还有 Java、网络、C 语言等系列笔记欢迎翻阅.同时也希望这一篇文章能帮助到你~1. 输入 URL 到页面展示的发生过程浏览器输入网址回车短短几百毫秒,不只是我们表面看见的这么简单背后却穿插着应用层、传输层、网络层、数据链路层再到浏览器解析渲染一系列的细节。整体大流程:DNS 解析 → TCP 连接 → HTTPS 握手 → HTTP 请求 → 服务器响应 → TCP 断开连接 → 浏览器解析渲染页面URL 解析与缓存检查此时我如果直接输入这段URL会发生什么呢?在浏览器地址栏输入 URL 并按下回车浏览器首先对 URL 进行解析拆分出协议、域名、端口、资源路径等信息。随后依次检查各级缓存浏览器缓存、系统缓存、本机 hosts 文件。如果查到未没有过期的有效缓存资源就直接复用没有缓存则进入 DNS 解析流程。注解:DNSDomain Name System负责将人类可读的域名如 www.example.com转换为计算机可识别的IP地址是互联网访问的第一步。解析过程涉及缓存查询、递归与迭代查询以及多级DNS服务器协作完成。DNS 域名解析计算机网络通信中是依靠IP 地址定位服务器域名只是为了方便人记忆。DNS 解析就是把域名翻译成一个对应的 IP 地址。类似于:一个字典,我们把中文输入进去,就会得到对应的英文术语;浏览器向本地 DNS 服务器发起查询如果本地没有缓存则迭代查询根域名服务器、顶级域名服务器、权威域名服务器最终拿到目标服务器 IP。大型网站会使用负载均衡可能返回多个不同 IP。建立网络连接拿到目标 IP 与端口后浏览器和服务器通过TCP 三次握手建立可靠的 TCP 连接。具体三次握手流程:-TCP三次握手具体流程如果访问的是 HTTPS 网站在 TCP 连接建立后还会进行TLS 握手校验服务器 CA 证书合法性、协商加密套件、生成会话密钥后续传输的数据还会被加密。HTTPS加密流程-HTTPS加密流程发送 HTTP 请求报文连接就绪后浏览器组装 HTTP 请求报文包含请求行、请求头、请求体通过TCP 通道发送给服务器。请求头中会携带缓存验证字段例如:If-None-Match、If-Modified-Since如果此时服务器的资源没有改动过会返回一个304 状态码此时不用重传完整 HTML这样做可以有效节省带宽。服务器处理请求并返回响应 与 浏览器接收、解码响应服务器一般是Nginx接收请求转发给后端程序。后端执行业务逻辑读取静态文件或者查询数据库生成 HTTP 响应报文状态行、响应头、响应体 HTML再通过TCP 传回浏览器。浏览器收到响应根据响应头信息解压例如 gzip 压缩会依靠Content-Type判断资源类型如果是 HTML 文档就开始渲染流程。生成 DOM 树、CSSOM 树、渲染树解析 HTML 文本生成DOM 树描述页面的文档结构下载并解析 CSS 样式生成CSSOM 树存储页面样式规则将 DOM 树和 CSSOM 树合并过滤掉不可见的元素display:none生成渲染树用来做页面布局。JavaScript 脚本执行浏览器在解析 HTML 时一旦遇到script的标签会暂停 HTML 解析下载并执行JS 代码。原因JS 代码可以修改 DOM 结构、修改 CSS 样式浏览器必须等 JS 执行完才能继续解析页面。普通同步脚本会阻塞 HTML 解析async异步脚本、defer延迟脚本可以减少对 HTML 解析的阻塞JS 修改 DOM / 样式后会触发浏览器重新布局与绘制。布局 Layout回流与绘制 Paint 与页面完成展示响应交互事件Layout回流遍历渲染树计算页面上每个元素的位置、宽高等几何信息只要元素大小 / 位置变化就会触发回流开销较大。Paint绘制按照布局结果填充文字、颜色、图片把元素绘制到对应的图层上。部分场景会使用 GPU 加速做图层合成。DOMContentLoadedDOM 树构建完成触发此时页面结构已经就绪图片可能还在加载load页面所有资源图片、样式等全部加载完成才触发。事件触发后页面展示完成可以接收鼠标点击、滚动等用户交互用户操作会修改页面再次触发布局、绘制更新页面画面。总结URL 解析浏览器解析 URL提取协议、域名、端口、资源路径。DNS 域名解析先查浏览器 DNS 缓存、操作系统 DNS 缓存、hosts 文件都没找到就递归 / 迭代 DNS 查询把域名翻译成服务器 IP 地址。建立 TCP 连接拿到 IP 和端口通过三次握手建立 TCP 连接。如果是 HTTPSTCP 连接建立完成后进行 TLS 握手校验 CA 证书合法性、协商加密套件后续通信全部加密。发送 HTTP 请求浏览器构造 HTTP 请求报文通过 TCP 通道发给服务器。请求头会带上协商缓存相关字段。服务器处理与响应服务器接收请求后端业务处理返回 HTTP 响应。如果资源没修改返回304 响应码浏览器直接使用本地缓存如果更新了就会返回 200并带上最新 HTML 资源。TCP 断开数据传输完毕四次挥手断开 TCP 连接。浏览器解析渲染页面解析 HTML 生成 DOM 树解析 CSS 生成 CSSOM 树。遇到普通 script 标签会阻塞 DOM 解析优先执行 JS。DOMCSSOM 合并生成渲染树。Layout回流 / 重排会计算元素位置大小。Paint绘制把像素画到屏幕上页面展示出来。最后监听页面交互事件(等待用户操作)。 从输入 URL 到页面展示到底发生了什么?
博客主页小谢同学的小破站✍️本文由小谢同学的小破站原创首发于 CSDN ☕JavaSE专栏JavaSEJavaEE初阶专栏JavaEE初阶JavaEE进阶专栏JavaEE进阶数据结构专栏数据结构⚙️算法专栏算法MySQL初阶专栏MySQL初阶MySQL进阶专栏MySQL进阶计算机网络专栏计算机网络C语言专栏C语言欢迎点赞 收藏⭐ 留言发现错误欢迎指正✨脚踏实地持续深耕奔赴自己的目标✨----- 分割线 -------从输入 URL 到页面展示到底发生了什么?1. 输入 URL 到页面展示的发生过程1.1 URL 解析与缓存检查1.2 DNS 域名解析1.3 建立网络连接1.4 发送 HTTP 请求报文1.5 服务器处理请求并返回响应 与 浏览器接收、解码响应1.6 生成 DOM 树、CSSOM 树、渲染树1.7 JavaScript 脚本执行1.8 布局 Layout回流与绘制 Paint 与页面完成展示响应交互事件2. 总结前言这里是小谢同学的URL学习记录整理从输入 URL 到页面展示的发生过程。笔记用于自我复盘巩固有错误欢迎大家指出专栏还有 Java、网络、C 语言等系列笔记欢迎翻阅.同时也希望这一篇文章能帮助到你~1. 输入 URL 到页面展示的发生过程浏览器输入网址回车短短几百毫秒,不只是我们表面看见的这么简单背后却穿插着应用层、传输层、网络层、数据链路层再到浏览器解析渲染一系列的细节。整体大流程:DNS 解析 → TCP 连接 → HTTPS 握手 → HTTP 请求 → 服务器响应 → TCP 断开连接 → 浏览器解析渲染页面URL 解析与缓存检查此时我如果直接输入这段URL会发生什么呢?在浏览器地址栏输入 URL 并按下回车浏览器首先对 URL 进行解析拆分出协议、域名、端口、资源路径等信息。随后依次检查各级缓存浏览器缓存、系统缓存、本机 hosts 文件。如果查到未没有过期的有效缓存资源就直接复用没有缓存则进入 DNS 解析流程。注解:DNSDomain Name System负责将人类可读的域名如 www.example.com转换为计算机可识别的IP地址是互联网访问的第一步。解析过程涉及缓存查询、递归与迭代查询以及多级DNS服务器协作完成。DNS 域名解析计算机网络通信中是依靠IP 地址定位服务器域名只是为了方便人记忆。DNS 解析就是把域名翻译成一个对应的 IP 地址。类似于:一个字典,我们把中文输入进去,就会得到对应的英文术语;浏览器向本地 DNS 服务器发起查询如果本地没有缓存则迭代查询根域名服务器、顶级域名服务器、权威域名服务器最终拿到目标服务器 IP。大型网站会使用负载均衡可能返回多个不同 IP。建立网络连接拿到目标 IP 与端口后浏览器和服务器通过TCP 三次握手建立可靠的 TCP 连接。具体三次握手流程:-TCP三次握手具体流程如果访问的是 HTTPS 网站在 TCP 连接建立后还会进行TLS 握手校验服务器 CA 证书合法性、协商加密套件、生成会话密钥后续传输的数据还会被加密。HTTPS加密流程-HTTPS加密流程发送 HTTP 请求报文连接就绪后浏览器组装 HTTP 请求报文包含请求行、请求头、请求体通过TCP 通道发送给服务器。请求头中会携带缓存验证字段例如:If-None-Match、If-Modified-Since如果此时服务器的资源没有改动过会返回一个304 状态码此时不用重传完整 HTML这样做可以有效节省带宽。服务器处理请求并返回响应 与 浏览器接收、解码响应服务器一般是Nginx接收请求转发给后端程序。后端执行业务逻辑读取静态文件或者查询数据库生成 HTTP 响应报文状态行、响应头、响应体 HTML再通过TCP 传回浏览器。浏览器收到响应根据响应头信息解压例如 gzip 压缩会依靠Content-Type判断资源类型如果是 HTML 文档就开始渲染流程。生成 DOM 树、CSSOM 树、渲染树解析 HTML 文本生成DOM 树描述页面的文档结构下载并解析 CSS 样式生成CSSOM 树存储页面样式规则将 DOM 树和 CSSOM 树合并过滤掉不可见的元素display:none生成渲染树用来做页面布局。JavaScript 脚本执行浏览器在解析 HTML 时一旦遇到script的标签会暂停 HTML 解析下载并执行JS 代码。原因JS 代码可以修改 DOM 结构、修改 CSS 样式浏览器必须等 JS 执行完才能继续解析页面。普通同步脚本会阻塞 HTML 解析async异步脚本、defer延迟脚本可以减少对 HTML 解析的阻塞JS 修改 DOM / 样式后会触发浏览器重新布局与绘制。布局 Layout回流与绘制 Paint 与页面完成展示响应交互事件Layout回流遍历渲染树计算页面上每个元素的位置、宽高等几何信息只要元素大小 / 位置变化就会触发回流开销较大。Paint绘制按照布局结果填充文字、颜色、图片把元素绘制到对应的图层上。部分场景会使用 GPU 加速做图层合成。DOMContentLoadedDOM 树构建完成触发此时页面结构已经就绪图片可能还在加载load页面所有资源图片、样式等全部加载完成才触发。事件触发后页面展示完成可以接收鼠标点击、滚动等用户交互用户操作会修改页面再次触发布局、绘制更新页面画面。总结URL 解析浏览器解析 URL提取协议、域名、端口、资源路径。DNS 域名解析先查浏览器 DNS 缓存、操作系统 DNS 缓存、hosts 文件都没找到就递归 / 迭代 DNS 查询把域名翻译成服务器 IP 地址。建立 TCP 连接拿到 IP 和端口通过三次握手建立 TCP 连接。如果是 HTTPSTCP 连接建立完成后进行 TLS 握手校验 CA 证书合法性、协商加密套件后续通信全部加密。发送 HTTP 请求浏览器构造 HTTP 请求报文通过 TCP 通道发给服务器。请求头会带上协商缓存相关字段。服务器处理与响应服务器接收请求后端业务处理返回 HTTP 响应。如果资源没修改返回304 响应码浏览器直接使用本地缓存如果更新了就会返回 200并带上最新 HTML 资源。TCP 断开数据传输完毕四次挥手断开 TCP 连接。浏览器解析渲染页面解析 HTML 生成 DOM 树解析 CSS 生成 CSSOM 树。遇到普通 script 标签会阻塞 DOM 解析优先执行 JS。DOMCSSOM 合并生成渲染树。Layout回流 / 重排会计算元素位置大小。Paint绘制把像素画到屏幕上页面展示出来。最后监听页面交互事件(等待用户操作)。