一个老生常谈的问题,当在浏览器地址栏输入URL到浏览器展示页面,浏览器做了哪些工作?
- DNS解析
- 建立TCP连接
- 发送HTTP请求
- 服务器响应请求
- 浏览器解析渲染页面
- 断开TCP连接:TCP四次挥手
一、URL
URL(Uniform Resource Locator)
,统一资源定位符,用于定位互联网上资源,俗称网址。
URL
由多个部分组成:协议、主机名、端口号、路径和查询字符串等。
例:scheme://host.domain:port/path/filename?abc=123#456789
scheme
- 定义因特网服务的类型,常见的协议有http
、https
、ftp
、file
host
- 定义域主机(http
的默认主机是www
)domain
- 定义因特网域名port
- 端口号(http
默认端口80
,https
默认端口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的优化与应用
DNS
缓存DNS
存在着多级缓存,从离浏览器的距离排序的话,有以下几种: 浏览器缓存,系统缓存,路由器缓存,IPS
服务器缓存,根域名服务器缓存,顶级域名服务器缓存,主域名服务器缓存。DNS
负载均衡(DNS
重定向)DNS
负载均衡技术的实现原理是在DNS
服务器中为同一个主机名配置多个IP
地址,在应答DNS
查询时,DNS
服务器对每个查询将以DNS
文件中主机记录的IP
地址按顺序返回不同的解析结果,将客户端的访问 引导到不同的机器上去,使得不同的客户端访问不同的服务器,从而达到负载均衡的目的。CDN(Content Delivery Network)
就是利用DNS
的重定向技术,DNS
服务器会返回一个跟用户最接近的点的IP
地址给用户,CDN
节点的服务器负责响应用户的请求,提供所需的内容。dns-prefetch DNS Prefetch
是一种DNS
预解析技术。当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行DNS
的解析,减少用户等待时间,提高用户体验。
三、TCP
四、HTTP / HTTPS
1. HTTPS
和HTTP
的区别
HTTP
是超文本传输协议,信息是明文传输;HTTPS
则是具有安全性的加密传输协议HTTP
基于TCP
协议,TCP
三次握手之后即可开始HTTP
通信;HTTPS
是在HTTP
与TCP
之间加了一个SSL/TLS
安全层,在TCP
握手之后,还要进行TLS
握手,才可以开始通信。HTTP
没有身份认证,存在安全隐患;HTTPS
使用证书系统来进行身份认证,使用HTTPS
的网站需要到CA
申请证书,一般免费证书较少,所以需要一定的费用。HTTP
默认端口是80
;HTTPS
默认端口是443
2. TLS
建立TCP
连接后就可以通过HTTP
进行数据传输,如果使用HTTPS
,会在TCP
和HTTP
之间多一层协议做加密及认证的服务。HTTPS
使用SSL
和TLS
协议,保障了信息的安全。
-
SSL
- 认证用户和服务器,确保数据发送到正确的客户端和服务器。
- 加密数据防止数据中途被窃取。
- 维护数据的完整性,确保数据在传输过程中不被改变。
-
TLS
- 用于在两个通信应用程序之间提供保密性和数据完整性。该协议由两层组成:
TLS
记录协议和TLS
握手协议。传输层安全(TLS
)是现已废弃的安全套接字层(SSL
)的继任者。
- 用于在两个通信应用程序之间提供保密性和数据完整性。该协议由两层组成:
五、浏览器解析渲染页面
在浏览器里,每个页面的首次渲染都经历了如下阶段:
- 解析
HTML
并构建DOM
树 - 解析
CSS
构建CSSOM
树 - 将
DOM
与CSSOM
合并成一个渲染(render
)树(:after
、:before
这样的伪元素会在这个环节被构建到DOM
树中)。 - 计算图层布局,根据渲染树来布局,计算每个节点的位置。
- 调用
GPU
绘制,合成图层,显示在屏幕上。