从"在浏览器输入域名" 到 "页面静态资源完全加载" 的流程

从"在浏览器输入域名" 到 "页面静态资源完全加载" 的流程

整个流程分为以下几步:

1. 用户输入

当用户输入关键字并按下回车后，意味着当前页面将要被替换成新的页面。但是在此之前，浏览器还会给当前页面一次执行beforeunload事件的机会
beforeunload可以允许以下操作:

1. 允许页面在退出之前执行数据清理
2. 还可以询问用户是否要离开当前页面

2. url请求过程

为了更清晰的了解大致脉络，我制作了一个导图如下:

image

其中有一部分的知识点需要补充：

2.1 关于dns解析

在用户输入域名，并且按下回车之后，计算机会先查看DNS缓存列表，如果在这个列表中存在，那么就获取到这个域名对应的ip，然后发送请求
(dns缓存是由操作系统维护更新的，它存放在内存中，每一个域名都有一个生存期，比如你访问baidu.com,那么操作系统会把baidu.com和对应的ip存在dns缓存中，下次访问时会直接读取ip，然后发请求，这样就可以节省了域名解析的时间，加快网站访问的速度。)

如果dns缓存中，没有的话，操作系统再查host文件，看看有没有设置相应的域名和对应的ip

操作系统发现再在dns缓存中，host文件都没有的话，那么它会到最近的dns服务器去查询，域名对应的ip地址

关于dns服务器。我们都知道我们访问网站的时候，最终访问的还是ip地址，域名只是一个代称，让人容易记住。dns服务器用最简单的说就是域名解析，把域名和ip绑在一起，访问域名的时候，dns帮你找到对应的ip地址

2.2 https建立流程（https = http + SSL；TLS就是握手协议）

Https的作用：在传输过程中通过加密来保护数据安全，避免用户敏感信息被第三方获取后破解

https 采用了对称加密和非对称加密。握手过程中采用非对称加密得到一个对称假面的密钥。在之后的数据传输中，使用对称加密。

原因:

对称加密速度快，浏览器的开销小
非对称加密开销大，速度慢，但是安全，所以在握手的时候为了保证非对称加密的密钥安全，所以使用它来生成密钥

工作流程如下(图片是copy下来的)：

image

握手 : 在开始加密通信之前，客户端和服务端首先必须建立连接和交换参数

1. 首先客户端会发送一个请求，里面包含 客户端生成的随机数，以及客户端支持的加密算法(都是对称加密算法)
2. 服务端收到请求之后，从中选出一组加密算法和HASH算法，并将自己的数字证书，以及一个自己生成的随机数发送给客户端
3. 客户端收到后，先验证证书是否有效（会一直验证到最顶层的根证书)，如果有效就生成一个随机数，然后用证书中包含的公钥加密这个随机数生成密文，并且用服务端刚刚挑选的HASH算法对这个随机数进行加密，生成的hash值称为校验值One一起发给服务端
4. 服务端收到后，用自己的私钥解密出随机数，然后用hash算法对这个随机数进行加密，得到校验值Two。然后判断校验值1 == 校验值2,如果相同，则说明内容未被篡改，可以信任。最后用随机数，加上第二步中选出的加密算法，加密一段握手消息，发还给客户端。同时包含Hash值
5. 客户端收到服务端消息之后，首先检验是否为握手消息，然后用HASH算法解密，再判断两个校验值是否一致。
6. 握手结束之后。客户端和服务端就会使用在握手阶段产生的随机数(3个)和挑选出来的算法进行对称加解密传输

总结： 就是一共三个随机数。根据这三个随机数创建了一个对称加密的密钥，之后的数据传输均使用这个生成的密钥。

小答疑:

• 对于第一第二步中的交换随机数。

那是为了保证生成的密钥不会每次都一样。因为SSL协议中证书是静态的。因此引入随机数是为了保证生成的密钥具有随机性。

• 为啥要使用三个随机数一起生成密钥？

这样做是为了让随机数更随机。避免生成的随机数是一个伪随机数。因为一旦随机数不够随机，就有可能会被猜出来这样就会很不安全。要知道一个伪随机数可能是伪随机数，但是三个或者多个伪随机数，那么它其实已经很接近真随机数了。所以用了三个随机数一起组合生成密钥.

• TCP的三次握手，HTTP:https://blog.csdn.net/sinat_36629696/article/details/80740678

3.准备渲染进程

默认情况下，chrome谷歌浏览器会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个渲染进程。

4.渲染阶段

文件解析成功后，会正式开始渲染流程，先会根据HTML构建DOM树，有CSS的话也会构建CSSOM树。如果遇到script标签则会判断是否存在Async 或者defer前者会并行镜像下载执行js，后者会先下载文件，然后等待html解析完成后再顺序执行。

如果以上都没有就会阻塞住渲染流程直到js执行完毕
在生成Render树的过程中，浏览器就开始调用GPU绘制，合成图层，将内容显示在屏幕上了。

原文:https://blog.csdn.net/kswkly/article/details/84329766
原文:https://mp.weixin.qq.com/s/gT9MF1l52HuKUpmeNIByCQ