在正则表达式中，字符类别（Character Classes）用于匹配一组特定类型的字符。它们用方括号 [ ] 表示，并包含在其中的字符表示可以匹配的字符范围。以下是一些常见的字符类别和它们的意义：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=33cd35fc65644702a76d37bbae441d8f[abc]：匹配 a、b 或 c 中的任何一个字符。[^abc]：匹配除了 a、b 和 c 以外的任何字符。[a-z]：匹配任何小写字母。连字符 - 表示一个范围，此处表示从 a 到 z 的字符。[A-Z]：匹配任何大写字母。[0-9]：匹配任何数字。[a-zA-Z0-9]：匹配任何字母和数字。

JavaScript 中常见的正则表达式修饰符如下：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=33cd35fc65644702a76d37bbae441d8fi（不区分大小写）：在匹配时不区分大小写。例如，/hello/i 可以匹配 "hello"、"Hello"、"HELLO" 等。g（全局匹配）：匹配字符串中所有符合条件的内容，而不只是第一个匹配项。例如，/test/g 可以匹配字符串中的所有 "test"。m（多行模式）：启用多行模式，使 ^ 和 $ 可以匹配每一行的开头和结尾（而不只是整个字符串的开头和结尾）。s（点字符匹配包括换行符在内的所有字符）：该修饰符允许点字符 . 匹配包括换行符在内的所有字符。在默认模式下，点字符不能匹配换行符。这个修饰符在 ECMAScript 2018 引入，不是所有的 JavaScript 环境都支持，所以需要注意兼容性。u（Unicode 模式）：启用 Unicode 匹配模式，用于处理 Unicode 字符。例如，/\p{Sc}/u 可以匹配任意货币符号。y（粘附修饰符）：执行粘附匹配，从上次匹配结束的位置继续匹配。这个修饰符在 ECMAScript 2015 引入，不是所有的 JavaScript 环境都支持，需要注意兼容性。这些修饰符可以和正则表达式一起使用，例如 /pattern/ig 表示一个不区分大小写且全局匹配的正则表达式。请注意，修饰符的使用需要根据具体需求和场景进行选择。有些修饰符是可选的，而有些则会影响匹配的行为。确保了解每个修饰符的含义和影响，并适当地选择和应用它们。

以下是几个常见的实现方式：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=e621978d9d234dc1bd2f6cdffa694e0e🈴🉐使用 Set 数据结构：Set 是 ES6 引入的一种数据结构，它只存储唯一的值，可以用来快速去除数组中的重复元素。🈴🉐使用 Array.prototype.filter() 方法：使用 filter() 方法结合 indexOf() 方法来筛选出不重复的元素。🈴🉐使用 Array.prototype.reduce() 方法：使用 reduce() 方法结合判断重复的对象集合来构建一个新的数组。🈴🉐使用 ES6 的 Map 数据结构：Map 类似于对象，但键可以是任意数据类型。我们可以使用 Map 来移除重复的项。以上方法都可以帮助你移除数组中的重复项，选择其中任何一种方法根据你的需求进行实现即可。

优点：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=6ba5d46dd6254d20809b2e18c249cbb9性能优化：虚拟 DOM 通过在内存中操作 JavaScript 对象表示的虚拟 DOM 树，在实际渲染到浏览器的真实 DOM 前进行 diff 算法比较，只更新差异部分，从而避免了对整个真实 DOM 树的频繁操作。这种优化可以提高性能并减少对真实 DOM 的访问次数。跨平台能力：虚拟 DOM 不仅可以在浏览器中使用，还可以在服务器端渲染（SSR）中使用。因为虚拟 DOM 是基于 JavaScript 对象的表示，它使得开发人员可以在各种环境中使用相同的编程模型，从而实现代码的复用。简化开发流程：通过使用虚拟 DOM，开发人员可以将 UI 的构建和更新逻辑与底层的 DOM 操作解耦。这样可以简化开发流程，让开发人员更专注于业务逻辑，提高开发效率。跨框架兼容性：虚拟 DOM 抽象了底层的 DOM 操作，使得它可以作为桥梁来实现与其他前端框架的兼容性。这使得开发人员能够在不同的框架之间切换或整合代码，而无需重写整个应用程序。缺点：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=6ba5d46dd6254d20809b2e18c249cbb9额外内存消耗：虚拟 DOM 需要在内存中维护一份额外的 JavaScript 对象表示，它与真实 DOM 所占用的内存相比可能会有额外的开销。但通常情况下，这些开销在现代浏览器中并不是主要问题，可以被接受。学习曲线：虚拟 DOM 的概念和使用过程需要一定的学习和理解成本。开发人员需要了解虚拟 DOM 的工作原理，并学习如何使用虚拟 DOM API 或框架提供的相关工具来创建和更新虚拟 DOM。某些场景下不必要：对于简单静态页面或只有少量交互的应用程序，虚拟 DOM 可能会显得过于复杂，不值得引入。在这些情况下，直接操作原生 DOM 可能更简单高效。

虚拟 DOM 的 diff 算法是比较新旧虚拟 DOM 树的差异，并确定需要更新的部分。它能够高效地更新 UI，并最小化对真实 DOM 的操作，从而提高性能。Diff 算法的基本思想是通过遍历新旧虚拟 DOM 树的节点，并比较它们的类型、属性和内容来找到差异。根据差异的类型，可以执行相应的操作，如添加、更新或删除节点。以下是简要的 diff 算法的步骤：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=6ba5d46dd6254d20809b2e18c249cbb9比较根节点：首先比较新旧虚拟 DOM 树的根节点，确定它们是否相同类型的节点。如果不相同，直接替换整棵树；如果相同，进入下一步。比较子节点：逐个比较新旧虚拟 DOM 树的子节点。该过程使用了两个技术：首先是"Key"算法，通过给列表中的每个元素添加唯一的标识（Key），以便更准确地找到新增、删除或移动的元素；其次是"优化"算法，通过尽量少地操作真实 DOM，如移动元素而非重新创建，从而提高性能。递归比较：对于有子节点的元素，递归地进行步骤 1 和步骤 2，以便深度比较整个树的结构。Diff 算法的核心优势是在更新过程中最小化对真实 DOM 的操作。而对真实 DOM 的直接操作是昂贵的，因为每次操作都会触发浏览器的重排和重绘。通过将更新操作批量应用，以及通过只更新变化的部分，Diff 算法能够大大减少对真实 DOM 的操作次数，从而提高性能。

虚拟 DOM 的工作原理可以概括为以下几个步骤：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=6ba5d46dd6254d20809b2e18c249cbb9初始渲染：当应用程序加载时，首先进行一次初始渲染，将虚拟 DOM 结构构建出来。虚拟 DOM 是由 JavaScript 对象构成的树形结构，它对应于真实 DOM 的层次结构。更新生成新虚拟 DOM：当应用程序的状态发生变化时（比如用户交互），需要更新 UI。这时会生成一个新的虚拟 DOM 树，新的虚拟 DOM 表示了更新后的 UI 状态。对比差异：将新的虚拟 DOM 树与之前的虚拟 DOM 树进行对比，找出两者之间的差异（即哪些节点需要被更新、添加或删除）。这个对比过程的算法被称为"Diffing"。生成更新：根据对比得出的差异，生成一个表示更新操作的"补丁"（Patch）对象。该补丁对象包含了需要修改真实 DOM 的具体操作，比如添加节点、删除节点、更新属性等。应用更新：将补丁对象应用到真实 DOM 上，即将所有的变更操作一次性地应用到真实 DOM 上，从而实现 UI 的更新。这个过程通常使用最小化 DOM 操作的方式进行，以提高性能。

虚拟 DOM（Virtual DOM）是一种用 JavaScript 对象表示真实 DOM 结构的概念。它是由 React 引入的一种优化技术，旨在提高前端应用性能和开发效率。虚拟 DOM 是一个轻量级的抽象层，它对应于真实 DOM 的结构，并且可以以一种高效的方式进行操作和更新。它包含了与真实 DOM 相同的层次结构、属性和内容信息，但它只存在于内存中，并不直接渲染到浏览器中。虚拟 DOM 的原理是通过对比前后两个虚拟 DOM 树的差异，然后将差异部分应用到真实 DOM 上，从而减少直接操作真实 DOM 的次数。这种优化可以提高性能，因为直接操作真实 DOM 是一项昂贵的操作，会导致浏览器执行大量的重排和重绘操作。https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=6ba5d46dd6254d20809b2e18c249cbb9

缓存穿透是指当一个请求查询/访问一个不存在于缓存中的数据时，该请求会穿透缓存层，直接访问后端数据库或其他数据存储系统。这可能导致对后端系统的过度负载，并且每个请求都需要从后端获取数据，无法利用缓存提供的性能优势。在前端防止缓存穿透问题的常见方法包括：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=5f0bf65b3be04ac8a2beb28f857943a6输入合法性验证：在接收到请求之前，对请求的输入进行合法性验证。例如，对于用户输入的查询参数或请求的标识符，进行验证并确保其符合预期的格式和范围。如果请求的数据不存在或无效，可以提前进行处理，返回适当的响应，而不是单纯地将请求传递到后端。布隆过滤器（Bloom Filter）：布隆过滤器是一种概率型数据结构，用于快速判断一个元素是否存在于集合中。在进行查询之前，可以使用布隆过滤器对缓存键进行检查，以过滤掉在缓存中一定不存在的键。这样可以减少对后端系统的不必要查询，同时提高缓存的命中率。缓存空值（Cache Miss）：对于请求中查询的数据，即使在后端不存在该数据，也在缓存中存储一个空值作为响应。这样，在下次查询时，可以直接从缓存中获取空值作为响应，而不需要再次查询后端系统。这种方式可以减少对后端系统的请求次数，并加快响应速度。设置热门数据的预热策略：对于一些热门的数据或常用的查询，可以在系统启动或低峰期预先将其加载到缓存中。这样可以确保这部分数据在真正被请求时已经存在于缓存中，减少缓存穿透的可能性。使用缓存层/中间件：引入缓存层或中间件作为前端和后端之间的代理，用于处理查询请求和缓存的查询结果。缓存层可以缓存不同类型的数据，并根据缓存策略和配置决定是否向后端查询数据。这样可以集中管理缓存逻辑，并提供更高效的数据访问。

ETag（Entity Tag）是一个由服务器生成的用于标识资源的唯一标识符。https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=5f0bf65b3be04ac8a2beb28f857943a6ETag 在浏览器缓存中的作用是协商缓存的一部分。当浏览器发送请求时，会将上一次请求返回的 ETag 值通过 If-None-Match 请求头字段发送给服务器。服务器使用这个值与当前资源的 ETag 进行比较，以判断资源是否发生了变化。如果服务器发现资源的 ETag 值与浏览器发送的匹配，并且资源没有发生变化，服务器会返回状态码 304 Not Modified，表示资源未修改。浏览器收到这个响应后，可以直接从缓存中获取资源，而无需重新下载。ETag 能够精确地确定资源是否发生了变化，相对于 Last-Modified（最后修改时间）来说更加准确。如果资源的内容发生了任何改变，服务器会为该资源生成新的 ETag 值，而 Last-Modified 只能以秒级别的精度表示时间，可能无法捕捉到非常小的修改。在大多数情况下，浏览器会使用 Cache-Control 和 ETag（或 Last-Modified）一起使用，以提供更精确和可靠的缓存控制。当 Cache-Control 的缓存过期策略失效时，浏览器会使用 ETag 和服务器进行协商，以便确定是否可以使用缓存的副本。如果服务器返回 304 Not Modified，浏览器就可以直接使用缓存，并避免重新下载资源。这样可以减少网络带宽的使用，并提高页面加载速度和性能。

💦Cache-Control：该响应头字段指定了资源的缓存策略。常见的值包括：max-age=：指定资源在缓存中的有效时间，单位为秒。例如，max-age=3600表示资源在缓存中有效一小时。no-cache：表示每次请求都要与服务器进行验证，不能直接使用缓存。no-store：表示不缓存任何请求或响应的内容。💦Expires：该响应头字段指定了资源的过期时间，是一个具体的日期时间。当浏览器接收到带有 Expires 响应头的资源时，会将资源缓存在本地，并在过期时间之前直接使用缓存。

当在浏览器中输入网址并按下回车键时，以下是大致的执行过程：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=02b1742be4564f04b7e1bdf3b39333d7DNS解析：浏览器首先将输入的网址发送给DNS服务器，以获取该网址对应的IP地址。DNS服务器会查询其数据库，在找到匹配的域名时返回对应的IP地址给浏览器。TCP连接建立：浏览器使用获取到的IP地址与服务器建立TCP连接。这涉及到使用TCP三次握手的过程，确保客户端与服务器之间的可靠连接。发起HTTP请求：一旦建立了TCP连接，浏览器会发送HTTP请求到服务器。请求包含请求方法（例如GET、POST）、请求的URL、HTTP版本以及其他可能的请求头信息，如用户代理、Cookie等。服务器处理请求：服务器收到HTTP请求后，会根据请求的URL和其他请求信息来处理请求。服务器可能会读取请求中的参数，查询数据库，执行相应的逻辑处理，并生成HTTP响应。HTTP响应：服务器生成完整的HTTP响应后，将其返回给浏览器。响应包括一个状态码表示请求的结果（例如200表示成功，404表示资源未找到等），响应的内容，以及其他响应头信息，如Content-Type、Content-Length等。接收和解析响应：浏览器接收到服务器的HTTP响应后，开始解析响应。它会检查状态码，根据响应头中的Content-Type确定响应内容的类型，并将响应的内容保存下来。渲染页面：如果响应的内容是HTML页面，浏览器会开始解析HTML，并构建DOM树。然后，将CSS文件加载和解析为样式规则，并将其应用于DOM树，生成渲染树。最后，浏览器使用渲染树将页面内容绘制到用户的屏幕上。关闭TCP连接：一旦页面完全加载并渲染完成，浏览器会关闭与服务器之间的TCP连接。但是，如果页面中存在其他的资源（如图片、脚本、样式表等），浏览器可能会继续发送HTTP请求获取这些资源。

TCP（传输控制协议）是一种面向连接的协议，它使用三次握手进行连接的建立，以及四次挥手进行连接的关闭。三次握手：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=02b1742be4564f04b7e1bdf3b39333d7第一步：客户端发送连接请求报文段（SYN）给服务器，并选择一个随机的初始序列号（ISN1）。第二步：服务器收到连接请求报文段后，如果同意连接，将发送确认报文段（SYN+ACK）。服务器会选择另一个随机的初始序列号（ISN2），并将其作为确认号，并将自己的初始序列号（ISN2）一起发送给客户端。第三步：客户端接收到服务器的确认报文段，会发送确认报文段（ACK），确认号设置为服务器的初始序列号加1（ISN2+1）。服务器接收到客户端的确认报文段后，连接建立成功。经过三次握手，客户端和服务器就建立了可靠的连接，可以开始进行数据传输。四次挥手：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=02b1742be4564f04b7e1bdf3b39333d7第一步：客户端发送关闭连接请求报文段（FIN）给服务器，表示不再发送数据。客户端仍可以接收服务器发送的数据。第二步：服务器收到客户端的关闭请求后，发送确认报文段（ACK）作为确认，并进入半关闭状态。服务器此时不再发送数据给客户端，但仍可以接收来自客户端的数据。第三步：当服务器不再发送数据时，会发送自己的关闭请求报文段（FIN）给客户端，表示数据发送完毕。第四步：客户端收到服务器的关闭请求后，发送确认报文段（ACK），确认服务器的关闭请求。此时客户端进入 TIME_WAIT 状态，等待一段时间后关闭连接。服务器收到客户端的确认后，关闭连接。经过四次挥手，客户端和服务器都完成了关闭连接的操作，释放了连接资源。需要注意的是，三次握手和四次挥手中的每个步骤都需要双方的确认，确保连接的可靠性和数据的完整性。这些握手和挥手过程可以保证数据在传输过程中的可靠性和有序性，确保数据能够正确地被发送和接收。

CDN代表内容分发网络（Content Delivery Network），它是一种分布式的网络架构，通过将资源存储在位于全球各地的多个服务器节点上，提供高速、可靠的内容传输服务。CDN的作用是在全球范围内缩短网络请求的距离，提高网站或应用程序的性能和可靠性。在前端性能优化中，CDN发挥了重要的作用：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=02b1742be4564f04b7e1bdf3b39333d7提供较低的延迟：由于CDN服务器位于全球各地，它们离用户更近，可以减少请求的传输时间和延迟。当用户请求一个资源时，CDN会尝试从离用户最近的节点返回资源，从而提供更快的响应时间和更好的用户体验。分担服务器负载：CDN通过将网站的静态内容（如图片、CSS、JavaScript文件等）缓存在全球各地的边缘节点上，减轻了原始服务器的负载压力。这意味着原始服务器可以更好地处理动态内容的请求，提高了网站的整体性能和可扩展性。降低带宽消耗：CDN能够在边缘节点缓存静态资源，并提供智能的缓存机制，当用户再次请求相同资源时，可以直接从缓存中获取，而不必再次向原始服务器请求。这样可以降低带宽消耗，减少网络流量，并提高整体的可用带宽。提高数据传输的可靠性：CDN通过多个服务器节点存储资源的副本，提供冗余和容错机制，可以提高数据传输的可靠性。即使某个节点出现故障，其他节点仍然可以提供服务，不会影响用户的访问体验。

浏览器缓存是浏览器在本地存储Web资源（如HTML文件、CSS样式表、JavaScript脚本、图像等）的副本，以便在之后的页面访问中能够直接从本地获取这些资源，而无需再次从服务器下载。浏览器缓存可以提供以下优点和在以下场景下使用：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=02b1742be4564f04b7e1bdf3b39333d7提高性能：浏览器缓存能够显著提高网页加载速度。当浏览器首次访问一个网页时，它会下载并缓存其中的资源。在之后的访问中，如果资源未发生变化，则可以直接从缓存中读取，减少了网络请求和等待时间，提高了页面加载速度。减少网络流量：通过使用浏览器缓存，可以减少对服务器的请求次数和相应的网络流量。对于重复访问相同页面的用户，他们可以从缓存中获取资源，而无需再次下载。这对于移动设备以及网络速度较慢的情况下特别有益，可以减少数据传输量，降低用户流量消耗和延迟。降低服务器负载：如果浏览器从缓存中获取资源，而不是向服务器发送请求，那么服务器的负载将减少。这可以使服务器更有效地处理其他请求，并减少响应时间和带宽消耗。支持离线浏览：某些Web应用或网页可以利用浏览器缓存来实现离线浏览功能。一旦页面及其所需的资源被缓存在本地，用户在离线状态下仍然可以访问和浏览该页面。