当前位置: 首页 > news >正文

从输入URL到展示出页面的这个过程~

一、你输入 URL 的那一刻

地址栏处理:浏览器 UI 进程接收输入。它需要判断:是搜索词还是 URL
如果是搜索词 → 调用默认搜索引擎
如果是 URL → 规范化(补齐协议,去掉多余空格)
浏览器可能提前做 DNS 预解析,TCP/TLS 预连接),甚至 预获取

二、进程与线程准备

现代浏览器是多进程架构:

浏览器进程:负责地址栏、书签、下载、网络请求协调
网络进程:负责 DNS、TCP/TLS、HTTP
渲染进程:负责解析 HTML/CSS/JS、布局、绘制
GPU 进程:负责合成和最终绘制到屏幕
插件进程 / 扩展进程:单独运行 Flash、PDF 等插件或扩展
当你输入一个新域名时,浏览器可能会新开一个 渲染进程(基于 site isolation 策略)

三、浏览器缓存与 Service Worker

浏览器缓存检查: 浏览器首先检查自身缓存(包括内存缓存、磁盘缓存、Service Worker 缓存等),看所需资源(HTML、CSS、图片等)是否已存在且未过期

如果命中缓存且未过期: 直接从缓存中读取资源,跳过后续所有网络请求步骤,直接进入第 7 步渲染页面
如果没有命中缓存或缓存已过期: 继续执行网络请求流程

四、DNS 域名解析

由于网络传输需要使用 IP 地址,而不是域名,所以浏览器需要将域名翻译成 IP 地址。

1. 浏览器缓存: 浏览器先检查自己的 DNS 缓存

2. 操作系统缓存: 如果没有,查询操作系统(Hosts 文件和本地 DNS 缓存)

3. 路由器缓存: 如果还没有,查询路由器缓存

4. 本地 DNS 服务器: 如果仍未找到,向 ISP(互联网服务提供商)配置的本地 DNS 服务器发起一个递归查询

5. DNS 递归查询: LDNS 开始进行迭代查询:

向 根域名服务器 (Root Server) 发送请求。根服务器返回顶级域名服务器(TLD Server,如 .com)的地址。
向 TLD 服务器 发送请求。TLD 服务器返回权威域名服务器(Authoritative Server,如 example.com 的服务器)的地址。
向 权威域名服务器 发送请求。权威服务器返回最终的 IP 地址。

6. 返回结果: 最终 IP 地址返回给本地 DNS 服务器,本地 DNS 服务器将结果缓存并返回给浏览器。

五、建立 TCP

TCP(三次握手)
客户端 → 服务器:SYN
服务器 → 客户端:SYN + ACK
客户端 → 服务器:ACK

之后才能正式传输数据。
操作系统内核负责套接字创建、端口分配,网络驱动把数据打包成 IP 包,发到网卡 → 路由器 → 互联网 → 服务器

六、TLS/SSL 握手

如果 URL 使用的是 https://,那么在 TCP 连接建立后,还需要进行 TLS/SSL 握手,以建立一个安全的加密通道

  1. Client Hello: 客户端发送 TLS 版本、支持的加密套件列表等信息

  2. Server Hello: 服务器选择一个加密套件,并发送自己的数字证书

  3. 证书验证: 客户端验证证书的有效性、是否过期、是否由受信任的机构颁发等

  4. 密钥协商: 客户端生成一个“预主密钥”并用服务器的公钥加密后发送给服务器。服务器用私钥解密得到该密钥

  5. 安全连接建立: 双方利用这个预主密钥生成会话密钥(对称密钥),后续所有应用层数据都将使用这个对称密钥进行加密传输

七、发送 HTTP 请求

示例:

GET /index.html HTTP/2
Host: www.example.com
User-Agent: Chrome/118.0
Accept: text/html,application/xhtml+xml
Accept-Encoding: gzip, br
Cookie: sessionid=abc123

现在多用HTTP/1.1
特点:单连接并发差(队头阻塞),但支持持久连接

八、服务器处理请求并返回 HTTP 响应

服务器接收到请求后:

  1. 处理请求: 服务器的应用层程序根据请求路径、请求头和请求体进行业务逻辑处理

  2. 生成响应: 服务器生成一个 HTTP 响应报文

  3. 状态行: 例如 HTTP/1.1 200 OK、404 Not Found、301 Moved Permanently 等

  4. 响应头 : 包含 Content-Type(告诉浏览器返回的数据类型,如 text/html)、Content-Length、Set-Cookie、以及缓存控制字段

  5. 响应体 : 包含请求的资源内容,通常是 HTML 文本

九、浏览器渲染页面

构建 DOM 树和构建 CSSOM 树 => 构建渲染树(将 DOM 树和 CSSOM 树合并) => 布局/回流 => 绘制/重绘 => JavaScript 执行
本期内容到此为止,喜欢的话请点个赞,谢谢观看!!!

http://www.dtcms.com/a/442161.html

相关文章:

  • WebDAV 与 SMB 在钓鱼攻击中的区别
  • 8. Pandas 日期与时间序列数据处理
  • 免费网站模板做零食的网站有哪些
  • 从零开始的C++学习生活 2:类和对象(上)
  • 家纺营销型网站网站建设服务费怎么记账
  • css其他选择器(精细修饰)
  • 一般设计网站页面用什么软件做引擎网站
  • 生成式 AI 重构内容创作:从辅助工具到智能工厂
  • 华为S5720配置telnet远程
  • 面试复盘:哔哩哔哩、蔚来、字节跳动、小红书面试与总结
  • Your ViT is Secretly an Image Segmentation Model
  • 海口网站建设运营网站开发公司选择
  • 日语学习-日语知识点小记-进阶-JLPT-N1阶段应用练习(4):语法 +考え方17+2022年7月N1
  • RAG:解锁大语言模型新能力的关键钥匙
  • 广州网站建设海珠信科网站建设推广方法
  • Oracle Linux 7.8 静默安装 Oracle 11g R2 单机 ASM 详细教程
  • 旅游公司网站建设方案网站的布局结构三种
  • Django ORM 无法通过 `ForeignKey` 自动关联,而是需要 **根据父模型中的某个字段(比如 ID)去查询子模型**。
  • 吉林省建设厅信息网站网站建设的评价
  • 分布式专题——26.5 一台新机器进行Web页面请求的历程
  • 怎么让别人看到自己做的网站万维网网站301重定向怎么做
  • css样式学习记录
  • 网站服务器关闭网站数据库地址是什么
  • 每日一个C语言知识:C程序结构
  • Amazon RDS:云端数据库管理的革新之路
  • wordpress登录可见站内seo是什么意思
  • STM32简单的串口Bootloader入门
  • 360网站怎么做2核4g做网站
  • 从 “手工作坊” 到 “智能工厂”:2025 年 AI 原生应用重构内容创作产业
  • 做网站平台难在哪里网页翻译不见了