前端面试题总结 - 浏览器、网络篇

最新推荐文章于 2024-05-22 13:52:22 发布

yux_

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量1.6k

点赞数 45

文章标签：前端网络 javascript

本文链接：https://blog.csdn.net/qq_45370314/article/details/134741433

版权

1. 从输入 URL 到页面展示这中间发生了什么

用户输入 url 并回车；
拼接对应的协议，构成完整的 url；
检查本地缓存内有无相对应的资源，有的话直接返回，没有的话就发起 http 请求；
- dns 解析，获取到 ip 地址
- 利用 ip 地址和服务器建立 tcp 连接
- 构建并发送请求信息
- 接收响应信息，并解析响应内容
解析响应内容过程：
- http 状态码为 301、302：重定向到响应信息中 Location 字段返回的地址
- http 状态码为 200：看响应信息的 content-type，如果为 html，则浏览器渲染页面，如果为字节流，则交给下载管理器下载

2. HTTP 缓存

2.1 缓存过程

浏览器每次发起 http 请求，都会先在浏览器缓存中查找该请求的结果和缓存标识，如果缓存有效，则使用缓存结果，否则向服务器发起 http 请求，服务器返回请求的资源和缓存标识，浏览器接收后把请求的资源和缓存标识放在浏览器缓存中。

浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识。
浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中。

2.2 强缓存

强缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用缓存资源的过程。
强缓存由 http 响应头 Expires 和 Cache-Control 控制，其中 Cache-Control 优先级更高。

2.2.1 Expires

在 http/1.0 中使用，指服务器返回的缓存结果的过期时间，它的原理是对比客户端的时间和服务器返回的时间，因此可能不准确。

2.2.2 Cache-Control

有以下常用指令：

public：所有内容都可被缓存（客户端和代理服务器都可缓存）。
private：所有内容只有客户端可以缓存（Cache-Control 的默认取值）。
no-cache：与服务器进行协商缓存。
no-store：所有内容都不会被缓存。
max-age=xxx：缓存内容将在 xxx 秒后失效。

2.3 协商缓存

协商缓存就是强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，生效返回 304，不生效就返回 200 和请求结果。
协商缓存由 http 响应头 Last-Modified 和 Etag 控制，Last-Modified 最小精度为 1s，Etag 使用 MD5，精度更高。

2.3.1 Last-Modified

Last-Modified 是服务器返回的该资源最后修改时间，客户端再次发起请求时，会携带该时间放入 If-Modified-Since 请求头中，服务器将该时间与资源实际最后修改时间对比，如果相同，则返回 304 状态码，表示资源未更新，可使用缓存；如果不同，则返回 200 状态码及新的资源。

2.3.2 Etag

与 Last-Modified 大致相同，区别在于 Etag 返回资源文件的唯一标识，客户端发起请求时携带该标识的请求头为 If-None-Match，Etag 比 Last-Modified 精度更高。

3. 常见 http 状态码

200 服务器正常处理请求并返回
301 永久重定向
302 临时重定向
303 该资源已经重定向到其他url，需使用GET请求定向请求
304 浏览器携带信息发起请求，服务器响应该资源未更新
400 请求报文存在语法错误
401 需要http授权
403 服务器拒绝这次访问，和权限相关
404 服务器找不到请求的资源
500 服务器内部错误
502 网关错误

4. http1/http2/http3 的区别

目前最常使用的 http 协议为 http1.1 和 http2。

4.1 http2 和 http1对比

http2 相比于 http1，大幅提高了网页的性能。
http1 限制了同一个域名下的请求数量（Chrome 下一般是限制六个连接），队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才能发起请求；http2 引入了多路复用技术，通过一个 TCP 连接就可以传输所有的请求数据。
http1 通过文本的方式传输数据，http2 采用二进制格式编码，数据会被分割传输。

4.2 http3 和 http2 对比

http3 使用了 QUIC，QUIC 原生实现了多路复用，并且传输的单个数据流不会影响其他的数据流，解决了 TCP 丢包导致整个 TCP 等待重传，后续数据阻塞的情况。
纠错机制，计算所有包的异或值并单独发送一个校验包，在丢失一个包的情况下，可计算出丢失的内容。
http2 通过 ip 和端口去识别连接，http3 通过 ID 的方式识别一个连接，网络环境不稳定时也可迅速重连。

4.3 http2 技术

帧和流：帧代表最小的数据单位，每个帧会标识出自己属于哪个流，流就是由多个帧组成的数据流。
多路复用：就是一个 TCP 连接可以存在多条流，对端可以通过帧中的标识知道是哪个请求。
header 压缩：使用 HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。在两端维护索引表，记录出现过的 header，对端收到数据后可以通过键名找到对应的值。

5. 浏览器数据存储（cookie、sessionStorage、localStorage、indexedDB）

5.1 cookie

常用来记录用户会话状态，存储大小不超过 4kb，且每次请求都会发送回服务器。
设置、获取 cookie

const cookie = {
  // 设置 cookie
  setItem(name: string, value: any, expires: number): void {
    document.cookie =
      name +
      '=' +
      encodeURIComponent(value) +
      ';expires=' +
      expires +
      ';path=/';
  },
  // 获取 cookie
  getItem(key: string): any {
    return (
      decodeURIComponent(
        document.cookie.replace(
          new RegExp(
            '(?:(?:^|.*;)\\s*' +
              encodeURIComponent(key).replace(/[-.+*]/g, '\\$&') +
              '\\s*\\=\\s*([^;]*).*$)|^.*$',
          ),
          '$1',
        ),
      ) || null
    );
  },
};

5.2 sessionStorage

会话期间可用，页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。
通过 window.location.href、window.open、a 标签的 _blank，会把旧标签页的数据带过去，但不会再互相同步。如果主动打开新标签页，sessionStorage 为空。

5.3 localStorage

存储在 localStorage 的数据不会自动删除。
同源限制，不同源的 localStorage 相互隔离。
存储大小为 5M。

Q：当 localStorage 溢出时怎么办？
A：按实际情况使用 indexedDB 或 sessionStorage 存储。

5.4 indexedDB

存储空间大。
键值对存储，所有类型的数据都能存入。
异步操作，IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，避免了大量数据读写拖慢网页的情况。
与 localStorage 一样具有同源限制。

6. 同源策略、跨域

6.1 同源策略

同源策略是一种约定，所谓同源是指协议、域名、端口一致，它限制了不同源之间的资源进行交互。

6.2 options 预检请求

在当前真实请求是非简单请求且跨域的情况下，浏览器会发起 options 预检请求，来向服务器询问是否允许该实际请求，预检请求完成后再发送实际请求。

6.3 跨域处理方案

CORS 跨域资源共享：服务器设置 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等响应头，来允许跨域请求。
JSONP：动态创建 script 标签，利用 script 标签 src 属性不受同源策略影响，来实现跨域请求。
postMessage：通过 postMessage 发送监听消息，实现跨域资源共享。