全文主要参考如下gituhub项目，在此基础上补充了一些自己的东西：

https://github.com/febobo/web-interview

项目网站：web前端面试 - 面试官系列

一个非常全面，细致的前端面试题库,十分的推荐，深刻体会到github的强大之处了。

http是什么与https有什么区别

http

定义

http，即超文本传输协议，常被用于在浏览器和网站服务器之间的通信，以明文方式发送内容，不提供任何方式的数据加密。

特点

  • 无状态

    HTTP协议无法根据之前的状态来处理本次请求。

  • 灵活

    HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。

状态码

  • 4xx（客户端错误）

    • 404：服务器中不存在请求的资源。
    • 403：请求的权限不足。
    • 401：身份认证失败，该用户不存在。
    • 400（bad request）：请求存在语法错误，通常是因为请求的方式不符合接口文档规范。

  • 5xx（服务端错误）

    • 500：服务器错误，但是未给出具体原因
    • 502：上游服务器返回了错误的响应
    • 504：上游服务器响应超时。

  • 3xx（重定向）

    • 304：服务器提示浏览器读取缓存（重定向到缓存）
    • 302：临时重定向，第一次请求返回一个临时请求url，第二次请求访问这个临时url，产生两次请求
    • 301：永久重定向，第一次请求返回一个永久请求url

  • 2xx（请求成功）

    • 200（成功）：请求已成功，并返回响应头或响应体

    • 201：创建用户成功（由0到1的过程）

    • 204：服务器成功处理了请求，但是没有返回任何内容；通常用于响应DELETE请求，表示资源已被成功删除，但没有返回具体内容。

版本区别

  • HTTP1.0

    默认使用短连接，每次请求都需要与服务器建立一个TCP连接，服务器完成请求处理后立即断开TCP连接。

    比如，解析html文件，当发现文件中存在资源文件的时候，这时候又创建单独的链接

    最终导致，一个html文件的访问，包含了多次的请求和响应，每次请求都需要创建连接、关系连接

    频繁的建立，断开连接，明显造成了性能上的缺陷，如果需要建立长连接，需要设置一个非标准的Connection字段

    1
    Connection: keep-alive

  • HTTP1.1

    与HTTP1.0的区别在于：

    • 默认支持长连接

      即在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟。这样，在加载html文件的时候，文件中多个请求和响应就可以在一个连接中传输，减少了加载时间。

    • 下次请求不需要等待上次请求响应

      但是服务器端必须按照接收到客户端请求的先后顺序依次回送响应结果，以保证客户端能够区分出每次请求的响应内容，这样也显著地减少了整个下载过程所需要的时间。

    • 添加新的请求方法比如put、delete、options（预检请求），添加了新的请求头比如If-None-Match,If-Modified-Since

https

https是基于http的,在http的基础上使用了TLS/SSL加密,详见文章hexo博客搭建的一些思考 | 三葉的博客

GET请求和POST请求的区别

  • 用途不同

    get请求被用来获取数据，post请求被用来提交数据。

  • 编码方式

    GET请求只能进行url编码，而POST支持多种编码方式。

  • 携带信息

    GET请求一般把携带的参数放在URL上，不安全，而且url上携带的参数有长度限制，而POST请求一般把携带的参数放在请求体上，没有长度限制，也相对更为安全。

    然而，从传输的角度来说，他们都是不安全的，因为HTTP 在网络上是明文传输的，只要在网络节点上捉包，就能完整地获取数据报文。只有使用HTTPS才能加密安全。

http常用请求头

  • Accept：客户端能够接受的响应数据类型

    1
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

  • Authorization：用于超文本传输协议的认证的认证信息

    1
    Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==

  • Cache-Control： 用来指定在这次的请求/响应链中的所有缓存机制 都必须 遵守的指令

    1
    Cache-Control: no-cache //无论浏览器中的缓存是否过期，都询问是否应该使用缓存

  • Content-Length：表示请求体的长度

  • Content-Type：请求体的数据类型

  • If-Modified-Since：在协商缓存中被用来询问服务器是否应该使用缓存。

    1
    If-Modified-Since: Sat, 29 Oct 1994 19:43:31 GMT //值为上次返回的Last-Modified,询问自该时间点后资源是否发生改变

  • If-None-Match：在协商缓存中被用来询问服务器是否应该使用缓存。

    1
    2
    If-None-Match: "737060cd8c284d8af7ad3082f209582d"
    //值为上次返回的Etag，就是文件内容的哈希值，文件内容改变，这个值就会改变。

  • Cookie：携带cookie，cookie具体的介绍前往js面试一文中。

    1
    2
    3
    buvid3=57161BE6-C8C6-DA39-581F-E6FCB97E737107226infoc;
    b_nut=1708906907; 
    i-wanna-go-back=-1;//就是这样的键值对格式，一个键值对就是一个cookie，其实每个cookie包含的信息远不止如此

浏览器的缓存策略

浏览器的缓存方式主要分为两大类，强缓存和协商缓存：

  • 强缓存

    当浏览器请求某个资源的时候，如果浏览器缓存中存在该资源，且没有过期，那么将直接使用缓存，而不会发送请求（缓存是否过期是根据缓存的Expires/Cache-Control值来判断的）。

    特点是客户端判断是否使用缓存。

    1
    2
    res.setHeader('Expires', new Date(new Date().getTime() + 1000 * 10).toGMTString()) //设置缓存有效时间为10s
    res.setHeader('Cache-Control','max-age=10') //设置缓存有效时间为10s

  • 协商缓存

    是指在缓存过期后，浏览器通过在请求头中设置If-Modified-Since或者If-None-Match字段（值分别为上次返回的Last-Modified，ETag值，Last-Modified 表示本地文件最后修改日期，Etag，就是由文件内容得出的哈希值，文件内容改变，这个值就会改变)，询问服务器是否应该使用缓存；如果服务器发现资源未改变，则响应304提示浏览器使用缓存，否则响应200并返回新的资源，以及最近一次修改该资源的时间即Last-Modified，或者最新的ETag值。

    协商缓存好比食物的保质期过了，于是询问还能不能吃。

如何理解OSI七层模型

  • 应用层

    该层协议定义了应用进程之间的交互规则，包括DNS协议，HTTP协议，电子邮件系统采用的 SMTP协议等。

    在应用层交互的数据单元我们称之为报文

  • 表示层

    该层提供的服务主要包括数据压缩，数据加密以及数据描述，使应用程序不必担心在各台计算机中表示和存储的内部格式差异

  • 会话层

    会话层就是负责建立、管理和终止表示层实体之间的通信会话

    该层提供了数据交换的定界和同步功能，包括了建立检查点和恢复方案的方法

  • 传输层

    传输层的主要任务是为两台主机进程之间的通信提供服务。其中，主要的传输层协议是TCP和UDP

  • 网络层

    负责主机到主机的通信，ip地址就工作在这一层，常见的设备比如路由器。在发送数据时，网络层把传输层产生的报文或用户数据报封装成分组或者包，向下传输到数据链路层。

    在网络层使用的协议是无连接的网际协议（Internet Protocol）和许多路由协议

  • 数据链路层

  • 物理层

比较重要的就是应用层，传输层，网络层，数据链路层，物理层，对这些模型的解释主要还是偏概念，较难以理解,了解就好。

数据链路层

常见的设备

  • 交换机

    用来进行帧的转发

    一般来说，一个交换机确定一个子网；基于全双工的特点，每个接口构成一个冲突域，整个交换机构成一个广播域；

    交换机学习后可以知道每台主机在哪个端口，可以对数据帧进行精确转发，所以交换机一般不广播，但是不是不能广播。

    交换机的转发基于帧中的MAC地址如果没有MAC地址，交换机将无法有效地进行帧的转发,可以理解为交换机只知道端口和MAC地址的对应关系。

  • 网桥

    可以理解为2个端口的交换机。左右2个端口连接集线器，每个集线器连接多台主机，每个端口记录了该端口侧的所有主机的MAC地址。

常见协议

  • arp协议

    是一种用于将网络层的IP地址解析为数据链路层的MAC地址的协议（ip->mac），ARP一般用于局域网（LAN）中，记录私有ip地址和mac地址的映射关系。因为ip地址无法在数据链路层工作。

    工作流程

    当一台主机要与某个ip地址对应的主机通信的时候，首先检查自己的arp缓存表，查看是否有该ip地址对应的mac地址。

    如果没有则广播arp请求到本地网络上的所有主机，这个请求包括了源mac，源ip和目标ip；如果收到该请求的主机发现自己的ip和请求的目标ip匹配，就把自己的mac地址发送给目标主机（单播）

    目标主机得知该ip地址的mac地址后，就把这个地址封装到帧中并传输。

物理层

物理层的作用是实现计算机节点之间比特流的透明传送,该层主要是和硬件有关，与软件关系不大。

常见设备

常见的设备有集线器,中继器

  • 集线器

    连接多台主机，由于半双工的特点，所有接口组成一个冲突域，共享传输介质，带宽；拓扑结构是星型。

  • 中继器

    用来放大信号。

传输介质

  • 有线
    • 双绞线：传输数字信号或者模拟型号
    • 同轴电缆：传输数字信号或者模拟型号
    • 光纤：传输光信号，衰减小、带宽高和抗干扰能力强，因为光信号不受电磁干扰，因此不会受到外界电磁场的影响。这意味着它可以避免来自电力线、无线电波和其他电子设备产生的电磁干扰。
  • 无线
    • 无线电波
    • 微波

案例分析

如图所示PC0-PC5，这6台主机通过交换机Switch0相连,这6台主机构成一个广播域,也可以说是一个内部网络,一个局域网(LAN)

这6台电脑之间的通信不需要经过路由器，也就是说“不需要联网”。

而Switch0又和一个路由器Router0相连，这就把这个内部网络和互联网连接了起来，允许这些主机访问其他主机或者服务器，比如B站服务器。

这台路由器常常被叫做默认网关。路由器会给连接到它的每台主机动态分配（DHCP，动态主机配置协议）一个私有ip地址，也包括自身，如图所示。

当PC0中的浏览器要发送一个请求时，这个请求在应用层被称作报文,然后被交给传输层,传输层把报文与源端口和目标端口封装成段，

交给网络层，网络层把段与源ip地址和目标ip地址封装成包

我们还需要知道这个目标ip地址对应的mac地址，才能封装成帧，才能在交换机上进行转发 ，我们先查看本地arp缓存表，查找这个ip地址对应的mac地址，如果缓存表中没有对应的记录，我们就需要进行arp广播，如果目标ip地址在本地网络,目标ip地址对应的主机在收到arp广播后会返回自己的MAC地址（单播），然后PC0把数据包封装成帧，通过交换机转发给这台主机即可。

如果目标ip地址不在本地网络，广播arp请求则无响应，此时更换arp广播目标ip地址为默认网关ip地址，再发送一次arp广播，找到默认网关ip对应的mac地址（默认网关ip地址也是网关自己分配的私有ip地址，主机号一般是最小的），再把请求转发到默认网关。

arp广播帧格式：

默认网关即路由器收到arp广播后，发现是在询问自己的MAC地址（目标ip=默认网关ip），并记住客户端MAC地址与客户端ip地址的对应关系，并返回自己的MAC地址（单播），然后主机PC0就能将数据封装成帧，转发给默认网关。

默认网关，即路由器在接收到转发的帧，确认是发送给自己的帧后，解封帧成包，路由器根据包里的ip地址进行路由转发，服务器网关如果知道这个目标ip地址对应的是那台服务器（知道目标ip地址对应的服务器mac地址），则把数据包封装成帧，经交换机转发给对应的服务器，如果不知道则进行arp广播。

对应的服务器收到帧后进行逐层解封，根据目标MAC地址确认这个帧是发给自己的，根据目标ip地址确认这个包是发给自己的，根据目标端口确定要与哪个应用程序交互，再把报文交给这个应用程序处理。

详细参考：互联网数据传输原理 ｜OSI七层网络参考模型_哔哩哔哩_bilibili

如何理解TCP/IP协议

TCP/IP协议不仅仅指的是TCP和IP两个协议，而是指一个由FTP、SMTP、TCP、UDP、IP等协议构成的协议簇，

只是因为在TCP/IP协议中TCP协议和IP协议最具代表性，所以通称为TCP/IP协议簇。

TCP/IP五层协议模型，是综合了 OSI 和 TCP/IP 优点的一种协议模型，包括应用层、传输层、网络层、数据链路层和物理层，即会话层和表示层被合并到应用层。

如何理解UDP 和 TCP?

TCP

TCP(Transmission Control Protocol)，传输控制协议，是一种可靠、面向字节流的通信协议，将应用层报文看成一串无结构的字节流，分解为多个TCP报文段后交给网络层传输。

UDP

UDP(User Datagram Protocol)，用户数据包协议，是一个简单的面向数据报的通信协议。即对应用层交下来的报文，不合并，不拆分，只是在其上面加上首部后就交给了下面的网络层。

区别与联系

  • 添加端口号

    都是工作在传输层的协议，都能给报文添加端口号（源端口，目标端口），把报文封装成段。

  • 首部开销

    TCP报文段首部内容更多，首部更大，UDP报文段首部开销小。

  • 报文分段

    如果报文很大，TCP会将报文分段，并给这些报文段编号。而UDP则始终把应用层的报文当做一个整体，不进行分片，直接封装。

  • 连接建立

    TCP是面向连接的,即发送数据之前需要建立连接，保证数据可靠性，而UDP是无连接的，直接发送数据，不保证数据可靠性。

  • 流量与拥塞控制

    TCP具有流量控制和拥塞控制，而UDP没有。

总结

TCP 应用场景适用于对效率要求低，对准确性要求高或者要求有连接的场景，而UDP 适用场景为对效率要求高，对准确性要求低的场景，各有优缺。

TCP连接如何建立，如何断开

建立tcp连接的建立与断开这一过程可以简记为:三次握手，四次挥手

三次握手

三次握手（Three-way Handshake）其实就是指建立一个TCP连接时，需要客户端和服务器总共发送3个包

主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备

过程如下：

  • 第一次握手：客户端给服务端发一个 SYN(同步)报文，并指明客户端的初始化序列号 ISN(init sequence number)，此时客户端处于 SYN_SENT 状态
  • 第二次握手：服务器收到客户端的 SYN 报文之后，会以自己的 SYN 报文作为应答，为了确认客户端的 SYN，将客户端的 ISN+1作为ACK的值，此时服务器处于SYN_RCVD的状态
  • 第三次握手：客户端收到 SYN 报文之后，会发送一个 ACK 报文，值为服务器的ISN+1。此时客户端处于 ESTABLISHED 状态。服务器收到 ACK 报文之后，也处于ESTABLISHED状态，此时，双方已建立起了连接。

为什么不是二次握手

  • 如果2次握手就建立连接，假如因为网络问题，客户端发送了不止一次SYN包，那么就会建立多个连接，占用不必要的资源。

  • 如果只进行2次握手，服务端无法确保客户端的接收能力正常，因为服务端的请求得不到响应。

四次挥手

IP

什么是IP

IP(Internet Protocol)，也叫互联网协议。它定义了如何将数据分割成数据包、地址编码、路由选择以及如何重新组装这些数据包以恢复原始信息。IP 提供的是无连接的服务，这意味着每个数据包独立处理，不需要事先建立专用的通信通道。这也意味着 IP 不保证数据包按顺序到达或不会丢失。

什么是IP地址

IP地址是IP (Internet Protocol，互联网协议)为每个连接到网络的设备分配的一个逻辑地址，用来唯一标识每一台设备，这使得设备之间能够互相识别并进行通信。IP地址的格式可分为ipv4(32位)，ipv6(128位 )。

IPv4格式IP地址分类

ipv4格式的IP地址被分为私有IP地址和公有IP地址，私有ip地址的出现，主要是为了解决ipv4格式的IP地址数量不足的问题。

私有ip地址只能在局域网中通信，而公有ip地址才能在互联网通信，一个公有ip地址常常对应多个私有ip地址。

路由器内部的DHCP会自动为设备分配私有ip地址，而公有ip地址由运营商分配。

ipv4格式的地址另一种常见的分类方式是分为A,B,C四大类

  • A类

    对应的子网掩码为255.0.0.0，即前8位用来表示网络号，后24位用来表示主机号，前一位比特必须是0（限定前几位比特是为了能快速识别是哪类IP地址），表示 IP 地址范围为 0.0.0.0 到 127.255.255.255

  • B类

    对应的子网掩码为255.255.0.0，即前16位用来表示网络号，后16位用来表示主机号，前两位比特必须是10，表示 IP 地址范围为 128.0.0.0 到 191.255.255.255

  • C类

    对应的子网掩码为255.255.255.0，即前24位用来表示网络号，后8位用来表示主机号，前三位比特必须是110，最为常见，表示 IP 地址范围为 192.0.0.0 到 223.255.255.255

  • 特殊地址

    • 127.0.0.0

      对任何ip地址的访问都会访问这个ip地址

    • 广播地址

      主机号全为1的地址。

    • 网络地址

      主机号全为0的地址,不能用来标识某一台主机。

DNS协议

DNS（Domain Names System），域名系统，是互联网一项服务，是把域名转换成对应的IP地址的服务器。

什么是域名

域名可以理解为给ip地址起的别名，方便记忆。域名由一般三部分构成，由.连接，从右到左分别是顶级域名，权威域名，本地域名。

域名查询方式

  • 递归查询

    如果 A 请求 B，那么 B 作为请求的接收者一定要给 A 想要的答案，可以理解为帮人帮到底，但是这样对B服务器（域名服务器）的压力就很大，域名服务器不返回下级域名服务器ip地址，而是负责的帮忙询问，只返回普通服务器ip地址。

  • 迭代查询

    如果接收者 B 没有请求者 A 所需要的准确内容，接收者 B 将告诉请求者 A，如何去获得这个内容，但是自己并不去发出请求。

域名缓存

计算机中DNS的记录分成了两种缓存方式：

  • 浏览器缓存：浏览器在获取网站域名的实际 IP 地址后会对其进行缓存，减少网络请求的损耗。
  • 操作系统缓存：操作系统的缓存其实是用户自己配置的 hosts 文件

DNS解析过程

  • 当我们访问一个网站，就需要通过DNS解析获取它的ip地址，首先搜索浏览器的 DNS 缓存，缓存中维护一张域名与 IP 地址的对应表
  • 若缓存没有命中，则继续搜索操作系统的 DNS 缓存
  • 若操作系统缓存仍然没有命中，则操作系统将域名发送至本地域名服务器（默认域名服务器），本地域名服务器采用递归查询自己的 DNS 缓存（因为域名是多级结构嘛），查找成功则返回结果。
  • 若本地域名服务器的 DNS 缓存没有命中，则本地域名服务器向上级域名服务器进行迭代查询
    • 首先本地域名服务器向根域名服务器发起请求，询问根域名服务器返回顶级域名服务器的ip地址给本地服务器
    • 本地域名服务器拿到这个顶级域名服务器的ip地址后，就向其发起请求，返回权限域名服务器的ip地址
    • 本地域名服务器根据权限域名服务器的地址向其发起请求，最终得到该域名对应的 IP 地址。
  • 本地域名服务器将得到的 IP 地址返回给操作系统，同时自身将 IP 地址缓存
  • 操作系统将 IP 地址返回给浏览器，同时自身将 IP 地址缓存
  • 至此，浏览器就得到了域名对应的 IP 地址，并将 IP 地址缓存

如何理解CDN

CDN也叫做内容分发网络，通过在多地设置CDN服务器，并存储源服务器的文件副本，并把请求路由到最近或者最合适的服务器，从而起到减少网络时延的作用，特点是就近取材，内容缓存/

除了减少网络时延，提高网页的加载速度，CDN技术还能解决源服务器宕机导致的服务瘫痪。

CDN在域名解析过程中起作用，配置了cdn加速的域名，解析后返回的不再是固定的源服务器ip，而是距离请求设备最近的或者最合适的cdn服务器的ip，cdn服务器的选择工作由CDN专用DNS服务器实现。

  • 看用户的 IP 地址，查表得知地理位置，找相对最近的边缘节点
  • 看用户所在的运营商网络，找相同网络的边缘节点
  • 检查边缘节点的负载情况，找负载较轻的节点
  • 其他，比如节点的“健康状况”、服务能力、带宽、响应时间等

结合上面的因素，得到最合适的边缘节点，然后把这个节点返回给用户，用户就能够就近访问CDN的缓存代理

其中有两个衡量CDN服务质量的指标：

  • 命中率：用户访问的资源恰好在缓存系统里，可以直接返回给用户，命中次数与所有访问次数之比
  • 回源率：缓存里没有，必须用代理的方式回源站取，回源次数与所有访问次数之比

命中率+回源率 = 1，命中率越高，表明加速效果越好。

域名解析参考：【实操演示】域名DNS解析设置 | 第一次设置域名解析？看这个就明白了 | 什么是域名解析 | 如何设置_哔哩哔哩_bilibili

CDN原理具体参考：【白话科普】用动画告诉你 CDN是如何工作的 | CDN是什么 | 如何让你的网站网站快速打开 | CDN原理 | 服务器自由_哔哩哔哩_bilibili

地址栏输入 URL 敲下回车后发生了什么

所有步骤如下：

  • URL解析
  • DNS 查询
  • 建立TCP 连接
  • 发送HTTP 请求
  • 响应请求
  • 页面渲染

URL解析

如果输入的是关键字则根据关键字进行搜索，如果输入的是合法的URL则对这个URL进行结构分析。

一个合法的URL包括协议，域名/ip，端口号（默认为80或者443），资源路径，查询参数等

DNS查询

在之前文章中讲过DNS的查询，这里就不再讲述了

建立TCP连接

在之前文章中讲过TCP连接的建立，这里就不再讲述了

发送http请求

http请求报文结构从上至下依次是：

  • 请求行

    包括请求方法，资源路径，协议以及协议版本号

  • 请求头

    http请求常见请求头再前面有介绍。

  • 请求体

    用来存放请求携带的数据

响应请求

http响应报文结构从上至下依次是：

  • 响应行
  • 响应头
  • 响应体

结构其实和请求报文结构很类似，就不举例说明了。

页面渲染

说说你对websocket的理解

是什么

WebSocket，是一种网络传输协议，位于OSI模型的应用层。可在单个TCP连接上进行全双工通信，能更好的节省服务器资源和带宽并达到实时通迅。

协议名

引入ws和wss分别代表明文和密文的websocket协议，且默认端口使用80或443，几乎与http一致

1
2
3
ws://www.chrono.com
ws://www.chrono.com:8080/srv
wss://www.chrono.com:445/im?user_id=xxx

握手

类似HTTP请求建立TCP连接需要握手，WebSocket也要有一个握手过程，然后才能正式收发数据。

与HTTP的区别

  • 更强的实时性

    相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少。

  • 保持连接状态

    创建通信后，可省略状态信息，不同于HTTP每次请求需要携带身份验证，也可以说，websocket是有状态的。

  • 较少的控制开销

    数据包头部协议较小，不同于http每次请求需要携带完整的头部。

应用场景

  • 弹幕
  • 媒体聊天
  • 协同编辑
  • 基于位置的应用
  • 体育实况更新
  • 股票基金报价实时更新