从输入一个URL到页面加载完成的过程

计算机网络 从输入一个URL到页面加载完成的过程

前言

转载自一篇博客原文链接

整体流程

1. 用户在某个标签页输入URL回车之后，浏览器主进程会新开一个网络进程，发起HTTP请求
2. 浏览器会进行DNS查询，将域名解析为IP地址
3. 浏览器获得IP地址后，向服务器请求建立TCP连接
4. 浏览器向服务器发起HTTP请求
5. 服务器处理请求，返回HTTP响应
6. 浏览器的渲染进程解析并绘制页面
7. 如果遇到JS/CSS/图片等静态资源的引用链接，重复上述过程，向服务器请求这些资源

深入底层原理之浏览器

​ 浏览器本身是多进程的。

​ 浏览器只有一个主进程，又称为Browser进程，负责创建/管理其他进程，显示浏览器主窗口，下载网络资源等。

​ 每打开一个标签页，就创建了一个独立的浏览器渲染进程。浏览器的渲染进程又称为浏览器内核，Renderer进程，其内部是多线程的，负责页面渲染，脚本执行等。

​ 浏览器的每一个网络请求，都需要主进程开辟一个单独的网络线程去处理。输入URL相当于一个网络请求，解析HYML时遇到JS/CSS/图片等静态资源的引用链接，也需要分别请求。

​ 浏览器的渲染流程：

1. 解析HTML文件，构建DOM树，同时下载CSS等静态资源
2. CSS文件下载完成后，解析CSS文件，形成CSSOM树
3. DOM与CSSOM合并得到渲染树RenderTree
4. 计算渲染树中各个元素的尺寸，位置，这个过程称为回流Reflow
5. 浏览器将各个图层的信息发送给GPU，GPU绘制页面

进一步阅读：浏览器的运行机制

• 浏览器的多进程模型
• 浏览器内核的多线程模型
• GUI线程，JS线程的阻塞关系
• JS引擎的解析与执行过程
• JS单线程模型，事件循环Event-Loop
• …

深入底层原理之服务器

负载均衡：大型的项目，往往是由多台服务器组成的一个集群，以此应对庞大的并发访问量。这种情况下，用户的请求都会指向调度服务器，由调度服务器将请求分发给集群中的某台服务器A，然后调度服务器会将A服务器的HTTP响应发送给用户。

此外，后端还会经过安全认证，参数校验，中间件，执行业务代码，访问数据库等一系列操作，才能向用户返回结果。

进一步阅读：负载均衡的实现。

深入底层原理之网络协议

网络协议栈

OSI七层模型	TCP/IP概念层模型	功能	TCP/IP协议族
应用层	应用层	文件传输，电子邮件，文件服务，虚拟终端	TFTP,HTTP,SNMP,FTP,SMTP,DNS,Telnet
表示层		数据格式化，代码转换，数据加密	没有协议
会话层		解除或建立与别的接点的联系	没有协议
传输层	传输层	提供端对端的接口	TCP，UDP
网络层	网络层	为数据包选择路由	IP,ICMP,RIP,OSPF,BGP,IGMP
数据链路层	链路层	传输有地址的帧以及错误检测功能	SLIP,CSLIP,PPP,ARP,RARP,MTU
物理层		以二进制数据形式在物理媒体上传输数据	ISO2110,IEEE802,IEEE802.2

DNS查询过程

DNS是应用层的协议，作用是将域名转化为IP，以供传输层建立TCP连接。

整体流程：浏览器搜索自身的DNS缓存、搜索操作系统的DNS缓存、读取本地的Host文件和向本地DNS服务器进行查询等。

进一步阅读：DNS的递归查询与迭代查询

TCP三次握手、四次挥手

TCP是传输层协议，HTTP协议通过TCP协议发送数据。之所以选择TCP，是因为HTTP对数据的准确性要求高，TCP能够提供可靠的交付。

SSL四次握手

SSL位于传输层和应用层之间，TCP和HTTP之间。SSL协议的目的是，为通信双方提供一种在不安全的网络环境中，安全地协商一个密钥的方法。

SSL实现的核心是非对称密码学。非对称密码包含两个部分：公钥和私钥，一个用作加密，另一个则用作解密。使用其中一个密钥把明文加密后所得到的密文，只能用对应的另一个密钥才能解密得到原本的明文；甚至连最初用来加密的密钥也不能用作解密。

HTTPS本质上就是HTTPS+SSL。通过SSL四次握手的过程，客户端和服务端会商定一个共同的随机密钥，用来对称加密。握手结束后，双方都会使用这个约定的随机密钥来加密、解密会话内容，使用的完全是普通的HTTP协议。

进一步阅读：HTTPS详解

• SSL四次握手
• 数字签名、摘要算法是什么？
• …

HTTP的长连接与短连接

HTTP/1.0默认使用的是短连接。也就是说，浏览器每请求一个静态资源，就建立一次连接，任务结束就中断连接。

HTTP/1.1默认使用的是长连接。长连接是指在一个网页打开期间，所有网络请求都使用同一条已经建立的连接。当没有数据发送时，双方需要发送检测包以维持此连接。长连接不会永久保持连接，而是有一个保持时间。实现长连接要客户端和服务端都支持长连接。

长连接优点：TCP三次握手时会有1.5RTT的延迟、以及建立连接后慢启动（slow-start）特性，当请求频繁时，建立和关闭TCP连接会浪费时间和带宽，而重用一条已有的连接性能更好。

长连接的缺点：长连接会占用服务器的资源。

进一步阅读：HTTP长连接和短连接

HTTP2.0

HTTP2.0的三大特性是头部压缩、服务端推送、多路复用。

HTTP1.1允许通过同一个连接发起多个请求。但是由于HTTP11.X使用文本格式传输数据，服务端必须按照客户端请求到来的顺序，串行传输数据。HTTP2.0使用二进制数据帧作为传输的最小单位，每个帧标识了自己属于哪个流，每个流对应一个请求。服务端可以并行地传输数据，而接收端可以根据帧中的顺序标识，自行合并数据。

在HTTP1.1中，由于浏览器限制每个域名下最多同时有6个请求，其余请求会被阻塞，因此我们通常使用多个域名（比如CDN）来提高浏览器的下载速度。

HTTP2.0就不再需要这样的优化了。

同理，在HTTP1.1中，我们会将多个JS文件、CSS文件等打包成一个文件，将多个小图片合并为雪碧图，目的是减少HTTP请求数。HTTP2也不需要这样优化了。

进一步阅读：

• HTTP协议知识点
• HTTP2.0引入的变化

HTTP缓存

浏览器可以将已经请求过的资源（如图片、JS文件）缓存下来，下次再次请求相同的资源时，直接从缓存读取。

浏览器采用的缓存策略有两种：强制缓存、协商缓存。浏览器根据第一次请求资源时返回的HTTP响应头来选择缓存策略。

强制缓存：为资源设置一个过期时间，只要资源没有过期，就读取浏览器的缓存。强制缓存不需要向服务器发起请求，浏览器直接返回200（from cache）。

协商缓存：浏览器携带缓存资源的元信息，向服务器发起请求，由服务器决定是否使用缓存。如果协商缓存生效，服务器返回304和Not Modified；如果协商缓存失败，服务器返回200和请求结果。

协商缓存的原理是：服务端根据资源的元信息，判断浏览器缓存的资源在服务器上是否有改动。元信息有两种，一种是资源的上次修改时间，另一种是资源的Hash值。前者实现简单，但是精确度低，文件修改时间只能以秒记；后者精确度高，但是性能低，需要计算哈希值。

优先级：

• 强制缓存>协商缓存
• 在协商缓存中，Hash值>上次修改时间

进一步阅读：浏览器的缓存机制