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

协议篇

一、从URL输入到页面展示到底发生什么？

整体来讲分为如下几个过程:

• （1）DNS服务器解析域名，找到对应服务器的IP地址;

• （2）和服务器创建TCP三次握手链接；

• （3）发送HTTP请求，服务器会根据HTTP请求到数据服务器取出相应的资源，并返回给浏览器；

• （4）浏览器处理响应

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

推荐 浪里行舟 文章 从URL输入到页面展示到底发生什么？

二、浏览器如何解析渲染页面？

浏览器解析渲染页面分为一下五个步骤：

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

三、缓存

3.一、DNS缓存

1）DNS查询过程以下:

• 首先搜索浏览器自身的DNS缓存,若是存在，则域名解析到此完成。

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

• 若是本地hosts文件不存在映射关系，则查找本地DNS服务器(ISP服务器,或者本身手动设置的DNS服务器),若是存在,域名到此解析完成。

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

2）DNS 属于哪一个层级?工做在哪一个层级?

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

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

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

3.二、CDN 缓存

什么是CDN

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

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

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

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

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

CDN缓存

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

Cache-control: max-age   //后面会提到
复制代码

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

当浏览器向CDN节点请求数据时，CDN节点会判断缓存数据是否过时，若缓存数据并无过时，则直接将缓存数据返回给客户端；不然，CDN节点就会向服务器发出回源请求，从服务器拉取最新数据，更新本地缓存，并将最新数据返回给客户端。

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

CDN 优点

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

3.三、浏览器缓存(http缓存)

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

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

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

浏览器缓存的分类

• 强缓存

• 协商缓存

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

浏览器缓存的优势

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

2.减小了服务器的负担，大大提高了网站的性能

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

强缓存

浏览器在加载资源时，会先根据本地缓存资源的 header 中的信息判断是否命中强缓存，若是命中则直接使用缓存中的资源不会再向服务器发送请求。
复制代码

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

协商缓存

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

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

Last-Modified 与 ETag是能够一块儿使用的，服务器会优先验证 ETag，一致的状况下，才会继续比对 Last-Modified，最后才决定是否返回304。

总结

当浏览器再次访问一个已经访问过的资源时，它会这样作：
复制代码

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

参考文献：

前端性能优化之缓存利用

四、浏览器内核有哪些，移动端用的是哪一个

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

对于Android手机而言，使用率最高的就是Webkit内核。

协议篇

---

一、OSI七层网络模型

OSI七层模型	做用	对应协议	对应设备
应用层	它是计算机用户，以及各类应用程序和网络之间的接口	HTTP, FTP, SMTP, POP3	计算机设备
表示层	信息的语法语义以及它们的关系，如加密解密、转换翻译、压缩解压缩	IPX, LPP, XDP
会话层	创建、维护、管理应用程序之间的会话	SSL,TLS, DAP, LDAP
传输层	服务点编址，分段与重组、链接控制、流量控制、差错控制	TCP, UDP	防火墙
网络层	为网络设备提供逻辑地址，进行路由选择、分组转发	IP ，ARP ，RARP ，ICMP ，IGMP	路由器
数据链路层	物理寻址，同时将原始比特流转变为逻辑传输路线	PPTP, ARP, RARP	交换机
物理层	机械、电子、定时接口通道信道上的原始比特流传输	IEEE 802.2, Ethernet v.2, Internetwork	网卡

二、介绍下HTTP报文的组成部分？

• 请求报文：请求行、请求头、空行、请求体

• 响应报文：状态行、响应头、空行、响应体

以请求报文为例：

• 请求行: 这个好理解就是访问的方法+ 协议+ 访问的 URL 构成
• 请求头: key-value值，告诉服务端须要的内容
• 空行：告知服务端如下内容为请求体
• 请求体: 数据部分

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

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

Cookie 隔离是什么,如何作;

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

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

三、常见的HTTP方法有哪些？

-GET：获取资源

• POST：传输资源
• PUT：更新资源
• DELETE：删除资源
• HEAD：得到报文首部

四、POST和GET的区别是什么？

1）GET在浏览器回退时是无害的，而POST会再次提交请求

2）GET请求会被浏览器主动缓存，而POST不会，除非手动设置

3）GET请求参数会被完整保留在浏览器的历史记录里，而POST中的参数不会被保留

4）POST比GET安全，因参数暴露在URL上

5）GET参数经过URL传递，POST放在Request body中

高级区别：

• GET 的本质是「得」，而 POST的本质是「给」。GET 的内容能够被浏览器缓存，而POST的数据不能够。

• get产生一个TCP数据包，一个是请求头，一个请求体的；post产生两个TCP数据包；

• 在一次请求中，get一次性完成，post在部分浏览器（除了火狐）须要发送两次信息，因此get比post更快，更有效率。

• 6) 补充补充一个get和post在缓存方面的区别：

  • get请求相似于查找的过程，用户获取数据，能够不用每次都与数据库链接，因此可使用缓存。
  • post不一样，post作的通常是修改和删除的工做，因此必须与数据库交互，因此不能使用缓存。所以get请求适合于请求缓存。

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

4.一、get和post分别进行几回数据交互

• get请求过程：（2次交互）

  • 浏览器请求tcp链接（第一次握手）
  • 服务器答应进行tcp链接（第二次握手）
  • 浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，因此http会在此时进行第一次数据发送）
  • 服务器返回200 ok响应。

• post请求过程：（3次交互）

  • 浏览器请求tcp链接（第一次握手）
  • 服务器答应进行tcp链接（第二次握手）
  • 浏览器确认，并发送post请求头（第三次握手，这个报文比较小，因此http会在此时进行第一次数据发送）

• 服务器返回100 continue响应

• 浏览器开始发送数据

• 服务器返回200 ok响应

五、HTTP1.1的持久连接？

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

六、http和https的基本概念?

http: 超文本传输协议，是互联网上应用最为普遍的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可使浏览器更加高效，使网络传输减小。

https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，所以加密的详细内容就须要SSL。

https协议的主要做用是：创建一个信息安全通道，来确保数组的传输，确保网站的真实性。

七、HTTP 和 HTTPS 有何差别?

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

主要的区别以下：

• Https协议须要ca证书，费用较高。
• http是超文本传输协议，信息是明文传输，https则是具备安全性的ssl加密传输协议。
• 使用不一样的连接方式，端口也不一样，通常而言，http协议的端口为80，https的端口为443
• http的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

八、Https协议的工做原理

1）客户使用https url访问服务器，则要求web 服务器创建ssl连接。

2）web服务器接收到客户端的请求以后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。

3）客户端和web服务器端开始协商SSL连接的安全等级，也就是加密等级。

4）客户端浏览器经过双方协商一致的安全等级，创建会话密钥，而后经过网站的公钥来加密会话密钥，并传送给网站。

5）web服务器经过本身的私钥解密出会话密钥。

6）web服务器经过会话密钥加密与客户端之间的通讯。
复制代码

九、https协议的优势

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

十、https协议的缺点

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

十一、HTTPS中的TLS/SSL是如何保护数据？

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

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

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

对称加密:

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

非对称加密(通常用 RSA)

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

CA(数字签名):

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

1三、http2.0

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

1四、TCP和UDP的区别

（1）TCP是面向链接的，udp是无链接的即发送数据前不须要先创建连接。

（2）TCP提供可靠的服务,UDP不可靠交付。而且由于tcp可靠，面向链接，不会丢失数据所以适合大数据量的交换。

（3）TCP是面向字节流，UDP面向报文，而且网络出现拥塞不会使得发送速率下降。

（4）TCP只能是1对1的，UDP支持1对1,1对多。

（5）TCP的首部较大为20字节，而UDP只有8字节。

（6）TCP是面向链接的可靠性传输，而UDP是不可靠的。
复制代码

1五、状态码

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

100: 服务端收到部分请求,如果没有拒绝的状况下能够继续传递后续内容

101: 客户端请求变换协议,服务端收到确认
复制代码

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

200: (成功)服务器已成功处理了请求。

201: (已建立)请求成功而且服务器建立了新的资源。

202: (已接受)服务器已接受请求，但还没有处理。

204: (无内容)服务器成功处理了请求，但没有返回任何内容。
复制代码

3XX: 通常用来判断重定向和缓存

301: 全部请求已经转移到新的 url(永久重定向),会被缓存

302: 临时重定向,不会被缓存

304: 本地资源暂未改动,优先使用本地的(根据If-Modified-Since or If-Match去比对服务器的资源,缓存)
复制代码

4XX: 通常用来确认受权信息,请求是否出错,页面是否丢失

400: 请求出错

401: 未受权,不能读取某些资源

403: 阻止访问,通常也是权限问题

404: 页面丢失,资源没找到

408: 请求超时

415: 媒介类型不被支持，服务器不会接受请求。
复制代码

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

500: 服务端错误

502: 网关错误

504: 网关超时
复制代码

1六、补充400和40一、403状态码

(1)400状态码：请求无效

产生缘由：

前端提交数据的字段名称和字段类型与后台的实体没有保持一致

前端提交到后台的数据应该是json字符串类型，可是前端没有将对象JSON.stringify转化成字符串。
复制代码

解决方法：

对照字段的名称，保持一致性

将obj对象经过JSON.stringify实现序列化
复制代码

(2)401状态码：当前请求须要用户验证

(3)403状态码：服务器已经获得请求，可是拒绝执行

1七、三次握手、四次挥手？

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

1八、WebSocket的实现和应用

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

1九、Cookie、sessionStorage、localStorage的区别

共同点：都是保存在浏览器端，而且是同源的

Cookie：能够在浏览器和服务器端来回传递，存储容量小，只有大约4K左右

sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。

localStorage：localStorage在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的，无论窗口或者浏览器关闭与否都会始终生效

补充说明一下cookie的做用：

• 保存用户登陆状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不须要从新登陆了，如今不少论坛和社区都提供这样的功能。

• cookie还能够设置过时时间，当超过期间期限后，cookie就会自动消失。所以，系统每每能够提示用户保持登陆状态的时间：常见选项有一个月、三个 月、一年等。

• 跟踪用户行为。例如一个天气预报网站，可以根据用户选择的地区显示当地的天气状况。若是每次都须要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统可以记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气状况。由于一切都是在后 台完成，因此这样的页面就像为某个用户所定制的同样，使用起来很是方便

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

20、路由实现的原理

两种模式 hash 和 history。

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

2一、负载均衡

多台服务器共同协做，不让其中某一台或几台超额工做，发挥服务器的最大做用

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