从输入URL到渲染的过程中到底发生了什么？

• CDN
• 缓存
• DNS
• TCP三次握手、四次挥手
• 浏览器渲染过程
• 输入URL到页面渲染过程的一些优化

下面我将“从输入URL到渲染的全过程”大概的描述出来，再对其过程加以解释，了解过程中可以做哪些优化。文章内容有点长，需要有足够的耐心看完哟！！下面我要开始啦！

1、URL解析

2、DNS解析

3、建立TCP链接

4、客户端发送请求

5、服务器处理和响应请求

6、浏览器解析并渲染响应内容

7、TCP四次挥手断开连接

一、URL解析

地址解析和编码

我们输入URL后，浏览器会解析输入的字符串，判断是URL还是搜索关键字，如果是URL就开始编码。
一般来说URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号，所以，如果URL中有文字就必须编码后使用。但是URL编码很混乱，不同的操作系统、浏览器、网页字符集，会导致不同的编码结果。所以我们需要使用JavaScript先对URL编码，然后提交给服务器，不给浏览器插手的机会。我们通常会使用encodeURI()函数或者encodeURIComponent()函数来编码URL

HSTS

HSTS(HTTP Strict TransportSecurity)是一种新的Web安全协议，HSTS的作用是强制客户端使用HTTPS与服务器创建连接。比如你在地址栏输入http://xxx/，浏览器会自动将http转写成https，然后直接向 https://xxx/ 发送请求。

缓存检查

浏览器在发送请求之前先检查有没有缓存，过程如下：

浏览器会先去查看强缓存（Expires和cache-control）判断是否过期，如果强缓存生效，直接从缓存中读取资源；若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag/If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，并重新返回资源和缓存标识，再次存入浏览器缓存中；生效则返回304，并从缓存中读取资源。（协商缓存之前要经过DNS域名解析，之后建立TCP链接）

那么浏览器缓存的位置在哪呢？

• Service Worker：浏览器独立线程进行缓存
• Memory Cache：内存缓存
• Disk Cache：硬盘缓存
• Push Cache：推送缓存（HTTP/2中的）

注意：输入网址之后，会查找内存缓存，没有再找硬盘，都没有就发生网络请求。
普通刷新（F5）：因为TAB没有关闭，所以内存缓存可用，如果匹配上会被优先使用，其次是磁盘缓存
强制刷新（Ctrl+F5）：浏览器不使用缓存，因此发送的请求头均带有Cache-control：no-cache,服务器直接返回200和最新内容。

二、进行DNS解析

DNS

（1）、DNS：把域名和ip地址相互映射分布式数据库，让用户能更方便的访问互联网，DNS协议运行在UDP协议之上
（2）、DNS解析：通过域名最终得到对应ip地址的过程。
（3）、DNS缓存：浏览器，操作系统，路由器，本地DNS，根域名服务器都会对DNS结果作出一定的缓存

DNS解析过程

（1）、首先搜索浏览器自身的DNS缓存，有缓存直接返回;
（2）、浏览器自身DNS不存在，浏览器就会调用一个类似gethostbyname的库函数,此函数会先去检测本地hosts文件，查看是否有对应ip。
（3）、如果本地hosts文件不存在映射关系，就会查询路由缓存，路由缓存不存在就去查找本地DNS服务器（一般TCP/IP参数里会设首选DNS服务器，通常是8.8.8.8)(客户端到本地DNS服务器是递归过程）
（4）、如果本地DNS服务器还没找到就会向根服务器发出请求。（DNS服务器之间是迭代过程）
具体过程：

• 本地DNS服务器代我们的浏览器发起迭代DNS解析请求，首先它会找根域的DNS的IP地址（全球13台哟，可惜中国没有！）。找到根域的DNS地址,就会向其发起请求（请问www.baidu.com这个域名的IP地址是多少呀？）；

• 根域发现这是一个顶级域com域的一个域名，于是告诉本地DNS服务器我不知道这个域名的IP地址,但是我知道com域的IP地址，你去找它去吧；

• 于是本地DNS服务器就得到了com域的IP地址，又向com域的IP地址发起了请求（请问www.baidu.com这个域名的IP地址是多少呀?）,于是com域服务器告诉本地DNS服务器我不知道www.baidu.com这个域名的IP地址，但是我知道baidu.com这个域的DNS地址，你去找它去;

• 于是本地DNS服务器又向baidu.com这个域名的DNS地址