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

版权声明:本文不管是不是原创,欢迎转载。 https://blog.csdn.net/alanfancy/article/details/88350324

(持续更新中。。。)

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

一.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>,渲染结束。

 

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

猜你喜欢

转载自blog.csdn.net/alanfancy/article/details/88350324