前端（五）浏览器（协议）篇

协议篇

1、从URL输入到页面展现到底发生什么&＃xff1f;

总体来说分为以下几个过程:

• &＃xff08;1&＃xff09;DNS服务器解析域名&＃xff0c;找到对应服务器的IP地址;

• &＃xff08;2&＃xff09;和服务器建立TCP三次握手连接&＃xff1b;

• &＃xff08;3&＃xff09;发送HTTP请求&＃xff0c;服务器会根据HTTP请求到数据服务器取出相应的资源&＃xff0c;并返回给浏览器&＃xff1b;

• &＃xff08;4&＃xff09;浏览器处理响应

  • 加载&＃xff1a;浏览器对一个html页面的加载顺序是从上而下的。
  • 当加载到外部css文件、图片等资源&＃xff0c;浏览器会再发起一次http请求&＃xff0c;来获取外部资源。
  • 当加载到js文件&＃xff0c;html文档会挂起渲染&＃xff08;加载解析渲染同步&＃xff09;的线程&＃xff0c;等待js文件加载、解析完毕才可以恢复html文档的渲染线程。
  • 解析&＃xff1a;解析DOM树和CSSDOM树。
  • 渲染&＃xff1a;构建渲染树&＃xff0c;将DOM树进行可视化表示&＃xff0c;将页面呈现给用户。

推荐 浪里行舟 文章 从URL输入到页面展现到底发生什么&＃xff1f;

2、浏览器如何解析渲染页面&＃xff1f;

浏览器解析渲染页面分为一下五个步骤&＃xff1a;

• 根据 HTML 解析出 DOM 树
• 根据CSS解析生成 CSS 规则树
• 结合 DOM 树和CSS 规则树&＃xff0c;生成渲染树
• 根据渲染树计算每一个节点的信息
• 根据计算好的信息绘制页面

3、缓存

3.1、DNS缓存

1&＃xff09;DNS查询过程如下:

• 首先搜索浏览器自身的DNS缓存,如果存在&＃xff0c;则域名解析到此完成。

• 如果浏览器自身的缓存里面没有找到对应的条目&＃xff0c;那么会尝试读取操作系统的hosts文件看是否存在对应的映射关系,如果存在&＃xff0c;则域名解析到此完成。

• 如果本地hosts文件不存在映射关系&＃xff0c;则查找本地DNS服务器(ISP服务器,或者自己手动设置的DNS服务器),如果存在,域名到此解析完成。

• 如果本地DNS服务器还没找到的话,它就会向根服务器发出请求,进行递归查询。

2&＃xff09;DNS 属于哪个层级?工作在哪个层级?

DNS属于应用层协议, 至于TCP/UDP哪一层上面跑,DNS 默认端口是53,走 UDP

DNS 的解析的几个记录类型需要了解:

• A: 域名直接到 IP
• CNAME: 可以多个域名映射到一个主机,类似在 Github Page就用 CNAME 指向 -MX: 邮件交换记录,用的不多,一般搭建邮件服务器才会用到
• NS: 解析服务记录,可以设置权重,指定谁解析
• TTL: 就是生存时间(也叫缓存时间),一般的域名解析商都有默认值,也可以人为设置
• TXT: 一般指某个主机名或域名的说明

3.2、CDN 缓存

什么是CDN

全称 Content Delivery Network,即内容分发网络。

摘录一个形象的比喻,来理解CDN是什么。

10年前&＃xff0c;还没有火车票代售点一说&＃xff0c;12306.cn更是无从说起。那时候火车票还只能在火车站的售票大厅购买&＃xff0c;而我所在的小县城并不通火车&＃xff0c;火车票都要去市里的火车站购买&＃xff0c;而从我家到县城再到市里&＃xff0c;来回就是4个小时车程&＃xff0c;简直就是浪费生命。后来就好了&＃xff0c;小县城里出现了火车票代售点&＃xff0c;甚至乡镇上也有了代售点&＃xff0c;可以直接在代售点购买火车票&＃xff0c;方便了不少&＃xff0c;全市人民再也不用在一个点苦逼的排队买票了。

简单的理解CDN就是这些代售点(缓存服务器)的承包商,他为买票者提供了便利,帮助他们在最近的地方(最近的CDN节点)用最短的时间(最短的请求时间)买到票(拿到资源),这样去火车站售票大厅排队的人也就少了。也就减轻了售票大厅的压力(起到分流作用,减轻服务器负载压力)。

用户在浏览网站的时候&＃xff0c;CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求&＃xff0c;这样海南移动用户的请求就不会千里迢迢跑到北京电信机房的服务器&＃xff08;假设源站部署在北京电信机房&＃xff09;上了。

CDN缓存

关于CDN缓存,在浏览器本地缓存失效后,浏览器会向CDN边缘节点发起请求。类似浏览器缓存,CDN边缘节点也存在着一套缓存机制。CDN边缘节点缓存策略因服务商不同而不同&＃xff0c;但一般都会遵循http标准协议&＃xff0c;通过http响应头中的

Cache-control: max-age //后面会提到


的字段来设置CDN边缘节点数据缓存时间。

当浏览器向CDN节点请求数据时&＃xff0c;CDN节点会判断缓存数据是否过期&＃xff0c;若缓存数据并没有过期&＃xff0c;则直接将缓存数据返回给客户端&＃xff1b;否则&＃xff0c;CDN节点就会向服务器发出回源请求&＃xff0c;从服务器拉取最新数据&＃xff0c;更新本地缓存&＃xff0c;并将最新数据返回给客户端。

CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间&＃xff0c;为用户提供更精细化的缓存管理。

CDN 优势

• CDN节点解决了跨运营商和跨地域访问的问题&＃xff0c;访问延时大大降低。
• 大部分请求在CDN边缘节点完成&＃xff0c;CDN起到了分流作用&＃xff0c;减轻了源服务器的负载。

3.3、浏览器缓存(http缓存)

请看webfansplz 的文章 实践这一次,彻底搞懂浏览器缓存机制

三级缓存原理 (访问缓存优先级)

• 先在内存中查找,如果有,直接加载。
• 如果内存中不存在,则在硬盘中查找,如果有直接加载。
• 如果硬盘中也没有,那么就进行网络请求。
• 请求获取的资源缓存到硬盘和内存。

浏览器缓存的分类

• 强缓存

• 协商缓存

浏览器再向服务器请求资源时,首先判断是否命中强缓存,再判断是否命中协商缓存!

浏览器缓存的优点

1.减少了冗余的数据传输

2.减少了服务器的负担&＃xff0c;大大提升了网站的性能

3.加快了客户端加载网页的速度

强缓存

浏览器在加载资源时&＃xff0c;会先根据本地缓存资源的 header 中的信息判断是否命中强缓存&＃xff0c;如果命中则直接使用缓存中的资源不会再向服务器发送请求。


这里的 header中的信息指的是expires 和 cahe-control

协商缓存

当强缓存没有命中的时候&＃xff0c;浏览器会发送一个请求到服务器&＃xff0c;服务器根据 header 中的部分信息来判断是否命中缓存。如果命中&＃xff0c;则返回 304 &＃xff0c;告诉浏览器资源未更新&＃xff0c;可使用本地的缓存。


这里的 header 中的信息指的是Last-Modify/If-Modify-Since和 ETag/If-None-Match.

Last-Modified 与 ETag是可以一起使用的&＃xff0c;服务器会优先验证 ETag&＃xff0c;一致的情况下&＃xff0c;才会继续比对 Last-Modified&＃xff0c;最后才决定是否返回304。

总结

当浏览器再次访问一个已经访问过的资源时&＃xff0c;它会这样做&＃xff1a;


• 1.看看是否命中强缓存&＃xff0c;如果命中&＃xff0c;就直接使用缓存了。
• 2.如果没有命中强缓存&＃xff0c;就发请求到服务器检查是否命中协商缓存。
• 3.如果命中协商缓存&＃xff0c;服务器会返回 304 告诉浏览器使用本地缓存。
• 4.否则&＃xff0c;返回最新的资源。

参考文献&＃xff1a;

前端性能优化之缓存利用

4、浏览器内核有哪些&＃xff0c;移动端用的是哪个

• Trident内核&＃xff1a;IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]
• Gecko内核&＃xff1a;Netscape6及以上版本&＃xff0c;FF,MozillaSuite/SeaMonkey等&＃xff1b;
• Presto内核&＃xff1a;Opera7及以上。[Opera内核原为&＃xff1a;Presto&＃xff0c;现为&＃xff1a;Blink]
• Webkit内核&＃xff1a;Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

对于Android手机而言&＃xff0c;使用率最高的就是Webkit内核。

协议篇

1、OSI七层网络模型

2、介绍下HTTP报文的组成部分&＃xff1f;

• 请求报文&＃xff1a;请求行、请求头、空行、请求体

• 响应报文&＃xff1a;状态行、响应头、空行、响应体

以请求报文为例&＃xff1a;

• 请求行: 这个好理解就是访问的方法&＃43; 协议&＃43; 访问的 URL 构成
• 请求头: key-value值&＃xff0c;告诉服务端需要的内容
• 空行&＃xff1a;告知服务端以下内容为请求体
• 请求体: 数据部分

请求报文知道,那你说说COOKIE是如何跟随请求的?

COOKIE就是保存在 HTTP 协议的请求或者应答头部(COOKIE 是由服务端生成),这样一路漂泊...

COOKIE 隔离是什么,如何做;

COOKIE 隔离就是降低 header 的数据包含,以达到加快访问速度的目的

方案: 静态资源丢 CDN或者非主域来加载

3、常见的HTTP方法有哪些&＃xff1f;

-GET&＃xff1a;获取资源

• POST&＃xff1a;传输资源
• PUT&＃xff1a;更新资源
• DELETE&＃xff1a;删除资源
• HEAD&＃xff1a;获得报文首部

4、POST和GET的区别是什么&＃xff1f;

1&＃xff09;GET在浏览器回退时是无害的&＃xff0c;而POST会再次提交请求

2&＃xff09;GET请求会被浏览器主动缓存&＃xff0c;而POST不会&＃xff0c;除非手动设置

3&＃xff09;GET请求参数会被完整保留在浏览器的历史记录里&＃xff0c;而POST中的参数不会被保留

4&＃xff09;POST比GET安全&＃xff0c;因参数暴露在URL上

5&＃xff09;GET参数通过URL传递&＃xff0c;POST放在Request body中

高级区别&＃xff1a;

• GET 的本质是「得」&＃xff0c;而 POST的本质是「给」。GET 的内容可以被浏览器缓存&＃xff0c;而POST的数据不可以。

• get产生一个TCP数据包&＃xff0c;一个是请求头&＃xff0c;一个请求体的&＃xff1b;post产生两个TCP数据包&＃xff1b;

• 在一次请求中&＃xff0c;get一次性完成&＃xff0c;post在部分浏览器&＃xff08;除了火狐&＃xff09;需要发送两次信息&＃xff0c;所以get比post更快&＃xff0c;更有效率。

• 6) 补充补充一个get和post在缓存方面的区别&＃xff1a;

  • get请求类似于查找的过程&＃xff0c;用户获取数据&＃xff0c;可以不用每次都与数据库连接&＃xff0c;所以可以使用缓存。
  • post不同&＃xff0c;post做的一般是修改和删除的工作&＃xff0c;所以必须与数据库交互&＃xff0c;所以不能使用缓存。因此get请求适合于请求缓存。

推荐文章 WebTechGarden 微信公众号的文章 99%的人都理解错了HTTP中GET与POST的区别

4.1、get和post分别进行几次数据交互

• get请求过程&＃xff1a;&＃xff08;2次交互&＃xff09;

  • 浏览器请求tcp连接&＃xff08;第一次握手&＃xff09;
  • 服务器答应进行tcp连接&＃xff08;第二次握手&＃xff09;
  • 浏览器确认&＃xff0c;并发送get请求头和数据&＃xff08;第三次握手&＃xff0c;这个报文比较小&＃xff0c;所以http会在此时进行第一次数据发送&＃xff09;
  • 服务器返回200 ok响应。

• post请求过程&＃xff1a;&＃xff08;3次交互&＃xff09;

  • 浏览器请求tcp连接&＃xff08;第一次握手&＃xff09;
  • 服务器答应进行tcp连接&＃xff08;第二次握手&＃xff09;
  • 浏览器确认&＃xff0c;并发送post请求头&＃xff08;第三次握手&＃xff0c;这个报文比较小&＃xff0c;所以http会在此时进行第一次数据发送&＃xff09;

• 服务器返回100 continue响应

• 浏览器开始发送数据

• 服务器返回200 ok响应

5、HTTP1.1的持久链接&＃xff1f;

• HTTP协议采用“请求-应答”模式&＃xff0c;当使用普通模式&＃xff0c;即非keep-Alive模式时&＃xff0c;每个请求/应答客户和服务器都要新一个连接&＃xff0c;完成之后立即断开连接。
• 当使用keep-Alive模式&＃xff08;持久链接&＃xff09;时&＃xff0c;keep-Alive功能使客户端到服务器端的连接持久有效&＃xff0c;当出现服务器的后继请求时&＃xff0c;keep-Alive避免重新建立连接

6、http和https的基本概念?

http: 超文本传输协议&＃xff0c;是互联网上应用最为广泛的一种网络协议&＃xff0c;是一个客户端和服务器端请求和应答的标准&＃xff08;TCP&＃xff09;&＃xff0c;用于从WWW服务器传输超文本到本地浏览器的传输协议&＃xff0c;它可以使浏览器更加高效&＃xff0c;使网络传输减少。

https: 是以安全为目标的HTTP通道&＃xff0c;简单讲是HTTP的安全版&＃xff0c;即HTTP下加入SSL层&＃xff0c;HTTPS的安全基础是SSL&＃xff0c;因此加密的详细内容就需要SSL。

https协议的主要作用是&＃xff1a;建立一个信息安全通道&＃xff0c;来确保数组的传输&＃xff0c;确保网站的真实性。

7、HTTP 和 HTTPS 有何差异?

http传输的数据都是未加密的&＃xff0c;也就是明文的&＃xff0c;网景公司设置了SSL协议来对http协议传输的数据进行加密处理&＃xff0c;简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议&＃xff0c;比http协议的安全性更高。


主要的区别如下&＃xff1a;

• Https协议需要ca证书&＃xff0c;费用较高。
• http是超文本传输协议&＃xff0c;信息是明文传输&＃xff0c;https则是具有安全性的ssl加密传输协议。
• 使用不同的链接方式&＃xff0c;端口也不同&＃xff0c;一般而言&＃xff0c;http协议的端口为80&＃xff0c;https的端口为443
• http的连接很简单&＃xff0c;是无状态的&＃xff1b;HTTPS协议是由SSL&＃43;HTTP协议构建的可进行加密传输、身份认证的网络协议&＃xff0c;比http协议安全。

8、Https协议的工作原理

1&＃xff09;客户使用https url访问服务器&＃xff0c;则要求web 服务器建立ssl链接。2&＃xff09;web服务器接收到客户端的请求之后&＃xff0c;会将网站的证书&＃xff08;证书中包含了公钥&＃xff09;&＃xff0c;返回或者说传输给客户端。3&＃xff09;客户端和web服务器端开始协商SSL链接的安全等级&＃xff0c;也就是加密等级。4&＃xff09;客户端浏览器通过双方协商一致的安全等级&＃xff0c;建立会话密钥&＃xff0c;然后通过网站的公钥来加密会话密钥&＃xff0c;并传送给网站。5&＃xff09;web服务器通过自己的私钥解密出会话密钥。6&＃xff09;web服务器通过会话密钥加密与客户端之间的通信。


9、https协议的优点

• 使用HTTPS协议可认证用户和服务器&＃xff0c;确保数据发送到正确的客户机和服务器&＃xff1b;
• HTTPS协议是由SSL&＃43;HTTP协议构建的可进行加密传输、身份认证的网络协议&＃xff0c;要比http协议安全&＃xff0c;可防止数据在传输过程中不被窃取、改变&＃xff0c;确保数据的完整性。
• HTTPS是现行架构下最安全的解决方案&＃xff0c;虽然不是绝对安全&＃xff0c;但它大幅增加了中间人攻击的成本。

10、https协议的缺点

• https握手阶段比较费时&＃xff0c;会使页面加载时间延长50%&＃xff0c;增加10%~20%的耗电。
• https缓存不如http高效&＃xff0c;会增加数据开销。
• SSL证书也需要钱&＃xff0c;功能越强大的证书费用越高。
• SSL证书需要绑定IP&＃xff0c;不能再同一个ip上绑定多个域名&＃xff0c;ipv4资源支持不了这种消耗。

11、HTTPS中的TLS/SSL是如何保护数据&＃xff1f;

• 一般有两种形式,非对称加密,生成公钥和私钥,私钥丢服务器,公钥每次请求去比对验证;

• 更严谨的采用 CA(Certificate Authority),给密钥签名....

12、对称加密和非对称加密,能说说整个流程如何运转的么(HTTPS)

对称加密:

• 双方都有同样的密钥,每次通讯都要生成一个唯一密钥,速度很快
• 安全性较低且密钥增长的数量极快

非对称加密(一般用 RSA)

• 安全性很高,对资源消耗很大(CPU),目前主流的加密算法(基本用于交换密钥或签名,而非所有通讯内容)

CA(数字签名):

• 这个是为了防止中间人给偷换了造成数据被窃取而诞生的 用一些权威机构颁布的算法来签名,权威机构做中间人,通讯过程都会跟机构核对一遍

13、http2.0

• 提升访问速度&＃xff08;可以对于&＃xff0c;请求资源所需时间更少&＃xff0c;访问速度更快&＃xff0c;相比http1.0&＃xff09;
• 允许多路复用&＃xff1a;多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了&＃xff1a;在http1.1中&＃xff0c;浏览器客户端在同一时间&＃xff0c;针对同一域名下的请求有一定数量限制&＃xff08;连接数量&＃xff09;&＃xff0c;超过限制会被阻塞。
• 二进制分帧&＃xff1a;HTTP2.0会将所有的传输信息分割为更小的信息或者帧&＃xff0c;并对他们进行二进制编码
• 首部压缩
• 服务器端推送

14、TCP和UDP的区别

&＃xff08;1&＃xff09;TCP是面向连接的&＃xff0c;udp是无连接的即发送数据前不需要先建立链接。&＃xff08;2&＃xff09;TCP提供可靠的服务,UDP不可靠交付。并且因为tcp可靠&＃xff0c;面向连接&＃xff0c;不会丢失数据因此适合大数据量的交换。&＃xff08;3&＃xff09;TCP是面向字节流&＃xff0c;UDP面向报文&＃xff0c;并且网络出现拥塞不会使得发送速率降低。&＃xff08;4&＃xff09;TCP只能是1对1的&＃xff0c;UDP支持1对1,1对多。&＃xff08;5&＃xff09;TCP的首部较大为20字节&＃xff0c;而UDP只有8字节。&＃xff08;6&＃xff09;TCP是面向连接的可靠性传输&＃xff0c;而UDP是不可靠的。


15、状态码

1XX: 一般用来判断协议更换或者确认服务端收到请求这些

100: 服务端收到部分请求,若是没有拒绝的情况下可以继续传递后续内容101: 客户端请求变换协议,服务端收到确认


2xx: 请求成功,是否创建链接,请求是否接受,是否有内容这些

200: (成功)服务器已成功处理了请求。201: (已创建)请求成功并且服务器创建了新的资源。202: (已接受)服务器已接受请求&＃xff0c;但尚未处理。204: (无内容)服务器成功处理了请求&＃xff0c;但没有返回任何内容。


3XX: 一般用来判断重定向和缓存

301: 所有请求已经转移到新的 url(永久重定向),会被缓存302: 临时重定向,不会被缓存304: 本地资源暂未改动,优先使用本地的(根据If-Modified-Since or If-Match去比对服务器的资源,缓存)


4XX: 一般用来确认授权信息,请求是否出错,页面是否丢失

400: 请求出错401: 未授权,不能读取某些资源403: 阻止访问,一般也是权限问题404: 页面丢失,资源没找到408: 请求超时415: 媒介类型不被支持&＃xff0c;服务器不会接受请求。


5XX: 基本都是服务端的错误

500: 服务端错误502: 网关错误504: 网关超时


16、补充400和401、403状态码

(1)400状态码&＃xff1a;请求无效

产生原因&＃xff1a;

前端提交数据的字段名称和字段类型与后台的实体没有保持一致前端提交到后台的数据应该是json字符串类型&＃xff0c;但是前端没有将对象JSON.stringify转化成字符串。


解决方法&＃xff1a;

对照字段的名称&＃xff0c;保持一致性将obj对象通过JSON.stringify实现序列化


(2)401状态码&＃xff1a;当前请求需要用户验证

(3)403状态码&＃xff1a;服务器已经得到请求&＃xff0c;但是拒绝执行

17、三次握手、四次挥手&＃xff1f;

推荐文章 老錢的 跟着动画来学习TCP三次握手和四次挥手

18、WebSocket的实现和应用

WebSocket是HTML5中的协议&＃xff0c;支持持久连续&＃xff0c;http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接&＃xff0c;HTTP1.1中的keep-alive&＃xff0c;将多个http请求合并为1个

19、COOKIE、sessionStorage、localStorage的区别

共同点&＃xff1a;都是保存在浏览器端&＃xff0c;并且是同源的

COOKIE&＃xff1a;可以在浏览器和服务器端来回传递&＃xff0c;存储容量小&＃xff0c;只有大约4K左右

sessionStorage&＃xff1a;仅在当前浏览器窗口关闭前有效&＃xff0c;自然也就不可能持久保持&＃xff0c;localStorage&＃xff1a;始终有效&＃xff0c;窗口或浏览器关闭也一直保存&＃xff0c;因此用作持久数据&＃xff1b;COOKIE只在设置的COOKIE过期时间之前一直有效&＃xff0c;即使窗口或浏览器关闭。

localStorage&＃xff1a;localStorage在所有同源窗口中都是共享的&＃xff1b;COOKIE也是在所有同源窗口中都是共享的&＃xff0c;不管窗口或者浏览器关闭与否都会始终生效

补充说明一下COOKIE的作用&＃xff1a;

• 保存用户登录状态。例如将用户id存储于一个COOKIE内&＃xff0c;这样当用户下次访问该页面时就不需要重新登录了&＃xff0c;现在很多论坛和社区都提供这样的功能。

• COOKIE还可以设置过期时间&＃xff0c;当超过时间期限后&＃xff0c;COOKIE就会自动消失。因此&＃xff0c;系统往往可以提示用户保持登录状态的时间&＃xff1a;常见选项有一个月、三个 月、一年等。

• 跟踪用户行为。例如一个天气预报网站&＃xff0c;能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的&＃xff0c;当利用了COOKIE后就会显得很人性化了&＃xff0c;系统能够记住上一次访问的地区&＃xff0c;当下次再打开该页面时&＃xff0c;它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成&＃xff0c;所以这样的页面就像为某个用户所定制的一样&＃xff0c;使用起来非常方便

• 定制页面。如果网站提供了换肤或更换布局的功能&＃xff0c;那么可以使用COOKIE来记录用户的选项&＃xff0c;例如&＃xff1a;背景色、分辨率等。当用户下次访问时&＃xff0c;仍然可以保存上一次访问的界面风格。

20、路由实现的原理

两种模式 hash 和 history。

推荐寻找海蓝96的文章 面试官: 你了解前端路由吗?

21、负载均衡

多台服务器共同协作&＃xff0c;不让其中某一台或几台超额工作&＃xff0c;发挥服务器的最大作用

• http重定向负载均衡&＃xff1a;调度者根据策略选择服务器以302响应请求&＃xff0c;缺点只有第一次有效果&＃xff0c;后续操作维持在该服务器
• dns负载均衡&＃xff1a;解析域名时&＃xff0c;访问多个ip服务器中的一个&＃xff08;可监控性较弱&＃xff09;
• 反向代理负载均衡&＃xff1a;访问统一的服务器&＃xff0c;由服务器进行调度访问实际的某个服务器&＃xff0c;对统一的服务器要求大&＃xff0c;性能受到 服务器群的数量