2023.03.26 更新各大厂前端面试问题总结（22道题）

本文链接：https://blog.csdn.net/qq_38355456/article/details/129785969

2023.03.26 更新前端面试问题总结（22道题）
获取更多面试问题可以访问
github 地址: https://github.com/pro-collection/interview-question/issues
gitee 地址: https://gitee.com/yanleweb/interview-question/issues

初级开发者相关问题【共计 1 道题】
- 185.TypeScript is 这个关键字是做什么呢？【TypeScript】
中级开发者相关问题【共计 9 道题】
- 182.http3 QUIC 是什么协议？【网络】
- 188.前端如何实现截图？【web应用场景】
- 189.当QPS达到峰值时, 该如何处理？【web应用场景】
- 190.js 超过 Number 最大值的数怎么处理？【web应用场景】
- 191.[‘1’, ‘2’, ‘3’].map(parseInt) 结果是啥，为什么？【JavaScript】
- 192.介绍下深度优先遍历和广度优先遍历，如何实现？【JavaScript】
- 193.请分别用深度优先思想和广度优先思想实现一个拷贝函数？【JavaScript】
- 195.Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？【JavaScript】
- 199.手写观察者模式【JavaScript】【出题公司: 网易、阿里巴巴】
高级开发者相关问题【共计 11 道题】
- 2.async/await 原理，手写 async 函数？【JavaScript】
- 180.HTTP协议的不同版本的主要特点有哪些？【网络】
- 181.http1.1 持久连接和 http2 的多路复用有什么区别？【网络】
- 184.前端如何防止加载外域脚本？【网络】
- 186.中间人攻击是什么？【网络】
- 187.前端单页应用 History 路由模式，需要如何配置 nginx？【工程化】
- 194.JavaScript 异步解决方案的发展历程主要有哪些阶段？【JavaScript】
- 196.如何从 http1.1 迁移到 http2 ?【JavaScript】
- 197.A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态？(了解即可)【网络】【出题公司: 网易】
- 198.介绍下观察者模式和订阅-发布模式的区别？【JavaScript】【出题公司: 网易、阿里巴巴】
- 200.手写订阅-发布模式【JavaScript】【出题公司: 网易、阿里巴巴】
资深开发者相关问题【共计 1 道题】
- 183.HTTP/3 是基于 UDP 的协议，那么他是如何保障安全性的？【网络】

初级开发者相关问题【共计 1 道题】

185.TypeScript is 这个关键字是做什么呢？【TypeScript】

is 是 TypeScript 中的一个关键字，用于创建类型保护。在 TypeScript 中，类型保护是一种用于确定变量是否符合某种类型的方法。当我们使用 is 关键字创建一个类型保护时，它会在运行时对变量进行判断，然后返回一个布尔值。

具体来说，我们可以通过定义一个返回值为布尔类型的函数，并在函数内部进行类型判断来创建类型保护。比如：

csharpCopy codefunction isString(value: any): value is string {
   
  return typeof value === 'string';
}

在这个例子中，我们定义了一个名为 isString 的函数，它接收一个任意类型的参数 value，并通过 typeof 运算符判断 value 是否为字符串。如果是字符串，函数返回 true，否则返回 false。

使用时，我们可以通过将变量传递给 isString 函数来判断变量是否为字符串类型：

rustCopy codeconst str = 'hello';
if (isString(str)) {
   
  console.log(str.length);
}

在这个例子中，由于 str 是字符串类型，所以 isString(str) 返回 true，if 语句内的代码会被执行，输出字符串的长度。如果 str 不是字符串类型，isString(str) 返回 false，if 语句内的代码不会被执行。

这样，在使用变量之前进行类型保护，可以避免在运行时出现类型错误，提高代码的健壮性。

中级开发者相关问题【共计 9 道题】

182.http3 QUIC 是什么协议？【网络】

HTTP/3（或称为HTTP-over-QUIC）是一个基于QUIC协议的新版本的HTTP协议。QUIC（Quick UDP Internet Connections）是由Google设计的一个基于UDP协议的传输层协议，旨在解决HTTP/2协议存在的一些问题。

HTTP/3中引入了QUIC的一些特性，如0-RTT连接建立、基于UDP的传输、数据流多路复用和快速恢复等，这些特性有助于提高性能和安全性。与HTTP/2相比，HTTP/3采用了新的二进制编码协议（QUIC Crypto）来加密和验证数据，以提供更好的安全性。

此外，HTTP/3还可以更好地适应现代网络环境下的多元化应用需求。由于QUIC协议基于UDP协议，因此可以更好地适应移动网络和高丢包率网络等不稳定的网络环境。同时，HTTP/3可以更好地支持多媒体内容和实时通信等应用场景。

188.前端如何实现截图？【web应用场景】

前端实现截图需要使用 HTML5 的 Canvas 和相关 API，具体步骤如下：

首先在页面中创建一个 Canvas 元素，并设置其宽高和样式。
使用 Canvas API 在 Canvas 上绘制需要截图的内容，比如页面的某个区域、某个元素、图片等。
调用 Canvas API 中的 toDataURL() 方法将 Canvas 转化为 base64 编码的图片数据。
将 base64 编码的图片数据传递给后端进行处理或者直接在前端进行显示。

以下是一个简单的例子，实现了对整个页面的截图：

htmlCopy code<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>截图示例</title>
    <style>
      #canvas {
     
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9999;
      }
    </style>
  </head>
  <body>
    <h1>截图示例</h1>
    <p>这是一个简单的截图示例。</p>
    <button id="btn">截图</button>
    <canvas id="canvas"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const btn = document.getElementById('btn');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      btn.addEventListener('click', () => {
     
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(document.documentElement, 0, 0);
        const imgData = canvas.toDataURL();
        console.log(imgData);
      });
    </script>
  </body>
</html>

这个例子中，在页面中创建了一个 canvas 元素，并设置其宽高和样式，将其放在页面最上方。在点击“截图”按钮时，通过 toDataURL() 方法将整个页面的截图转换为 base64 编码的图片数据，并打印到控制台上。

189.当QPS达到峰值时, 该如何处理？【web应用场景】

当QPS达到峰值时，可以从以下几个方面来进行优化：

数据库优化：数据库的优化包括优化SQL语句、使用索引、避免全表扫描、分表分库等措施，以提高数据库的读写性能。
缓存优化：缓存可以降低对数据库的访问频率，提高响应速度。可以使用Redis、Memcached等缓存技术，减轻服务器负载。
代码优化：优化代码可以提高代码的执行效率，减少不必要的开销。可以通过一些优化手段，如减少不必要的代码执行、避免循环嵌套、避免不必要的递归调用等来提高代码的性能。
负载均衡：负载均衡可以将请求分发到多个服务器上，减少单个服务器的负载，提高整个系统的性能和可用性。
异步处理：将一些计算量大、耗时长的操作异步处理，减少对主线程的阻塞，提高响应速度。
CDN加速：使用CDN技术可以将静态资源缓存到CDN节点上，提高资源的加载速度，减少服务器的负载。
硬件升级：可以通过升级服务器硬件，增加带宽等方式来提高系统的处理能力。

以上是一些常见的优化手段，需要根据具体情况进行选择和实施。

190.js 超过 Number 最大值的数怎么处理？【web应用场景】

js 超过 Number 最大值的数怎么处理

在 JavaScript 中，超过 Number.MAX_VALUE 的数值被认为是 Infinity（正无穷大）。如果要处理超过 Number.MAX_VALUE 的数值，可以使用第三方的 JavaScript 库，如 big.js 或 bignumber.js，这些库可以处理任意精度的数值。

例如，使用 big.js 库可以将两个超过 Number.MAX_VALUE 的数相加：