Hi，我是前端人，今日与君共勉！

web前端面试题及答案2022（web前端面试题及答案2021）

在浏览器中输入一个网址，如：。从输入地址到我们看到百度首页，这一过程到底发生了什么？

1.1、构建网络请求

1.2、查找缓存

检查如果有缓存，则直接使用缓存，如果没有缓存，则会向服务器发送网络请求。

1.3、DNS解析

我们访问网站的时候，输入的是域名，比如上边截图内

域名：

IP地址：36.152.44.95：443

真正的数据包是通过IP地址传过来的，域名和IP是一一映射关系。我们根据域名获取到具体的IP这个过程就叫做DNS解析。

IP地址后的数字指定的端口号，如果没有，默认是80。

1.4、建立TCP连接

服务器要是想把数据包传给浏览器之前，首先要建立连接。建立TCP连接，就是保证服务器与浏览器之间能够进行安全连接通信，数据传输完毕之后再断开连接。

TCP(TransmissionControlProtocol)，传输控制协议，是一种面向连接的，可靠的，基于字节流的传输层通信协议。

同一个域名下，最多能够建立6个TCP连接，超过6个的话，剩余的会排队等待。TCP连接分为三个阶段：

1.5、发送HTTP请求

TCP建立连接完毕后，浏览器和服务器可以开始通信了，即开始发送HTTP请求。

http请求，前端程序员就很熟悉喽！有请求和响应。

请求流程图：

第一个问题讲的浏览器内输入url之后做了做了些啥，最后到发送网络请求。服务器根据url提供的地址查找文件，然后加载html、css、js、img等资源文件。接收到文件之后浏览器是如何渲染的呢？

浏览器渲染的过程为：

过程如图示：

3.1、强缓存

检查强缓存的时候，不会发送http请求。

如何来检查呢？通过相应的字段来进行检查的，在hTTP/1.0中使用的是Expires/，在HTTP/1.1使用的是Cache-Control。

Expires

Expires即过期时间，存在于服务端返回的响应头，告诉浏览器在过期时间之前可以直接从缓存内获取数据，无需再次发送网络请求。

这个方式你看有毛病吗？潜藏了一个大坑，如果电脑的本地时间与服务器时间不一致时，那么服务器返回的这个过期时间可能就是不准确的，因此这种方式在HTTP1.1中被抛弃了。

Cache-Control

在HTTP1.1中，采用了一个非常关键的字段：Cache-Control。这个字段也存在于响应头中。如：

代表的是这个响应返回后，在（2592/3600=720小时）之内直接可以直接使用缓存。

它和Expires本质的不同在于它并没有采用具体的时间点，而是采用的时长来控制强缓存。如果Expires和Cache-Control同时存在的时候，Cache-Control会优先考虑。

强缓存有没有可能失效呢？如果资源缓存时间超时，也就是强缓存失效了，接下来该怎么办呢？此时就会进入到第二级屏障--协商缓存。

3.2、协商缓存

强缓存失效之后，浏览器在请求头中携带相应的缓存tag向服务器发送请求，服务器根据这个缓存tag决定到底是否使用缓存，这就是协商缓存。

缓存tag有两种：ETag和Last-Modified。

ETag是服务器根据当前文件内容生成的唯一标识，如果内容发生更新，唯一标识也会更新。浏览器接收到的ETag会作为if-None-Match字段的内容，并放到请求头中，发送给服务器之后，服务器会与服务器上的值进行对比，如果两者一样，浏览器直接返回304，使用缓存，不一样时发送http请求。

Last-Modified，最后修改时间。浏览器第一次发送网络请求后，服务器会在响应头上加上该字段。浏览器再发请求时，会把该值作为last-Modified-Since的值，放入请求头，然后服务器会与服务器上的最后修改时间进行对比，如果两者一样，浏览器直接返回304，使用缓存。不一样时发送http请求。

两者对比：

精准度上ETag更好一点。因为ETag能够更准确的判断资源是否有更新，保证拉取到的都是最新内容。

性能上Last-Modified刚好一点，只需要记录一个时间点就好了。

如果两者都存在的话，优先考虑ETag。

3.3、缓存位置

前边讲述，浏览器请求地址时，服务器返回304表示使用浏览器缓存，这些资源究竟缓存到哪了呢？

缓存位置一共有四种，按照优先级由高到低排列分别为：

所谓本地存储，就是把一些信息，存储到客户端本地，存储的信息不会因为页面的跳转或关闭而消失。浏览器本地存储主要分为：cookie、webStorage和indexDB。

4.1、cookie

cookie主要为了辨别用户身份。弥补http在状态管理上的不足。

http是一个无状态协议，浏览器向服务器发送请求之后，服务器返回响应，下次再请求的时候，服务器已经不认识浏览器了，如果浏览器下次再发送请求时，能够把cookie带上，服务器进行解析，便能够辨别浏览器的身份。

cookie就是用来存储状态的，它的特点分别有：

4.2、webStorage

webStorag可分为localStorage和sessionStorage，是本地持久化存储，本地持久化存储用来保存一些不需要发送给服务器的信息，用来补充cookie存储方式不足。

localStorage特点：

sessionStorage特点：

localStorage和sessionStorage有一个本质区别，localStorage生命周期是永久化的，而sessionStorage只存在于当前会话。

4.3、indexedDB

indexedDB是html5提供的一种本地存储，一般保存大量用户数据并要求数据之间有搜索需要的场景，当网络断开，做一些离线应用，数据格式为json。本质上是一个非关系型数据库。它的容量是没有上限的。

特点：

总结：浏览器本地存储每种方式都有各自的特点，cookie比较小适合存储与服务器之间通信的较小状态信息，webStorage存储不参与服务器通信的数据，indexedDB存储大型的非关系型数据库。

浏览器访问http的网站的时候，域名前面会提示“不安全”，访问https//xxx.com的时候浏览器提示“安全”，这是为什么呢？

http协议，超文本传输协议，被用于在服务器和浏览器之间传递信息，http协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者直接截取浏览器和服务器之间传输报文，就可以直接读懂其中的信息。

为了解决http协议的缺陷，使用https安全套接字层超文本传输协议，为了保证数据的安全性，在http协议的基础上，新增了SSL协议，SSL依靠证书来验证服务器的身份器，并未浏览器和服务器之间的通信加密。

https并不是一个新协议，而是一个加强版的http。简单讲https协议由SSL+http协议构建成可进行加密传输、身份认证的网络协议，要比http协议安全。

https和http的区别：

https工作原理图：

加解密过程

接着我们来谈谈浏览器和服务器进行协商加解密的过程。

首先，浏览器会给服务器发送一个随机数client_random和一个加密的方法列表。

服务器接收后给浏览器返回另一个随机数server_random和加密方法。

现在，两者拥有三样相同的凭证:client_random、server_random和加密方法。

接着用这个加密方法将两个随机数混合起来生成密钥，这个密钥就是浏览器和服务端通信的暗号。