充电计划 -- 浏览器工作流程、渲染流程

参考博客：前端面试题必考（一）- 浏览器（HTTP与HTTPS）工作流程/渲染过程

前提

HTTP与TCP/IP区别

TPC/IP协议是传输层协议，主要解决数据如何在网络中传输。
HTTP是应用层协议，主要解决如何包装数据。

WEB使用HTTP协议作应用层协议，以封装HTTP 文本信息，然后使用TCP/IP做传输层协议将它发到网络上。IP协议的作用是把TCP分割好的各种数据包封装到IP包里面传送给接收方。

HTTP的三大风险

• 被窃听
• 被篡改
• 被冒充

浏览器工作原理

浏览器首先根据域名去查找对应的 IP 地址和端口，按顺序从浏览器缓存/系统缓存/路由器缓存/DNS服务器/根域名服务器去查找域名的IP。
拿到IP后向，分两种情况

ＨＴＴＰ工作原理

浏览器将自身的信息，封装成一个HTTP请求数据包，与服务器的80端口建立TCP连接，即TCP的三次握手：

• 客户端发送了一个带有SYN的Tcp报文到服务器，表示客户端想要和服务端建立连接。
• 服务端接收到客户端的请求，返回客户端报文，这个报文带有SYN和ACK标志，询问客户端是否准备好。
• 客户端再次响应服务端一个ACK，表示已经准备好。

建立连接后，客户机发送一个请求给服务器

服务器接到初次请求后，返回给浏览器一些Headers集合，例如set-cookie,Last-Mondified,Etag等等

服务器发送响应数据后，将关闭TCP连接。
注：如果浏览器或者服务器在其头信息有这行代码：Connection:keep-alive。TCP连接在发送后将仍然保持打开状态，浏览器可以继续通过相同的连接发送请求。节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

浏览器得到响应数据，开始进入渲染流程

HTTPS工作原理

与服务器的443端口连接，客户端将自身支持的加密算法列表（如SSL 的版本、加密算法和数据压缩方法/Hash 算法）以及生成客户端加密随机数(client_random)一起发送给服务端，开始 SSL 握手。

服务器端选出的一套加密算法、压缩算法和SSL 数字证书，并生成服务端随机数（server_random），一起返回给客户端。

客户端浏览器开始进入数字证书认证环节，这一部分是浏览器内置的TLS完成的。
注：首先浏览器会从内置的证书列表中索引，找到服务器下发证书对应的机构，如果没有找到，此时就会提示用户该证书是不是由权威机构颁发，是不可信任的。如果查到了对应的机构，则取出该机构颁发的公钥。用机构的证书公钥解密得到证书的内容和证书签名，内容包括网站的网址、网站的公钥、证书的有效期等。验证通过后，就可以安全使用证书中的网站公钥了。

浏览器将根据客户端随机数、服务端随机数及协议版本等信息，生成随机数 premaster_secret和主密钥 master_secret，并使用公钥 对premaster_secret加密得到R，然后发送给服务端。

服务端用私钥解密接收到的数据，得到R。

服务端以R为密钥使用对称加密算法加密网页内容并传输给浏览器。

客户端以R为密钥使用之前约定好的解密算法获取到网页内容，浏览器客户端开始进入渲染流程。

注：
1、前4步其实就是HTTPS的握手过程，这个过程主要是认证服务端证书（内置的公钥）的合法性。因为非对称加密计算量较大，整个通信过程只会用到一次非对称加密算法（主要是用来保护传输客户端生成的用于对称加密的随机数私钥）。后续内容的加解密都是通过一开始约定好的对称加密算法进行的。
2、SSL/TLS是HTTPS安全性的核心模块，TLS的前身是SSL，TLS1.0就是SSL3.1，TLS1.1是SSL3.2，TLS1.2则是SSL3.3。 SSL/TLS是建立在TCP协议之上，因而也是应用层级别的协议。其包括TLS Record Protocol和TLS Handshaking Protocols两个模块，后者负责握手过程中的身份认证，前者则保证数据传输过程中的完整性和私密性。

单向验证

1、客户端保存着服务端的证书并信任该证书即可
2、https一般是单向认证，这样可以让绝大部分人都可以访问站点。

双向认证

前提：

• 存在两个或两个以上的证书：一个是服务端证书，另一个或多个是客户端证书

1、服务端保存着客户端的证书并信任该证书，客户端保存着服务端的证书并信任该证书。这样，在证书验证成功的情况下即可完成请求响应。

• 注：只有服务器验证客户端证书并通过，客户端验证服务器证书并通过，才可以进行通信，否则不可以！)

2、双向认证一般用于企业应用对接。

浏览器的渲染过程

参考链接：参考博客

从服务端成功接收到数据后，如果是浏览器第一次请求，服务器会返回给浏览器一些Headers集合，例如set-cookie,Last-Mondified,Etag等等。
注：

• 使用set-cookie：浏览器未禁用cookie，且cookie过期时间大于当前时间，浏览器会将cookie保存在本地硬盘。当第二次请求时浏览器会向服务器传送header头， If-Modified-Since 与 If-None-Match 报头，询问服务器该资源在时间内有没有被修改过。如果该资源未被修改，则服务器会直接返回HTTP 304 （Not Changed.）状态码，内容为空,此时不会下载资源，浏览器则自动从缓存目录中读取资源。减少传输成本，但不会减少http请求
• 使用Last-Mondified/Etag：给文件加上过期时间(Expires)的header报文，减少传输成本，但不会减少http请求；浏览器会先检查缓存中的文件，如果没有过期，就直接使用缓存中的文件，从而不会发送http请求。

浏览器根据响应头里面指定的 encoding 去解析数据。

• 首先浏览器会解析三个东西：解析HTML/SVG/XHTML，产生一个DOM Tree；解析CSS产生Rule Tree；使用JS操作DOM Tree和Rule Tree。
• .解析完成后，浏览器引擎通过DOM Tree和Rule Tree生成Rendering Tree(不包括Header或display:none等)，此时css的Rule Tree已经把规则附加在每个节点上，也就是DOM节点或Frame，然后计算每个节点的位置，定位坐标和大小，是否换行，各种position, overflow, z-index属性等等。这叫Layout或Reflow过程。

浏览器调用操作系统的Native GUI的API准备绘制页面（准备渲染页面）

浏览器开始载入html中＜head＞部分的代码，如head里有标签引用外部JS或CSS文件， 浏览器则会发出请求，并等待服务器返回JS或CSS文件；

当JS或CSS文件拿到后，浏览器开始载入html中＜body＞部分的代码，开始绘制页面；

当渲染过程发现有＜img＞标签时，页面引用了图片，浏览器向服务器发出请求，此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

当服务器返回图片文件，如果图片没有设置高宽，节点位置将会发生尺寸变动，从而触发reflow，重新渲染代码；

当渲染过程发现有＜script＞标签时，页面引用了JS，将会立即执行脚本；如果脚本命令操作了DOM节点，将会触发reflow，重新渲染代码；

最后渲染到＜/html＞，渲染结束。