从输入URL到浏览器页面展示,发生了什么?

一个老生常谈的问题,当在浏览器地址栏输入URL到浏览器展示页面,浏览器做了哪些工作?

  1. DNS解析
  2. 建立TCP连接
  3. 发送HTTP请求
  4. 服务器响应请求
  5. 浏览器解析渲染页面
  6. 断开TCP连接:TCP四次挥手

一、URL

URL(Uniform Resource Locator),统一资源定位符,用于定位互联网上资源,俗称网址。

URL 由多个部分组成:协议、主机名、端口号、路径和查询字符串等。

例:scheme://host.domain:port/path/filename?abc=123#456789

  • scheme - 定义因特网服务的类型,常见的协议有 httphttpsftpfile
  • host - 定义域主机(http的默认主机是www
  • domain - 定义因特网域名
  • port - 端口号(http默认端口80https默认端口443
  • path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
  • filename - 定义文档/资源的名称
  • query - 即查询参数
  • fragment - 即 # 后的hash值,一般用来定位到某个位置

二、DNS

1. 什么是DNS

DNS 协议提供通过域名查找IP 地址,或逆向从 IP 地址反查域名的服务。 DNS 是一个网络服务器,我们的域名解析简单来说就是在 DNS 上记录一条信息记录。

在浏览器输入网址后不能直接通过域名找到对应的服务器IP地址,需要进行 DNS 域名解析,查找到对应的 IP 地址进行访问。

DNS的域名查找分两种方式:

  • 在客户端和浏览器,本地DNS之间的查询方式是递归查询

  • 在本地DNS服务器与根域及其子域之间的查询方式是迭代查询

    • DNS 服务器 :返回顶级域 DNS 服务器的 IP 地址
    • 顶级域 DNS 服务器:返回权威 DNS 服务器的 IP 地址
    • 权威 DNS 服务器 :返回相应主机的 IP 地址

2. DNS的优化与应用

  1. DNS缓存 DNS存在着多级缓存,从离浏览器的距离排序的话,有以下几种: 浏览器缓存,系统缓存,路由器缓存,IPS服务器缓存,根域名服务器缓存,顶级域名服务器缓存,主域名服务器缓存。
  2. DNS负载均衡(DNS重定向) DNS负载均衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址,在应答DNS查询时, DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果,将客户端的访问 引导到不同的机器上去,使得不同的客户端访问不同的服务器,从而达到负载均衡的目的。
  3. CDN(Content Delivery Network)就是利用DNS的重定向技术,DNS服务器会返回一个跟用户最接近的点的IP地址给用户,CDN节点的服务器负责响应用户的请求,提供所需的内容。
  4. dns-prefetch DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行 DNS 的解析,减少用户等待时间,提高用户体验。

三、TCP

传送门 ☞ 认识TCP,弄明白TCP连接的三次「握手」、四次「挥手」

四、HTTP / HTTPS

1. HTTPSHTTP的区别

  • HTTP是超文本传输协议,信息是明文传输;HTTPS则是具有安全性的加密传输协议
  • HTTP基于TCP协议,TCP三次握手之后即可开始HTTP通信;HTTPS是在HTTPTCP之间加了一个SSL/TLS安全层,在TCP握手之后,还要进行TLS握手,才可以开始通信。
  • HTTP没有身份认证,存在安全隐患;HTTPS使用证书系统来进行身份认证,使用HTTPS的网站需要到CA申请证书,一般免费证书较少,所以需要一定的费用。
  • HTTP默认端口是80HTTPS默认端口是443

2. TLS

建立TCP连接后就可以通过HTTP进行数据传输,如果使用HTTPS,会在TCPHTTP之间多一层协议做加密及认证的服务。HTTPS使用SSLTLS协议,保障了信息的安全。

  • SSL

    • 认证用户和服务器,确保数据发送到正确的客户端和服务器。
    • 加密数据防止数据中途被窃取。
    • 维护数据的完整性,确保数据在传输过程中不被改变。
  • TLS

    • 用于在两个通信应用程序之间提供保密性和数据完整性。该协议由两层组成:TLS记录协议和TLS握手协议。传输层安全(TLS)是现已废弃的安全套接字层(SSL)的继任者。

五、浏览器解析渲染页面

在浏览器里,每个页面的首次渲染都经历了如下阶段:

  1. 解析HTML并构建DOM
  2. 解析CSS构建CSSOM
  3. DOMCSSOM合并成一个渲染(render)树(:after:before这样的伪元素会在这个环节被构建到DOM树中)。
  4. 计算图层布局,根据渲染树来布局,计算每个节点的位置。
  5. 调用GPU绘制,合成图层,显示在屏幕上。
相关推荐
前端若水2 分钟前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger11 分钟前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)25 分钟前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态34 分钟前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态39 分钟前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart41 分钟前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter
放下华子我只抽RuiKe51 小时前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架
XinZong1 小时前
OpenClaw 实现双重心跳(Heartbeat)+ clawreach虾聊项目实现
javascript
IT_陈寒2 小时前
Redis缓存击穿把我整不会了,原来还有这手操作
前端·人工智能·后端
idcu3 小时前
深入 Lyt.js 组件系统:L2 渲染引擎层的核心
前端·typescript