从输入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 - 定义因特网服务的类型，常见的协议有 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的优化与应用

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

四、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）的继任者。

五、浏览器解析渲染页面

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

1. 解析HTML并构建DOM树
2. 解析CSS构建CSSOM树
3. 将DOM与CSSOM合并成一个渲染(render)树（:after、:before这样的伪元素会在这个环节被构建到DOM树中）。
4. 计算图层布局，根据渲染树来布局，计算每个节点的位置。
5. 调用GPU绘制，合成图层，显示在屏幕上。