2024-前端面试的正确打开方式（GitHub火爆场景题剖析）

写在前面

最近前端面试大家有没有感觉到场景题的压迫感！！！

很显然普通面试八股不会怎么更新，而且就前端来说，面试并不是真正困难的，常规八股显示不出面试者的技术水平。 前端作为一个技术行业，对于技术的需求是很高的，，

最近朋友和我说，公司招了些前端，给他的感触是，八股随便考，面试通过肯定是没问题的，但是对于工作的动作能力并不如面试中表现出来的样子。

那么场景题也许增加了面试的难度，也让很多真正有技术的人，可以获得机会吧。本文也只是针对场景题进行整理，毕竟作为前端，总要奋斗在岗位第一线的

好了，2024前端场景题合集整理-111道热度爆火总结，来了！！！

可以根据个人需求选择八股、场景题、算法、简历等+【 点击此处】获得以下完整PDF

目录展示

1. 前端如何实现截图？

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

1. ⾸先在⻚⾯中创建⼀个 Canvas 元素，并设置其宽⾼和样式。
2. 使⽤ Canvas API 在 Canvas 上绘制需要截图的内容，⽐如⻚⾯的某个区域、某个元素、图⽚等。
3. 调⽤ Canvas API 中的 toDataURL() ⽅法将 Canvas 转化为 base64 编码的图⽚数据。
4. 将 base64 编码的图⽚数据传递给后端进⾏处理或者直接在前端进⾏显⽰。

以下是⼀个简单的例⼦，实现了对整个⻚⾯的截图：

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

2. 当QPS达到峰值时, 该如何处理？

当QPS达到峰值时，可以从以下⼏个⽅⾯来进⾏优化：

1. 数据库优化：数据库的优化包括优化SQL语句、使⽤索引、避免全表扫描、分表分库等措施，以提 ⾼数据库的读写性能。

2. 缓存优化：缓存可以降低对数据库的访问频率，提⾼响应速度。可以使⽤Redis、Memcached等缓 存技术，减轻服务器负载。

3. 代码优化：优化代码可以提⾼代码的执⾏效率，减少不必要的开销。可以通过⼀些优化⼿段，如减 少不必要的代码执⾏、避免循环嵌套、避免不必要的递归调⽤等来提⾼代码的性能。

4. 负载均衡：负载均衡可以将请求分发到多个服务器上，减少单个服务器的负载，提⾼整个系统的性能和可⽤性。

5. 异步处理：将⼀些计算量⼤、耗时⻓的操作异步处理，减少对主线程的阻塞，提⾼响应速度。

6. CDN加速：使⽤CDN技术可以将静态资源缓存到CDN节点上，提⾼资源的加载速度，减少服务器的负载。

7. 硬件升级：可以通过升级服务器硬件，增加带宽等⽅式来提⾼系统的处理能⼒。

以上是⼀些常⻅的优化⼿段，需要根据具体情况进⾏选择和实施。

3. js 超过 Number 最⼤值的数怎么处理？

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

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

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

这⾥创建了两个 big.js 对象 x 和 y ，分别存储超过 Number.MAX_VALUE 的数值。通过 plus ⽅法将它们相加，得到了正确的结果。最后，通过 toString ⽅法将结果转换为字符串。

如果不依赖外部库，咋处理JavaScript 中，数值超过了 Number 最⼤值时，可以使⽤ BigInt 类型来处理，它可以表⽰任意精度的整数。

使⽤ BigInt 类型时，需要在数值后⾯添加⼀个 n 后缀来表⽰ BigInt 类型。例如：

注意，BigInt 类型是 ECMAScript 2020 新增的特性，因此在某些浏览器中可能不被⽀持。如果需要在 不⽀持 BigInt 的环境中使⽤ BigInt，可以使⽤ polyfill 或者第三⽅库来实现。

4. 使⽤同⼀个链接， 如何实现 PC 打开是 web 应⽤、⼿机打开是⼀个 H5 应⽤？

可以通过根据请求来源（User-Agent）来判断访问设备的类型，然后在服务器端进⾏适配。例如，可 以在服务器端使⽤ Node.js 的 Express 框架，在路由中对不同的 User-Agent 进⾏判断，返回不同的⻚⾯或数据。具体实现可以参考以下步骤：

1. 根据 User-Agent 判断访问设备的类型，例如判断是否为移动设备。可以使⽤第三⽅库如 uaparser-js 进⾏ User-Agent 的解析。

2. 如果是移动设备，可以返回⼀个 H5 ⻚⾯或接⼝数据。

3. 如果是 PC 设备，可以返回⼀个 web 应⽤⻚⾯或接⼝数据。

具体实现⽅式还取决于应⽤的具体场景和需求，以上只是⼀个⼤致的思路。

5. 如何保证⽤⼾的使⽤体验

【如何保证⽤⼾的使⽤体验】这个也是⼀个较为复杂的话题， 这个也不是问题了， 这个算是话题吧；

主要从以下⼏个⽅⾯思考问题：

1. 性能⽅向的思考

2. ⽤⼾线上问题反馈，线上 on call 的思考

3. ⽤⼾使⽤体验的思考， 交互体验使⽤⽅向

4. 提升⽤⼾能效⽅向思考

6. 如何解决⻚⾯请求接⼝⼤规模并发问题

如何解决⻚⾯请求接⼝⼤规模并发问题， 不仅仅是包含了接⼝并发， 还有前端资源下载的请求并发。 应该说这是⼀个话题讨论了；

个⼈认为可以从以下⼏个⽅⾯来考虑如何解决这个并发问题:

1. 后端优化：可以对接⼝进⾏优化，采⽤缓存技术，对数据进⾏预处理，减少数据库操作等。使⽤集 群技术，将请求分散到不同的服务器上，提⾼并发量。另外可以使⽤反向代理、负载均衡等技术， 分担服务器压⼒。

2. 做 BFF 聚合：把所有⾸屏需要依赖的接⼝， 利⽤服务中间层给聚合为⼀个接⼝。3. CDN加速：使⽤CDN缓存技术可以有效减少服务器请求压⼒，提⾼⽹站访问速度。CDN缓存可以将 接⼝的数据存储在缓存服务器中，减少对原始服务器的访问，加速数据传输速度。

4. 使⽤ WebSocket：使⽤ WebSocket 可以建⽴⼀个持久的连接，避免反复连接请求。WebSocket 可以实现双向通信，⼤幅降低服务器响应时间。

5. 使⽤ HTTP2 及其以上版本， 使⽤多路复⽤。

6. 使⽤浏览器缓存技术：强缓存、协商缓存、离线缓存、Service Worker 缓存 等⽅向。

7. 聚合⼀定量的静态资源： ⽐如提取⻚⾯公⽤复⽤部分代码打包到⼀个⽂件⾥⾯、对图⽚进⾏雪碧图 处理， 多个图⽚只下载⼀个图⽚。

8. 采⽤微前端⼯程架构： 只是对当前访问⻚⾯的静态资源进⾏下载， ⽽不是下载整站静态资源。

9. 使⽤服务端渲染技术： 从服务端把⻚⾯⾸屏直接渲染好返回， 就可以避免掉⾸屏需要的数据再做 额外加载和执⾏。

7. 设计⼀套全站请求耗时统计⼯具

⾸先我们要知道有哪些⽅式可以统计前端请求耗时

从代码层⾯上统计全站所有请求的耗时⽅式主要有以下⼏种：

1. Performance API：Performance API 是浏览器提供的⼀组 API，可以⽤于测量⽹⻚性能。通过 Performance API，可以获取⻚⾯各个阶段的时间、资源加载时间等。其中，Performance Timing API 可以获取到每个资源的加载时间，从⽽计算出所有请求的耗时。

2. XMLHttpRequest 的 load 事件：在发送 XMLHttpRequest 请求时，可以为其添加 load 事件，在请求完成时执⾏回调函数，从⽽记录请求的耗时。

3. fetch 的 Performance API：类似 XMLHttpRequest，fetch 也提供了 Performance API，可以通过 Performance API 获取请求耗时。

4. ⾃定义封装的请求函数：可以⾃⼰封装⼀个请求函数，在请求开始和结束时记录时间，从⽽计算请求耗时。

设计⼀套前端全站请求耗时统计⼯具

可以遵循以下步骤：

1. 实现⼀个性能监控模块，⽤于记录每个请求的开始时间和结束时间，并计算耗时。

2. 在应⽤⼊⼝处引⼊该模块，将每个请求的开始时间记录下来。

3. 在每个请求的响应拦截器中，记录响应结束时间，并计算请求耗时。

4. 将每个请求的耗时信息发送到服务端，以便进⾏进⼀步的统计和分析。

5. 在服务端实现数据存储和展⽰，可以使⽤图表等⽅式展⽰请求耗时情况。

6. 对于请求耗时较⻓的接⼝，可以进⾏优化和分析，如使⽤缓存、使⽤异步加载、优化查询语句等。7. 在前端应⽤中可以提供开关，允许⽤⼾⾃主开启和关闭全站请求耗时统计功能。

以下是⼀个简单的实现⽰例：

在应⽤⼊⼝处引⼊该模块：

在每个请求的响应拦截器中触发 fetchEnd 事件：

在服务端实现数据存储和展⽰，可以使⽤图表等⽅式展⽰请求耗

8. ⼤⽂件上传了解多少

⼤⽂件分⽚上传

如果太⼤的⽂件，⽐如⼀个视频1g 2g那么⼤，直接采⽤上⾯的栗⼦中的⽅法上传可能会出链接现超时 的情况，⽽且也会超过服务端允许上传⽂件的⼤⼩限制，所以解决这个问题我们可以将⽂件进⾏分⽚ 上传，每次只上传很⼩的⼀部分 ⽐如2M。

Blob 它表⽰原始数据, 也就是⼆进制数据，同时提供了对数据截取的⽅法 slice ,⽽ File 继承 了 Blob 的功能，所以可以直接使⽤此⽅法对数据进⾏分段截图。

过程如下：

• 把⼤⽂件进⾏分段 ⽐如2M，发送到服务器携带⼀个标志，暂时⽤当前的时间戳，⽤于标识⼀个完整的⽂件

• 服务端保存各段⽂件• 浏览器端所有分⽚上传完成，发送给服务端⼀个合并⽂件的请求

• 服务端根据⽂件标识、类型、各分⽚顺序进⾏⽂件合并

• 删除分⽚⽂件

客⼾端 JS 代码实现如下

服务端 node 实现代码如下： 合并⽂件这⾥使⽤ stream pipe 实现，这样更节省内存，边读边写⼊， 占⽤内存更⼩，效率更⾼，代码⻅fnMergeFile⽅法。

⼤⽂件上传断点续传

在上⾯我们实现了⽂件分⽚上传和最终的合并，现在要做的就是如何检测这些分⽚，不再重新上传即 可。 这⾥我们可以在本地进⾏保存已上传成功的分⽚，重新上传的时候使⽤ spark-md5 来⽣成⽂件 hash，区分此⽂件是否已上传。

• 为每个分段⽣成 hash 值，使⽤ spark-md5 库

• 将上传成功的分段信息保存到本地

• 重新上传时，进⾏和本地分段 hash 值的对⽐，如果相同的话则跳过，继续下⼀个分段的上传

⽅案⼀： 保存在本地 indexDB/localStorage 等地⽅， 推荐使⽤ localForage 这个库 npm install localforage

客⼾端 JS 代码：

⽅案2：服务端⽤于保存分⽚坐标信息， 返回给前端

需要服务端添加⼀个接⼝只是服务端需要增加⼀个接⼝。 基于上⾯⼀个栗⼦进⾏改进，服务端已保存 了部分⽚段，客⼾端上传前需要从服务端获取已上传的分⽚信息（上⾯是保存在了本地浏览器），本 地对⽐每个分⽚的 hash 值，跳过已上传的部分，只传未上传的分⽚。

⽅法1是从本地获取分⽚信息,这⾥只需要将此⽅法的能⼒改为从服务端获取分⽚信息就⾏了。

14. 扫码登录实现⽅式【热度: 734】

扫码登录的实现原理核⼼是基于⼀个中转站，该中转站通常由应⽤提供商提供，⽤于维护⼿机和PC之 间的会话状态。

整个扫码登录的流程如下：

1. ⽤⼾在PC端访问应⽤，并选择使⽤扫码登录⽅式。此时，应⽤⽣成⼀个随机的认证码，并将该认证 码通过⼆维码的形式显⽰在PC端的⻚⾯上。

2. ⽤⼾打开⼿机上的应⽤，并选择使⽤扫码登录⽅式。此时，应⽤会打开⼿机端的相机，⽤⼾可以对着PC端的⼆维码进⾏扫描。

3. ⼀旦⽤⼾扫描了⼆维码，⼿机上的应⽤会向应⽤提供商的中转站发送⼀个请求，请求包含之前⽣成的随机认证码和⼿机端的⼀个会话ID。

4. 中转站验证认证码和会话ID是否匹配，如果匹配成功，则该中转站将⽤⼾的⾝份信息发送给应⽤，并创建⼀个PC端和⼿机端之间的会话状态。

5. 应⽤使⽤收到的⾝份信息对⽤⼾进⾏认证，并创建⼀个与该⽤⼾关联的会话状态。同时，应⽤返回 ⼀个通过认证的响应给中转站。6. 中转站将该响应返回给⼿机端的应⽤，并携带⼀个⽤于表⽰该会话的令牌，此时⼿机和PC之间的认 证流程就完成了。

7. 当⽤⼾在PC端进⾏其他操作时，应⽤将会话令牌附加在请求中，并通过中转站向⼿机端的应⽤发起 请求。⼿机端的应⽤使⽤会话令牌（也就是之前⽣成的令牌）来识别并验证会话状态，从⽽允许⽤⼾在PC端进⾏需要登录的操作。

15. DNS 协议了解多少【热度: 712】

DNS 基本概念

DNS（Domain Name System，域名系统）是因特⽹上⽤于将主机名转换为 IP 地址的协议。它是⼀个 分布式数据库系统，通过将主机名映射到 IP 地址来实现主机名解析，并使⽤⼾能够通过更容易识别的 主机名来访问互联⽹上的资源。

在使⽤ DNS 协议进⾏主机名解析时，系统⾸先查询本地 DNS 缓存。如果缓存中不存在结果，系统将 向本地 DNS 服务器发出请求，并逐级向上查找，直到找到权威 DNS 服务器并获得解析结果。在域名 解析的过程中，DNS 协议采⽤了分级命名空间的结构，不同的域名可以通过点分隔符分为多个级别，

例如 http://www.example.com 可以分为三个级别： www 、 example 和 com 。

除了将域名映射到 IP 地址之外，DNS 协议还⽀持多种其他功能：

1. 逆向映射：将 IP 地址解析为域名。

2. 邮件服务器设置：⽀持邮件服务器的⾃动发现和设置。

3. 负载均衡：DNS 还可以实现简单的负载均衡，通过将相同 IP 地址的主机名映射到不同的 IP 地址来 分散负载。

4. 安全：DNSSEC（DNS Security Extensions，DNS 安全扩展）可以提供对域名解析的认证和完整性。

如何加快 DNS 的解析？

有以下⼏种⽅法可以加快 DNS 的解析：

1. 使⽤⾼速 DNS 服务器：默认情况下，⽹络服务提供商（ISP）为其⽤⼾提供 DNS 服务器。但是，这些服务器不⼀定是最快的，有时会出现瓶颈。如果您想加快 DNS 解析，请尝试使⽤其他⾼速 DNS 服务器，例如 Google 的公共 DNS 服务器或 OpenDNS。

2. 缓存 DNS 记录：在本地计算机上缓存 DNS 记录可以⼤⼤加快应⽤程序的响应。当您访问特定的⽹ 站时，计算机会⾃动缓存该⽹站的 DNS 记录。如果您再次访问该⽹站，则计算机将使⽤缓存的DNS 记录。

3. 减少 DNS 查找：当您访问⼀个⽹站时，您的计算机将会查找该域名的 IP 地址。如果⽹站有很多域 名，则查找过程可能会变得⾮常缓慢。因此，尽可能使⽤较少的域名可以减少 DNS 查找的数量， 并提⾼响应速度。

4. 使⽤ CDN：CDN（内容分发⽹络）是⼀种将内容存储在全球多个位置的系统。这些位置通常都有专⽤的 DNS 服务器，可以⼤⼤加快站点的加载速度。

5. 使⽤ DNS 缓存⼯具：⼀些辅助⼯具可以帮助您优化与 DNS 相关的设置，例如免费的 DNS Jumper 软件和 Namebench ⼯具，它们可以测试您的 DNS 响应时间并为您推荐最佳配置。

通过使⽤⾼速 DNS 服务器、缓存 DNS 记录、减少 DNS 查找、使⽤ CDN 和 DNS 缓存⼯具等⽅法，可 以显著提⾼ DNS 解析速度，从⽽加快应⽤程序响应时间。

16. 函数式编程了解多少？【热度: 1,789】

函数式编程的核⼼概念

函数式编程是⼀种编程范式，它将程序看做是⼀系列函数的组合，函数是应⽤的基础单位。函数式编 程主要有以下核⼼概念：

1. 纯函数：函数的输出只取决于输⼊，没有任何副作⽤，不会修改外部变量或状态，所以对于同样的 输⼊，永远返回同样的输出值。因此，纯函数可以有效地避免副作⽤和竞态条件等问题，使得代码 更加可靠、易于调试和测试。

2. 不可变性：在函数式编程中，数据通常是不可变的，即不允许在内部进⾏修改。这样可以避免副作 ⽤的发⽣，提⾼代码可靠性。

3. 函数组合：函数可以组合成复杂的函数，从⽽减少重复代码的产⽣。

4. ⾼阶函数：⾼阶函数是指可以接收其他函数作为参数，也可以返回函数的函数。例如，函数柯⾥化 和函数的组合就是⾼阶函数的应⽤场景。

5. 惰性计算：指在必要的时候才计算（执⾏）函数，⽽不是在每个可能的执⾏路径上都执⾏，从⽽提 ⾼性能。

函数式编程的核⼼概念是将函数作为基本构建块来组合构建程序，通过纯函数、不可变性、函数组 合、⾼阶函数和惰性计算等概念来实现代码的简洁性、可读性和可维护性，以及⾼效的性能运⾏。

函数式编程的优势

函数式编程有以下优势：

1. 易于理解和维护：函数式编程强调数据不变性和纯函数概念，可以提⾼代码的可读性和可维护性， 因为它避免了按照顺序对变量进⾏修改，并强调函数⾏为的确定性。

2. 更少的 bug：由于函数式编程强调纯函数的概念，它可以消除由于副作⽤引起的bug。因为纯函数 不会修改外部状态或数据结构，只是将输⼊转换为输出。这么做有助于保持代码更加可靠。

3. 更好的可测试性：由于纯函数不具有副作⽤，它更容易测试，因为测试数据是预测性的。

4. 更少的重构：函数式编程使⽤函数组合和柯⾥化等⽅法来简化代码。它将⼤型问题分解为微⼩问题，从⽽减少了代码重构的需要。5. 避免并发问题：由于函数式编程强调不变性和纯函数的概念，这使得并发问题变得更简单。纯函数 允许并⾏运⾏，因此，当程序在不同的线程上执⾏时，它更容易保持同步。

6. 代码复⽤：由于函数是基本构建块，并且可以组合成更⾼级别的功能块，使⽤函数式编程可以更⼤ 程度上推崇代码复⽤，减少代码冗余。

函数式编程通过强调纯函数、不可变数据结构和函数组合等概念，可以提⾼代码可读性和可维护性， 降低程序bug出现的⻛险，更容易测试，并且更容易将问题分解为更容易处理的⼩部分，更好地应对并发和可扩展性。

17. 前端⽔印了解多少？【热度: 641】

明⽔印和暗⽔印的区别

前端⽔印可以分为明⽔印和暗⽔印两种类型。它们的区别如下：

1. 明⽔印：明⽔印是通过在⽂本或图像上覆盖另⼀层图像或⽂字来实现的。这种⽔印会明显地出现在 ⻚⾯上，可以⽤来显⽰版权信息或其他相关信息。

2. 暗⽔印：暗⽔印是指在⽂本或图像中隐藏相关信息的⼀种技术。这种⽔印不会直接出现在⻚⾯上， 只有在特殊的程序或⼯具下才能被检测到。暗⽔印通常⽤于保护敏感信息以及追踪⽹⻚内容的来源和版本。

添加明⽔印⼿段有哪些

可以参考这个⽂档： https://zhuanlan.zhihu.com/p/374734095

总计⼀下：

1. 重复的dom元素覆盖实现： 在⻚⾯上覆盖⼀个position:fixed的div盒⼦，盒⼦透明度设置较低，设 置pointer-events: none;样式实现点击穿透，在这个盒⼦内通过js循环⽣成⼩的⽔印div，每个⽔印 div内展⽰⼀个要显⽰的⽔印内容

2. canvas输出背景图： 绘制出⼀个⽔印区域，将这个⽔印通过toDataURL⽅法输出为⼀个图⽚，将 这个图⽚设置为盒⼦的背景图，通过backgroud-repeat：repeat；样式实现填满整个屏幕的效果。

3. svg实现背景图： 与canvas⽣成背景图的⽅法类似，只不过是⽣成背景图的⽅法换成了通过svg⽣ 成

4. 图⽚加⽔印

css 添加⽔印的⽅式， 如何防⽌⽤⼾删除对应的 css ， 从⽽达到去除⽔印的⽬的 使⽤ CSS 添加⽔印的⽅式本⾝并不能完全防⽌⽤⼾删除对应的 CSS 样式，从⽽删除⽔印。但是，可以 采取⼀些措施来增加删除难度，提⾼⽔印的防伪能⼒。以下是⼀些常⻅的⽅法：

1. 调⽤外部CSS⽂件：将⽔印样式单独设置在⼀个CSS⽂件内，并通过外链的⽅式在⽹站中调⽤，可 以避免⽤⼾通过编辑⻚⾯HTML⽂件或内嵌样式表的⽅式删除⽔印。2. 设置样式为 !important：在CSS样式中使⽤ !important 标记可以避免被覆盖。但是，这种⽅式会 影响⽹⻚的可读性，需慎重考虑。

3. 添加⾃定义类名：通过在CSS样式中加⼊⾃定义的class类名，可以防⽌⽤⼾直接删掉该类名，进⽽ 删除⽔印。但是，⽤⼾也可以通过重新定义该类名样式来替换⽔印。

4. 将⽔印样式应⽤到多个元素上：将⽔印样式应⽤到多个元素上，可以使得⽤⼾删除⽔印较为困难。

例如，在⽹站的多个位置都加上"Power by XXX"的⽔印样式。

5. 使⽤JavaScript动态⽣成CSS样式：可以监听挂载⽔印样式的dom 节点， 如果⽤⼾改变了该 dom , 重新⽣成 对应的⽔印挂载上去即可。 这种⽅法可通过JS动态⽣成CSS样式，从⽽避免⽤⼾直接在 ⽹⻚源⽂件中删除CSS代码。但需要注意的是，这种⽅案会稍稍加重⽹⻚的加载速度，需要合理权 衡。

6. 混淆CSS代码：通过多次重复使⽤同⼀样式，或者采⽤CSS压缩等混淆⼿段，可以使CSS样式表变得 复杂难懂，增加⽔印被删除的难度。

7. 采⽤图⽚⽔印的⽅式：将⽔印转化为⼀个透明的PNG图⽚，然后将其作为⽹⻚的背景图⽚，可以更 有效地防⽌⽔印被删除。

8. 使⽤SVG图形：可以将⽔印作为SVG图形嵌⼊到⽹⻚中进⾏展⽰。由于SVG的⽮量性质，这种⽅式 可以保证⽔印在缩放或旋转后的清晰度，同时也增加了删除难度。

暗⽔印是如何把⽔印信息隐藏起来的 暗⽔印的基本原理是在原始数据（如⽂本、图像等）中嵌⼊信息，从⽽实现版权保护和溯源追踪等功 能。暗⽔印把信息隐藏在源数据中，使得⼈眼难以察觉，同时对源数据的影响尽可能⼩，保持其⾃⾝ 的特征。

⼀般来说，暗⽔印算法主要包括以下⼏个步骤：

1. ⽔印信息处理：将待嵌⼊的信息经过处理和加密后，转化为⼆进制数据。

2. 源数据处理：遍历源数据中的像素或⼆进制数据，根据特定规则对其进⾏调整，以此腾出空间插⼊ ⽔印⼆进制数据。

3. 嵌⼊⽔印：将⽔印⼆进制数据插⼊到源数据中的指定位置，以某种⽅式嵌⼊到源数据之中。

4. 提取⽔印：在使⽤暗⽔印的过程中，需要从带⽔印的数据中提取出隐藏的⽔印信息。提取⽔印需要使⽤特定的解密算法和提取密钥。

暗⽔印的⼀个关键问题是在嵌⼊⽔印的过程中，要保证⽔印对源数据的伤害尽可能的⼩，同时嵌⼊⽔印后数据的分布、统计性质等不应发⽣明显变化，以更好地保持数据的质量和可视效果。

插入

很多朋友都在说前端技术更迭快，很多新技术都需要学习，之前的技术也没有掌握，当然这些肯定要分经验我给大家准备了传送门，希望能帮到大家：

1.字节3-1大佬手把手教你面试中大厂

2.阿里专家手撕高频面试题

3.阿里P8模拟面试专场

4.字节大佬分享前端面试出彩及谈薪方式

5.字节专家分享中大厂前端常见题库

以上源码笔记或者本篇PDF都可以【点击此处】

 

 

95. [Webpack] 有哪些优化项⽬的⼿段？【热度: 1,163】

围绕 webpack 做性能优化，分为两个⽅⾯： 构建时间优化 、 构建体积优化

构建时间优化

• 缩⼩范围

• ⽂件后缀

• 别名

• 缓存

• 并⾏构建

• 定向查找第三⽅模块

• 构建结果优化

◦ 压缩 js
◦ 压缩 css
◦ 压缩 html◦ 压缩图⽚
◦ 按需加载
◦ prload、prefetch
◦ 代码分割
◦ tree shaking
◦ gzip
◦ 作⽤域提升

缩⼩范围

我们在使⽤ loader 时，可以配置 include 、 exclude 缩⼩ loader 对⽂件的搜索范围，以此来提 ⾼构建速率。

像 /node_moudles ⽬录下的体积辣么⼤，⼜是第三⽅包的存储⽬录，直接 exclude 掉可以节 省⼀定的时间的。

当然 exclude 和 include 可以⼀起配置，⼤部分情况下都是只需要使⽤ loader 编译 src ⽬录下 的代码

还需注意⼀个点就是要确保 loader 的 准确性 ，⽐如不要使⽤ less-loader 去解析 css ⽂件

⽂件后缀

resolve.extensions 是我们常⽤的⼀个配置，他可以在导⼊语句没有带⽂件后缀时，可以按照 配置的列表，⾃动补上后缀。我们应该根据我们项⽬中⽂件的实际使⽤情况设置后缀列表，将使⽤频 率⾼的放在前⾯、同时后缀列表也要尽可能的少，减少没有必要的匹配。同时，我们在源码中写导⼊ 语句的时候，尽量带上后缀，避免查找匹配浪费时间。

别名

通过配置 resolve.alias 别名的⽅式，减少引⽤⽂件的路径复杂度

缓存

在优化的⽅案中，缓存也是其中重要的⼀环。在构建过程中，开启缓存提升⼆次打包速度。

在项⽬中，js ⽂件是占⼤头的，当项⽬越来越⼤时，如果每次都需要去编译 JS 代码，那么构建的速度 肯定会很慢的，所以我们可以配置 babel-loader 的缓存配置项 cacheDirectory 来缓存没有 变过的 js 代码

上⾯的缓存优化只是针对像 babel-loader 这样可以配置缓存的 loader，那没有缓存配置的

loader 该怎么使⽤缓存呢，此时需要 cache-loader

编译后同样多⼀个 /node_modules/.cache/cache-loader 缓存⽬录

当然还有⼀种⽅式， webpack5 直接提供了 cache 配置项，开启后即可缓存

编译后会多出 /node_modules/.cache/webpack 缓存⽬录 并⾏构建

⾸先，运⾏在 Node ⾥的 webpack 是单线程的，所以⼀次性只能⼲⼀件事，那如果利⽤电脑的多核 优势，也能提⾼构建速度 ？thread-loader可以开启多进程打包

由于内容很多，暂时省略。。。。

97. 浏览器的存储有哪些【热度: 814】

在浏览器中，有以下⼏种常⻅的存储⽅式：

1. Cookie：Cookie 是⼀种存储在⽤⼾浏览器中的⼩型⽂本⽂件。它可以⽤于存储少量的数据，并在 浏览器与服务器之间进⾏传输。Cookie 可以设置过期时间，可以⽤于维持⽤⼾会话、记录⽤⼾偏 好等功能。

2. Web Storage：Web Storage 是 HTML5 提供的⼀种在浏览器中进⾏本地存储的机制。它包括两种 存储⽅式：sessionStorage 和 localStorage。

◦ sessionStorage：sessionStorage ⽤于在⼀个会话期间（即在同⼀个浏览器窗⼝或标签⻚中）

存储数据。当会话结束时，存储的数据会被清除。

◦ localStorage：localStorage ⽤于持久化地存储数据，即使关闭浏览器窗⼝或标签⻚，数据仍

然存在。localStorage 中的数据需要⼿动删除或通过 JavaScript 代码清除。3. IndexedDB：IndexedDB 是⼀种⽤于在浏览器中存储⼤量结构化数据的数据库。它提供了⼀个异步 的 API，可以进⾏增删改查等数据库操作。IndexedDB 可以存储⼤量的数据，并⽀持事务操作。

4. Cache Storage：Cache Storage 是浏览器缓存的⼀部分，⽤于存储浏览器的缓存资源。它可以⽤ 来缓存⽹⻚、脚本、样式表、图像等静态资源，以提⾼⽹⻚加载速度和离线访问能⼒。

5. Web SQL Database：Web SQL Database 是⼀种已被废弃但仍被⼀些浏览器⽀持的关系型数据 库。它使⽤ SQL 语⾔来进⾏数据操作，可以存储⼤量的结构化数据。

追问：service worker 存储的内容是放在 哪⼉的？

Service Worker 可以利⽤ Cache API 和 IndexedDB API 进⾏存储。具体来说：

1. Cache API：Service Worker 可以使⽤ Cache API 将请求的响应存储在浏览器的 Cache Storage 中。Cache Storage 是浏览器的⼀部分，⽤于存储缓存的资源。通过 Cache API，Service Worker 可以将⽹⻚、脚本、样式表、图像等静态资源缓存起来，以提⾼⽹⻚加载速度和离线访问能⼒。

2. IndexedDB API：Service Worker 还可以利⽤ IndexedDB API 在浏览器中创建和管理数据库。

IndexedDB 是⼀种⽤于存储⼤量结构化数据的数据库，Service Worker 可以通过 IndexedDB API 进⾏数据的增删改查操作。通过 IndexedDB，Service Worker 可以将⼤量的数据进⾏持久化存 储，以便在离线状态下仍然能够访问和操作数据。

Service Worker 存储的内容并不是放在普通的浏览器缓存或本地数据库中，⽽是放在 Service Worker 的全局作⽤域中。Service Worker 运⾏在独⽴的线程中，与浏览器主线程分离，因此能够独⽴地处理 ⽹络请求和数据存储，提供了⼀种强⼤的离线访问和缓存能⼒。

103. 全局样式命名冲突和样式覆盖问题怎么解决？【热度: 772】

在前端开发过程中，有⼏种常⻅的⽅法可以解决全局样式命名冲突和样式覆盖问题：

1. 使⽤命名空间（Namespacing）：给样式类名添加前缀或命名空间，以确保每个组件的样式类名不 会冲突。例如，在⼀个项⽬中，可以为每个组件的样式类名都添加⼀个唯⼀的前缀，例 如 .componentA-button 和 .componentB-button ，这样可以避免命名冲突。

2. 使⽤BEM命名规范：BEM（块、元素、修饰符）是⼀种常⽤的命名规范，可以将样式类名分成块 （block）、元素（element）和修饰符（modifier）三个部分，以确保样式的唯⼀性和可读性。

例如， .button 表⽰⼀个块， .button__icon 表⽰⼀个元素， .button--disabled 表 ⽰⼀个修饰符。

3. 使⽤CSS预处理器：CSS预处理器（如Sass、Less）可以提供变量、嵌套规则和模块化等功能，可 以更⽅便地管理样式并避免命名冲突。例如，可以使⽤变量来定义颜⾊和尺⼨，使⽤嵌套规则来组 织样式，并将样式拆分成多个模块。

4. 使⽤CSS模块：CSS模块提供了在组件级别上限定样式作⽤域的能⼒，从⽽避免了全局样式的冲突 和覆盖。每个组件的样式定义在组件内部，使⽤唯⼀的类名，确保样式的隔离性和唯⼀性。

5. 使⽤CSS-in-JS解决⽅案：CSS-in-JS是⼀种将CSS样式直接写⼊JavaScript代码中的⽅法，通过将 样式与组件绑定，可以避免全局样式的冲突问题。⼀些常⻅的CSS-in-JS解决⽅案包括Styled Components、Emotion和CSS Modules with React等。

结尾

今天就到此结束了，由于整篇PDF很多，只发了部分出来，觉得有帮助可以【点击此处】