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

写在前面

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

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

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

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

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

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

目录展示

1. 前端如何实现截图？

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

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

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

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

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

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

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

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

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 进⾏判断，返回不同的⻚⾯或数据。具体实现可以参考以下步骤：

根据 User-Agent 判断访问设备的类型，例如判断是否为移动设备。可以使⽤第三⽅库如 uaparser-js 进⾏ User-Agent 的解析。
如果是移动设备，可以返回⼀个 H5 ⻚⾯或接⼝数据。
如果是 PC 设备，可以返回⼀个 web 应⽤⻚⾯或接⼝数据。

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

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

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

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

性能⽅向的思考
⽤⼾线上问题反馈，线上 on call 的思考
⽤⼾使⽤体验的思考，交互体验使⽤⽅向
提升⽤⼾能效⽅向思考

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

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

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

后端优化：可以对接⼝进⾏优化，采⽤缓存技术，对数据进⾏预处理，减少数据库操作等。使⽤集群技术，将请求分散到不同的服务器上，提⾼并发量。另外可以使⽤反向代理、负载均衡等技术，分担服务器压⼒。
做 BFF 聚合：把所有⾸屏需要依赖的接⼝，利⽤服务中间层给聚合为⼀个接⼝。3. CDN加速：使⽤CDN缓存技术可以有效减少服务器请求压⼒，提⾼⽹站访问速度。CDN缓存可以将接⼝的数据存储在缓存服务器中，减少对原始服务器的访问，加速数据传输速度。
使⽤ WebSocket：使⽤ WebSocket 可以建⽴⼀个持久的连接，避免反复连接请求。WebSocket 可以实现双向通信，⼤幅降低服务器响应时间。
使⽤ HTTP2 及其以上版本，使⽤多路复⽤。
使⽤浏览器缓存技术：强缓存、协商缓存、离线缓存、Service Worker 缓存等⽅向。
聚合⼀定量的静态资源：⽐如提取⻚⾯公⽤复⽤部分代码打包到⼀个⽂件⾥⾯、对图⽚进⾏雪碧图处理，多个图⽚只下载⼀个图⽚。
采⽤微前端⼯程架构：只是对当前访问⻚⾯的静态资源进⾏下载，⽽不是下载整站静态资源。
使⽤服务端渲染技术：从服务端把⻚⾯⾸屏直接渲染好返回，就可以避免掉⾸屏需要的数据再做额外加载和执⾏。

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

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

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

Performance API：Performance API 是浏览器提供的⼀组 API，可以⽤于测量⽹⻚性能。通过 Performance API，可以获取⻚⾯各个阶段的时间、资源加载时间等。其中，Performance Timing API 可以获取到每个资源的加载时间，从⽽计算出所有请求的耗时。
XMLHttpRequest 的 load 事件：在发送 XMLHttpRequest 请求时，可以为其添加 load 事件，在请求完成时执⾏回调函数，从⽽记录请求的耗时。
fetch 的 Performance API：类似 XMLHttpRequest，fetch 也提供了 Performance API，可以通过 Performance API 获取请求耗时。
⾃定义封装的请求函数：可以⾃⼰封装⼀个请求函数，在请求开始和结束时记录时间，从⽽计算请求耗时。

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

可以遵循以下步骤：

实现⼀个性能监控模块，⽤于记录每个请求的开始时间和结束时间，并计算耗时。
在应⽤⼊⼝处引⼊该模块，将每个请求的开始时间记录下来。
在每个请求的响应拦截器中，记录响应结束时间，并计算请求耗时。
将每个请求的耗时信息发送到服务端，以便进⾏进⼀步的统计和分析。
在服务端实现数据存储和展⽰，可以使⽤图表等⽅式展⽰请求耗时情况。
对于请求耗时较⻓的接⼝，可以进⾏优化和分析，如使⽤缓存、使⽤异步加载、优化查询语句等。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之间的会话状态。

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

⽤⼾在PC端访问应⽤，并选择使⽤扫码登录⽅式。此时，应⽤⽣成⼀个随机的认证码，并将该认证码通过⼆维码的形式显⽰在PC端的⻚⾯上。
⽤⼾打开⼿机上的应⽤，并选择使⽤扫码登录⽅式。此时，应⽤会打开⼿机端的相机，⽤⼾可以对着PC端的⼆维码进⾏扫描。
⼀旦⽤⼾扫描了⼆维码，⼿机上的应⽤会向应⽤提供商的中转站发送⼀个请求，请求包含之前⽣成的随机认证码和⼿机端的⼀个会话ID。
中转站验证认证码和会话ID是否匹配，如果匹配成功，则该中转站将⽤⼾的⾝份信息发送给应⽤，并创建⼀个PC端和⼿机端之间的会话状态。
应⽤使⽤收到的⾝份信息对⽤⼾进⾏认证，并创建⼀个与该⽤⼾关联的会话状态。同时，应⽤返回⼀个通过认证的响应给中转站。6. 中转站将该响应返回给⼿机端的应⽤，并携带⼀个⽤于表⽰该会话的令牌，此时⼿机和PC之间的认证流程就完成了。
当⽤⼾在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 协议还⽀持多种其他功能：

逆向映射：将 IP 地址解析为域名。
邮件服务器设置：⽀持邮件服务器的⾃动发现和设置。
负载均衡：DNS 还可以实现简单的负载均衡，通过将相同 IP 地址的主机名映射到不同的 IP 地址来分散负载。
安全：DNSSEC（DNS Security Extensions，DNS 安全扩展）可以提供对域名解析的认证和完整性。

如何加快 DNS 的解析？

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

使⽤⾼速 DNS 服务器：默认情况下，⽹络服务提供商（ISP）为其⽤⼾提供 DNS 服务器。但是，这些服务器不⼀定是最快的，有时会出现瓶颈。如果您想加快 DNS 解析，请尝试使⽤其他⾼速 DNS 服务器，例如 Google 的公共 DNS 服务器或 OpenDNS。
缓存 DNS 记录：在本地计算机上缓存 DNS 记录可以⼤⼤加快应⽤程序的响应。当您访问特定的⽹站时，计算机会⾃动缓存该⽹站的 DNS 记录。如果您再次访问该⽹站，则计算机将使⽤缓存的DNS 记录。
减少 DNS 查找：当您访问⼀个⽹站时，您的计算机将会查找该域名的 IP 地址。如果⽹站有很多域名，则查找过程可能会变得⾮常缓慢。因此，尽可能使⽤较少的域名可以减少 DNS 查找的数量，并提⾼响应速度。
使⽤ CDN：CDN（内容分发⽹络）是⼀种将内容存储在全球多个位置的系统。这些位置通常都有专⽤的 DNS 服务器，可以⼤⼤加快站点的加载速度。
使⽤ DNS 缓存⼯具：⼀些辅助⼯具可以帮助您优化与 DNS 相关的设置，例如免费的 DNS Jumper 软件和 Namebench ⼯具，它们可以测试您的 DNS 响应时间并为您推荐最佳配置。

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

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

函数式编程的核⼼概念

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

纯函数：函数的输出只取决于输⼊，没有任何副作⽤，不会修改外部变量或状态，所以对于同样的输⼊，永远返回同样的输出值。因此，纯函数可以有效地避免副作⽤和竞态条件等问题，使得代码更加可靠、易于调试和测试。
不可变性：在函数式编程中，数据通常是不可变的，即不允许在内部进⾏修改。这样可以避免副作⽤的发⽣，提⾼代码可靠性。
函数组合：函数可以组合成复杂的函数，从⽽减少重复代码的产⽣。
⾼阶函数：⾼阶函数是指可以接收其他函数作为参数，也可以返回函数的函数。例如，函数柯⾥化和函数的组合就是⾼阶函数的应⽤场景。
惰性计算：指在必要的时候才计算（执⾏）函数，⽽不是在每个可能的执⾏路径上都执⾏，从⽽提⾼性能。

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

函数式编程的优势

函数式编程有以下优势：

易于理解和维护：函数式编程强调数据不变性和纯函数概念，可以提⾼代码的可读性和可维护性，因为它避免了按照顺序对变量进⾏修改，并强调函数⾏为的确定性。
更少的 bug：由于函数式编程强调纯函数的概念，它可以消除由于副作⽤引起的bug。因为纯函数不会修改外部状态或数据结构，只是将输⼊转换为输出。这么做有助于保持代码更加可靠。
更好的可测试性：由于纯函数不具有副作⽤，它更容易测试，因为测试数据是预测性的。
更少的重构：函数式编程使⽤函数组合和柯⾥化等⽅法来简化代码。它将⼤型问题分解为微⼩问题，从⽽减少了代码重构的需要。5. 避免并发问题：由于函数式编程强调不变性和纯函数的概念，这使得并发问题变得更简单。纯函数允许并⾏运⾏，因此，当程序在不同的线程上执⾏时，它更容易保持同步。
代码复⽤：由于函数是基本构建块，并且可以组合成更⾼级别的功能块，使⽤函数式编程可以更⼤程度上推崇代码复⽤，减少代码冗余。

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

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

明⽔印和暗⽔印的区别

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

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

添加明⽔印⼿段有哪些

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

总计⼀下：

重复的dom元素覆盖实现：在⻚⾯上覆盖⼀个position:fixed的div盒⼦，盒⼦透明度设置较低，设置pointer-events: none;样式实现点击穿透，在这个盒⼦内通过js循环⽣成⼩的⽔印div，每个⽔印 div内展⽰⼀个要显⽰的⽔印内容
canvas输出背景图：绘制出⼀个⽔印区域，将这个⽔印通过toDataURL⽅法输出为⼀个图⽚，将这个图⽚设置为盒⼦的背景图，通过backgroud-repeat：repeat；样式实现填满整个屏幕的效果。
svg实现背景图：与canvas⽣成背景图的⽅法类似，只不过是⽣成背景图的⽅法换成了通过svg⽣成
图⽚加⽔印

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

调⽤外部CSS⽂件：将⽔印样式单独设置在⼀个CSS⽂件内，并通过外链的⽅式在⽹站中调⽤，可以避免⽤⼾通过编辑⻚⾯HTML⽂件或内嵌样式表的⽅式删除⽔印。2. 设置样式为 !important：在CSS样式中使⽤ !important 标记可以避免被覆盖。但是，这种⽅式会影响⽹⻚的可读性，需慎重考虑。
添加⾃定义类名：通过在CSS样式中加⼊⾃定义的class类名，可以防⽌⽤⼾直接删掉该类名，进⽽删除⽔印。但是，⽤⼾也可以通过重新定义该类名样式来替换⽔印。
将⽔印样式应⽤到多个元素上：将⽔印样式应⽤到多个元素上，可以使得⽤⼾删除⽔印较为困难。

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

使⽤JavaScript动态⽣成CSS样式：可以监听挂载⽔印样式的dom 节点，如果⽤⼾改变了该 dom , 重新⽣成对应的⽔印挂载上去即可。这种⽅法可通过JS动态⽣成CSS样式，从⽽避免⽤⼾直接在⽹⻚源⽂件中删除CSS代码。但需要注意的是，这种⽅案会稍稍加重⽹⻚的加载速度，需要合理权衡。
混淆CSS代码：通过多次重复使⽤同⼀样式，或者采⽤CSS压缩等混淆⼿段，可以使CSS样式表变得复杂难懂，增加⽔印被删除的难度。
采⽤图⽚⽔印的⽅式：将⽔印转化为⼀个透明的PNG图⽚，然后将其作为⽹⻚的背景图⽚，可以更有效地防⽌⽔印被删除。
使⽤SVG图形：可以将⽔印作为SVG图形嵌⼊到⽹⻚中进⾏展⽰。由于SVG的⽮量性质，这种⽅式可以保证⽔印在缩放或旋转后的清晰度，同时也增加了删除难度。

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

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

⽔印信息处理：将待嵌⼊的信息经过处理和加密后，转化为⼆进制数据。
源数据处理：遍历源数据中的像素或⼆进制数据，根据特定规则对其进⾏调整，以此腾出空间插⼊⽔印⼆进制数据。
嵌⼊⽔印：将⽔印⼆进制数据插⼊到源数据中的指定位置，以某种⽅式嵌⼊到源数据之中。
提取⽔印：在使⽤暗⽔印的过程中，需要从带⽔印的数据中提取出隐藏的⽔印信息。提取⽔印需要使⽤特定的解密算法和提取密钥。

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

插入

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

以上源码笔记或者本篇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】

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

Cookie：Cookie 是⼀种存储在⽤⼾浏览器中的⼩型⽂本⽂件。它可以⽤于存储少量的数据，并在浏览器与服务器之间进⾏传输。Cookie 可以设置过期时间，可以⽤于维持⽤⼾会话、记录⽤⼾偏好等功能。
Web Storage：Web Storage 是 HTML5 提供的⼀种在浏览器中进⾏本地存储的机制。它包括两种存储⽅式：sessionStorage 和 localStorage。

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

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

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

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

Cache Storage：Cache Storage 是浏览器缓存的⼀部分，⽤于存储浏览器的缓存资源。它可以⽤来缓存⽹⻚、脚本、样式表、图像等静态资源，以提⾼⽹⻚加载速度和离线访问能⼒。
Web SQL Database：Web SQL Database 是⼀种已被废弃但仍被⼀些浏览器⽀持的关系型数据库。它使⽤ SQL 语⾔来进⾏数据操作，可以存储⼤量的结构化数据。

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

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

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

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

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

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

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

使⽤命名空间（Namespacing）：给样式类名添加前缀或命名空间，以确保每个组件的样式类名不会冲突。例如，在⼀个项⽬中，可以为每个组件的样式类名都添加⼀个唯⼀的前缀，例如 .componentA-button 和 .componentB-button ，这样可以避免命名冲突。
使⽤BEM命名规范：BEM（块、元素、修饰符）是⼀种常⽤的命名规范，可以将样式类名分成块（block）、元素（element）和修饰符（modifier）三个部分，以确保样式的唯⼀性和可读性。

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

使⽤CSS预处理器：CSS预处理器（如Sass、Less）可以提供变量、嵌套规则和模块化等功能，可以更⽅便地管理样式并避免命名冲突。例如，可以使⽤变量来定义颜⾊和尺⼨，使⽤嵌套规则来组织样式，并将样式拆分成多个模块。
使⽤CSS模块：CSS模块提供了在组件级别上限定样式作⽤域的能⼒，从⽽避免了全局样式的冲突和覆盖。每个组件的样式定义在组件内部，使⽤唯⼀的类名，确保样式的隔离性和唯⼀性。
使⽤CSS-in-JS解决⽅案：CSS-in-JS是⼀种将CSS样式直接写⼊JavaScript代码中的⽅法，通过将样式与组件绑定，可以避免全局样式的冲突问题。⼀些常⻅的CSS-in-JS解决⽅案包括Styled Components、Emotion和CSS Modules with React等。

结尾

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