详细介绍从输入URL到页面显示的过程

输入URL到页面显示

• 1、首先，在输入的过程中，浏览器的UI线程会实时捕捉输入的内容，如果输入的不是网址或者协议不合法的话，那么搜索引起会合成新的带搜索关键字的URL，准备进行搜索
• 同时也还会检查有没有出现非法字符，如果有的话就对非法字符进行转义
• 如果一切都没有问题，在回车之前，还会执行依次当前页面的beforeunload事件,该事件可以让开发者在页面退出之前执行一些数据清理工作，又或者在表单没有提交的情况下询问用于是否确认离开

---

• 2、输入url后，需要找到这个url域名的服务器端ip地址，为了寻找这个ip，浏览器会首先寻找本地缓存
• 如果有缓存的话，并且没有国企，就不发送请求，直接来过来解码再开始渲染进程
• 检查缓存的过程是这样的：
• • 如果是https的话，有可能先找service worker，比如你设置了请求拦截，离线缓存的话
• • 如果没有，再找浏览器的内存缓存
• • 如果还没有，再找硬盘缓存
• • 如果还没有，再找路由器缓存

---

• 3、如果没有缓存或者缓存过期，就开始解析URL
• URL包括 协议 域名 短裤哦 路径

---

• 4、把解析URL出来的域名进行DNS解析，找到要请求的服务器的IP地址
• DNS解析IP的过程大概是：
• 先在客户端进行查询有没有解析的记录，也就是DNS缓存
• 如果DNS缓存中没有解析的记录，则查询DNS服务器得到ip地址

---

• 5、拿到ip地址后，就开始正式发起请求，先建立TCP连接

• 5.1、http三次握手

• 建立TCP连接需要进行三次握手，在http的三次握手的过程是这样的：

• 1）第一次握手：客户端向服务器发送一个SYN同步报文和一个客户端初始化随机序列号seq

• 2）第二次握手：服务器收到请求后，再向客户端发送自己的SYN同步报文和ACK确认报文，还有一个服务端的初始化随机序列号seq,以及一个确认号ack，来表示自己收到了

• 3）第三次握手：客户端收到服务器的确认应答后，再向服务器发送一个ACK确认报文，一个确认号ack，一个序列号，告诉服务器收到了
  
  

• 5.2、https

• httpsye也会同http一样进行三次握手，但是它还会进行一个加密协议的握手过程，这个加密协议的过程如下

• 1）服务器向客服端颁发数字证书，在证书里面包含有公钥（用于加密），服务器自己保留私钥（私钥用于解密）

• 2）当客户端收到这个证书后，就会解析这个证书，看里面的公钥是否有效，如果没有什么问题的话就会生成一个随机值

• 3）然后客户端会对这个随机值用公钥进行加密，然后发给服务器。这样做的目的就是为了让服务器得到这个随机值，以后客服端和服务端都可以用这个随机值进行加密解密

• 4）服务器收到这个随机值后，就用它自己的私钥对这个随机值进行解密。然后服务器再把要传输的信息和这个随机值通过算法混合在一起，然后发给客户端。这样的话，除非知道这个随机值，不然是无法知道服务器传输的信息的。

• 5）客户端收到以后，再用之前生成的随机值，进行解密，然后就可以得到服务器传过来的信息

---

• 6、成功建立TCP连接之后，浏览器会构建请求行、cookie等数据附加到请求头中，然后发送给服务器，服务器接收请求并解析
• 解析后，服务器会把响应数据通过之前建立的TCP连接，返回给浏览器的网络进程
• 浏览器接收到响应数据以后，如果是http1.1以下，就直接关闭连接，不过现在浏览器默认都会保持连接（keep-alive）

---

• 7、如果要关闭TCP连接的话，需要进行四次挥手，过程如下：
• 1）第一次挥手：客户端认为没有数据要发送的话，就会向服务器发送一个释放报文，申请断开客户端和服务器之间的连接
• 2）第二次挥手：服务器收到请求以后，会向客户端发送一个确认报文，表示已经收到了客户端释放连接的请求，以后不会再接收客户端发过来的数据。此时处于半关闭状态，即此时客户端没有数据要发送了，但是服务器若想要发送数据，客户端还是要接受的
• 3）第三次挥手：服务器发送完所有请求后，会向客户端发送一个申请释放连接的报文
• 4）第四次挥手：客户端接收到申请释放连接的报文后，再向服务器发送一个确认报文，等待服务器收到确认报文，服务器收到确认报文，就会进入关闭状态。此时客户端进行一个等待的状态，这个状态会持续一段时间。如果在这段时间以内，都没有收到服务器的重发请求，那么客户端就会进入关闭状态。这样可以看出服务端结束TCP连接的时间要比客户端结束TCP连接的时间要早些。

---

• 8、在第六点中讲到，服务器会把响应数据返回给浏览器的网络进程中
• 如果返回的响应报文的状态为3xx，就需要重定向到其他URL，然后从头开始，然后网络线程会通过safeBrowsing来检查站点是不是恶意站点，如果是，就展示警告页面（看岛国小电影的朋友应该遇到过很多这种情况）
• 如果返回的状态码为2xx，接着判断资源能不能缓存，如果可以就先缓存起来，然后对响应解码
• 如果不能缓存，网络线程就会通知UI线程，然后UI线程就会创建一个渲染器来准备渲染页面

---

• 9、开始渲染
• 由于渲染机制很复杂，需要执行的任务很多，所以渲染过程被分成了很多子阶段，然后开始一边解析一边渲染，过程是这样的：
• 1）首先要构建DOM树，将html转为浏览器认识的结构。在dom树构建的过程中如果遇到js脚本或者外部js连接，则会停止构建dom树来执行和下载相应的代码，这样会造成阻塞，这就是为什么推荐js代码应该放在html后面
• 2）然后根据外部样式、内联样式等来构建一个CSS对象模型树，也就是CSSOM树。
• 3）结合DOM树和CSSOM树，生成一个渲染树（render tree），这个过程被称为attachment
• 4）生成布局（flow），浏览器在屏幕上“画出”渲染树中所有的节点、
• 5）、将布局绘制（paint）在屏幕上，显示出整个页面