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

（持续更新中。。。）

最近去面试，碰到一些经常被问到的题目，这里汇总一下，大部份问的是工作原理，对于我这些重度懒癌患者，经常回答的要么自己都一脸蒙逼要么就是吞吞吐吐，死记硬背来的总没有用自己的话描述出来的利索，于是写下来大家分享一下，面试前看一遍记一遍，能理解当然是最好，理解不了的能说出个大概来，面试过关应该不成问题。

一.HTTP与TCP/IP区别（TCP协议，其他网络协议）

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

二.浏览器的工作原理（http协议和https协议不一样）

或  从输入 URL 到页面加载完成的过程中都发生了什么事情？

或  从按下键盘到屏幕上出现字符，中间都发生了什么事情？

或  用户反应网站卡，请问都有哪些可能性，以及解决方法？

或  从输入 URL 到页面加载完成的过程中都发生了什么？

延伸问题：HTTPS用到的加密方式和算法？HTTP与TCP/IP区别？301/400/404/500代表的意义？

先了解重点：

• HTTP存在三大安全风险：被窃听，被篡改，被冒充。
• HTTPS涉及到SSL/TLS，数字证书、数字签名、加密、认证、公钥和私钥等知识。
• 非对称加密算法（RSA）是内容加密的一类算法，它有两个秘钥：公钥与私钥。公钥是公开的钥匙，所有人都可以知道，私钥是保密的，只有持有者知道。通过公钥加密的内容，只能通过私钥解开。非对称加密算法的安全性很高，但是因为计算量庞大，比较消耗性能。

HTTP工作流程：

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

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

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

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

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

5.服务器向发送响应数据后，将关闭TCP连接。

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

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

HTTPS工作流程：

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

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

3.客户端浏览器开始进入数字证书认证环节，这一部分是浏览器内置的TLS完成的。

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

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

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

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

7.客户端以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两个模块，后者负责握手过程中的身份认证，前者则保证数据传输过程中的完整性和私密性。

 

三.浏览器的渲染过程（参考：https://bbs.csdn.net/wap/topics/330028896）

延伸问题：知道工作原理后，前端怎么优化

1.从服务端成功接收到数据后，如果是浏览器第一次请求，服务器会返回给浏览器一些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请求。

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

2-2.首先浏览器会解析三个东西：解析HTML/SVG/XHTML，产生一个DOM Tree；解析CSS产生Rule Tree；使用JS操作DOM Tree和Rule Tree。

2-3.解析完成后，浏览器引擎通过DOM Tree和Rule Tree生成Rendering Tree(不包括Header或display:none等)，此时css的Rule Tree已经把规则附加在每个节点上，也就是DOM节点或Frame，然后计算每个节点的位置，定位坐标和大小，是否换行，各种position, overflow, z-index属性等等。这叫Layout或Reflow过程。

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

4. 浏览器开始载入html中＜head＞部分的代码，如head里有标签引用外部JS或CSS文件， 浏览器则会发出请求，并等待服务器返回JS或CSS文件； 
5.当JS或CSS文件拿到后，浏览器开始载入html中＜body＞部分的代码，开始绘制页面； 
6. 当渲染过程发现有＜img＞标签时，页面引用了图片，浏览器向服务器发出请求，此时浏览器不会等到图片下载完，而是继续渲染后面的代码； 
7. 当服务器返回图片文件，如果图片没有设置高宽，节点位置将会发生尺寸变动，从而触发reflow，重新渲染代码； 
8. 当渲染过程发现有＜script＞标签时，页面引用了JS，将会立即执行脚本；如果脚本命令操作了DOM节点，将会触发reflow，重新渲染代码； 
9. 最后渲染到＜/html＞，渲染结束。

 

四.https验证方式分为单向验证和双向验证

单向认证
　　1、客户端保存着服务端的证书并信任该证书即可(参照百度，咱们是没有证书的，百度的证书是由权威CA机构颁布的) 
　　2、https一般是单向认证，这样可以让绝大部分人都可以访问你的站点。(依旧参照百度，这里咱们只需要验证百度的服务器证书即可，这里是浏览器去验证的) 

双向认证
　　1、先决条件是有两个或两个以上的证书，一个是服务端证书，另一个或多个是客户端证书。 
　　2、服务端保存着客户端的证书并信任该证书，客户端保存着服务端的证书并信任该证书。这样，在证书验证成功的情况下即可完成请求响应。(只有服务器验证客户端证书并通过，客户端验证服务器证书并通过，才可以进行通信，否则不可以！) 
　　3、双向认证一般企业应用对接。(所以企业与企业间对接，大部分都是自签证书) 
总结：单向验证只需要客户端验证服务器证书即可，双向则需要双方都验证，才可以进行通信！ 

 

 

-------------------------------<本节完>------------------------------------------