从输入一个URL到浏览器页面展示都经历了些什么
前言
在日常的浏览器访问过程中，我们肯定会访问很多的页面，但是我们输入一个网址后是如何变成一个页面展示在我们面前、从一个URL到页面的展示过程中，我们的浏览器都经历了些什么？
一、输入网址(或点击一个网页链接)
每当浏览一个网页，我们都可以在浏览器中看到一个URL，俗称网址；
二、缓存解析
浏览器获取该网址，首先不会立刻去HTTP请求；浏览器首先会在缓存中查找相关资源，从浏览器缓存--系统缓存--路由缓存当中查看，如果有相关资源则从缓存当中显示页面，如果没有则进行第三步；
缓存就是把你之前访问的web资源，比如js文件，css文件，图片等资源保存在你本机的内存或者磁盘当中，例如用Chrome做个试验：
（1）在Chrome浏览器中输入网址：chrome://chrome-urls/ ；
该地址是一个可以看到所有的Chrome支持的伪URL，找到其中的chrome://appcache-internals/；可以看到Chrome的本地缓存地址：
（2）在Chrome中访问https://www.baidu.com/，打开开发者模式（按F12），不勾选Diable cache
圈出来的部分显示了资源的来源：from disk cache：将资源缓存到磁盘中，等待下次访问时直接在磁盘读取，无需下载资源；
from memory cache：将资源缓存到内存中，等待下次访问时直接在内存中读取，无需下载资源；
我们再看看Time列：从内存中读取的资源时间为0ms，其实这些资源是存在浏览器内存中，是可以直接加载的；而从disk中读取是需要消耗读取的时间的。
这两种方式是不需要发送HTTP请求的。
三、域名解析
在上图，我们还是可以发现有些资源不是从本地获取的，显示了一个大小；这些资源都是发送浏览器HTTP请求从服务器获得的。那么在发送HTTP请求时，浏览器都做了些什么？
在发送HTTP请求之前，需要进行DNS解析，即域名解析。域名只是为了方便人类进行辨别记忆，电脑连接实际上还是需要IP的。
DNS解析：域名到IP地址的转换过程。域名解析的工作与DNS服务器完成。解析后可获取域名相应的IP地址。这里有域名解析的详细介绍：https://blog.csdn.net/m0_37812513/article/details/78775629
四、TCP连接，俗称三次握手
在域名解析之后，浏览器向服务器发起了HTTP请求，TCP连接，三次握手建立TCP连接。TCP协议是面向连接的，所以在传输数据前必须建立连接
TCP连接的建立
设主机B运行一个服务器进程，它先发出一个被动打开命令，告诉它的TCP要准备接收客户进程的连续请求，然后服务进程就处于监听的状态。不断检测是否有客户进程发起连续请求，如有，作出响应。设客户进程运行在主机A中，他先向自己的TCP发出主动打开的命令，表明要向某个IP地址的某个端口建立运输连接，过程如下：
1）主机A的TCP向主机B的TCP发出连接请求报文段，其首部中的同步比特SYN应置1，同时选择一个序号x，表明在后面传送数据时的第一个数据字节的序号是x。
2）主机B的TCP收到连接请求报文段后，如同意，则发挥确认。在确认报文段中应将SYN置为1，确认号应为x+1，同时也为自己选择一个序号y
3）主机A的TCP收到此报文段后，还要向B给出确认，其确认号为y+1
4）主机A的TCP通知上层应用进程，连接已经建立，当主机B的TCP收到主机A的确认后，也通知上层应用进程，连接建立。
详细的TCP连接分析，请参考：https://www.cnblogs.com/newwy/p/3234536.html
五、服务器请求
服务器收到浏览器发送的请求信息，返回一个响应头和一个响应体。
六、页面渲染
浏览器收到服务器发送的响应头和响应体，响应体重包含了网页展示所需的资源，就是在第二步我们所看到的资源，然后进行客户端的渲染；解析html文件，生成Dom树，解析css文件，生成css树，加载图片相关资源，加载js脚本文件与用户进行交互。
至此，整个页面就千里迢迢的来到你的面前了
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180719A10NKU00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
