面试

1. 什么是 WeakSet WeakSet 结构与 Set 类似，也是不重复的值的集合，具备 WeakSet.prototype.add(value) ：向 WeakSet 实例添加一个新成员。 WeakSet.prototype.delete(value) ：清除 WeakSet 实例的指定成员。 WeakSet.prototype.has(value) ：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。 这三个方法。但是，它与 Set 有两个区别。 区别一：WeakSet 的成员只能是对象和Symbol类型，而不能是其他类型的值，我们用代码演示一下 从代码中可以看到，想像Set一样直接往 WeakSet 中添加原始类型化会报错，只能添加对象和Symbol 区别二(这是核心)： WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中。 （这句解释来自ECMAScript 6 入门,第一眼看到这句话这话会觉得有点晦涩，我们来解释一下） 弱引用：垃圾回收机制有一套自己的回收算法，我们都知道一个函数执行完成后该函数在调用栈中创建的执行上下文会被销毁，这里说的销毁，其实指的就是执行上下文中环境变量、词法变量中的数据存储所占据的内存空间被垃圾回收机制所回收，那么垃圾回收机制不考虑 WeakSet 对该对象的引用是不是就意味着垃圾回收机制不会回收 WeakSet 对象里面的数据所占据的内存呢？不！不是的！代码是最好的解释 我们用 ws 中存放一个对象，然后再将该对象置为null，（这里要说明一下，一个变量被置为null，就意味着这个变量的内存可以被回收了）看着这个打印结果有没有突然明白了点什么，对！没错！只要 WeakSet 结构中的对象不再需要被引用，那么 WeakSet 就直接为空了，这不就意味着WeakSet中的数据所占据的内存被释放了吗。好的，你或许还会有疑问，难道不用 WeakSet 存储数据，结果就不是这样的吗，来打消你的疑虑 不使用 WeakSet 存放数据，当变量obj为null时，fistName依旧是有值的，对比这段代码，我们可以清晰的看出, WeakSet中 - 垃圾回收机制会自动回收该对象所占用的内存 2. 这里有’BUG' 可能已经有小伙伴拔出了他40米长的大剑了，上图二中的代码其实有问题，真实的打印应该是 各位手中的长剑收一收，先别急，其实我们前面聊的没有问题，为什么这里真是打印能出来结果呢？这个问题在国外某技术论坛上也是一度出现在 WeakSet 话题榜首位，解释为：因为浏览器的垃圾回收机制是不受我们控制的，我们无法知道垃圾回收机制什么时候执行，之所以打印能出现内容，其实是因为打印的时候垃圾回收机制没有启动。所以我们可以认为，上图二中的打印在垃圾回收启动之后，它就是空的 我们可以这样来证明它: 如果这样你觉得依旧不够睡服你自己的话，我们把这段代码搬到node中： ...

浏览器中的JavaScript程序是典型的事件驱动型程序，即它们会等待用户触发后才真正的执行，而基于的JavaScript的服务器通常要等待客户端通过网络发送请求，然后才能执行。这种异步编程在JavaScript是很常见的，下面就来介绍几个异步编程的重要特性，它们可以使编写异步代码更容易。 本文将按照异步编程方式的出现时间来归纳整理： 一、什么是异步 下面先来看看同步和异步的概念： 同步： 在执行某段代码时，在没有得到返回结果之前，其他代码暂时是无法执行的，但是一旦执行完成拿到返回值，即可执行其他代码。也就是说，在此段代码执行完未返回结果之前，会阻塞之后的代码执行，这样的情况称为同步。 异步： 当某一代码执行异步过程调用发出后，这段代码不会立刻得到返回结果。而是在异步调用发出之后，一般通过回调函数处理这个调用之后拿到结果。异步调用发出后，不会影响阻塞后面的代码执行，这样的情况称为异步。 下面来看一个例子： // 同步 function syncAdd(a, b) { return a + b; } syncAdd(1, 2) // 立即得到结果：3 // 异步 function asyncAdd(a, b) { setTimeout(function() { console.log(a + b); }, 1000) } asyncAdd(1, 2) // 1s后打印结果：3 这里定义了同步函数 syncAdd 和异步函数 asyncAdd，调用 syncAdd(1, 2) 函数时会等待得到结果之后再执行后面的代码。而调用 asyncAdd(1, 2) 时则会在得到结果之前继续执行，直到 1 秒后得到结果并打印。 我们知道，JavaScript 是单线程的，如果代码同步执行，就可能会造成阻塞；而如果使用异步则不会阻塞，不需要等待异步代码执行的返回结果，可以继续执行该异步任务之后的代码逻辑。因此，在 JavaScript 编程中，会大量使用异步。 那为什么单线程的JavaScript还能实现异步呢，其实也没有什么魔法，只是把一些操作交给了其他线程处理，然后采用了事件循环的机制来处理返回结果。 二、回调函数 在最基本的层面上，JavaScript的异步编程式通过回调实现的。回调的是函数，可以传给其他函数，而其他函数会在满足某个条件时调用这个函数。下面就来看看常见的不同形式的基于回调的异步编程。 1. 定时器 一种最简单的异步操作就是在一定时间之后运行某些代码。如下面代码： setTimeout(asyncAdd(1, 2), 8000) setTimeout()方法的第一个参数是一个函数，第二个参数是以毫秒为单位的时间间隔。asyncAdd()方法可能是一个回调函数，而setTimeout()方法就是注册回调函数的函数。它还代指在什么异步条件下调用回调函数。setTimeout()方法只会调用一次回调函数。 2. 事件监听 给目标 DOM 绑定一个监听函数，用的最多的是 addEventListener： document.getElementById('#myDiv').addEventListener('click', (e) => { console.log('我被点击了') }, false); 通过给 id 为 myDiv 的一个元素绑定了点击事件的监听函数，把任务的执行时机推迟到了点击这个动作发生时。此时，任务的执行顺序与代码的编写顺序无关，只与点击事件有没有被触发有关。 ...

在Objective-C底层原理-NSObject文章中，我们深入了解了Objective-C对象的底层实现。本文将探讨Swift中类和结构体的底层原理。 Swift数据结构的分类 Swift中的类根据是否继承自NSObject，在底层实现上存在显著差异： 继承自NSObject的Swift类：兼容Objective-C运行时，支持完整的Objective-C特性 纯Swift类：使用Swift原生运行时，性能更优但Objective-C互操作性受限 Swift中结构体是值类型，具有以下核心特征： 栈上分配内存（非逃逸情况） 值语义和完整拷贝 写时拷贝优化（COW） 静态方法派发 Swift类的底层实现 继承自NSObject的Swift类 当Swift类继承自NSObject时，必须兼容Objective-C的运行时系统，其底层实现与Objective-C对象高度一致。 内存布局 class Class: NSObject { var name: String var isMale: Bool var age: Int init(name: String, isMale: Bool, age: Int) { self.name = name self.isMale = isMale self.age = age super.init() } } 实例内存布局： 偏移量 内容 大小 说明 0x0-0x7 isa_t isa 8字节 指向类对象，包含优化的位域信息 0x8-0x17 String name 16字节 Swift String结构（64位系统） 0x18 Bool isMale 1字节 布尔值 0x19-0x1F (padding) 7字节 Swift编译器根据下一个字段（Int，8字节对齐要求）自动插入填充，确保Int字段从8的倍数地址开始 0x20-0x27 Int age 8字节 64位整数 0x28-0x2F (padding) 8字节 最终内存对齐填充 关键特性： ...

系列第一篇把 OpenClaw 的架构地图摊开，第二篇深入 Gateway 控制平面。这一篇，我们钻进整个项目的心脏——src/agents/，看 OpenClaw 怎么处理最复杂的一件事：当 Gateway 接到一条用户消息之后，怎么把它变成一轮真正的 LLM turn + Tool 循环。 这一层代码的体量和复杂度非常惊人： src/agents/pi-embedded-runner/run.ts 单文件 2160 行，是整个 agent 循环的驱动器。 src/agents/pi-embedded-runner/compact.ts 1148 行，专门处理上下文压缩。 整个 src/agents/ 目录有 830+ 个文件，光 anthropic-*.ts 就有近 20 个（为了 Messages API 的各种 edge case）。 同时支持 Anthropic、OpenAI、Google Gemini、Bedrock、Vertex、OpenRouter、Z.AI/GLM、MiniMax、Qwen、Ollama、Kilocode 等十多个 provider。 但这些"量"的背后，是一个只有一个接口的核心抽象：AgentHarness。本文就从这个抽象出发，一路看到 2160 行循环如何处置真实世界里十几类失败。 一、Harness 抽象：只有一个 runAttempt 1. 为什么不用 LangChain 风格的"Agent Framework" 读过 LangChain 或 CrewAI 的人第一眼会期望看到 AgentExecutor、AgentChain、Memory、Callback、Tool 这些类。OpenClaw 里一个都没有。 它的选择是：把整个 agent 循环当成一个黑盒，对外只暴露一个接口： export type AgentHarness = { id: string; label: string; pluginId?: string; supports(ctx: AgentHarnessSupportContext): AgentHarnessSupport; runAttempt(params: AgentHarnessAttemptParams): Promise<AgentHarnessAttemptResult>; compact?(params: AgentHarnessCompactParams): Promise<AgentHarnessCompactResult | undefined>; reset?(params: AgentHarnessResetParams): Promise<void> | void; dispose?(): Promise<void> | void; }; 五个方法，其中三个可选： ...

状态管理是一个前端界老生常谈的话题了，所有前端框架的发展历程中都离不开状态管理的迭代与更替，对于react来说呢，整个状态管理的发展也随着react架构的变更和新特性的加入而不停的做调整，作为一个一起伴随react成长了快5年的开发者，经历过reflux、redux、mobx，以及其他redux衍生方案dva、mirror、rematch等等后，我觉得它们都不是我想要的状态管理的终极形态，所以为了打造一个和react结合得最优雅、使用起来最简单、运行起来最高效的状态管理方案，踏上了追梦旅途。 为何需要状态管理 为何需要在前端引用里引入状态管理，基本上大家都达成了共识，在此我总结为3点： 随着应用的规模越来越大，功能越来越复杂，组件的抽象粒度会越来越细，在视图中组合起来后层级也会越来越深，能够方便的跨组件共享状态成为迫切的需求。 状态也需要按模块切分，状态的变更逻辑背后其实就是我们的业务逻辑，将其抽离出来能够彻底解耦ui和业务，有利于逻辑复用，以及持续的维护和迭代。 状态如果能够被集中的管理起来，并合理的派发有利于组件按需更新，缩小渲染范围，从而提高渲染性能 已有状态管理方案现状 redux 遵循react不可变思路的状态管理方案，无论从git的star排名还是社区的繁荣度，首推的一定是redux这个react界状态管理一哥，约束使用唯一路径reducer纯函数去修改store的数据，从而达到整个应用的状态流转清晰、可追溯。 image.png mbox 遵循响应式的后期之秀mbox，提出了computed、reaction的概念，其官方的口号就是任何可以从应用程序状态派生的内容都应该派生出来，通过将原始的普通json对象转变为可观察对象，我们可以直接修改状态，mbox会自动驱动ui渲染更新，因其响应式的理念和vue很相近，在react里搭配mobx-react使用后，很多人戏称mobx是一个将react变成了类vue开发体验的状态管理方案。 image.png 当然因为mbox操作数据很方便，不满足大型应用里对状态流转路径清晰可追溯的诉求，为了约束用户的更新行为，配套出了一个mobx-state-tree，总而言之，mobx成为了响应式的代表。 其他 剩下的状态管理方案，主要有3类。 一类是不满足redux代码冗余啰嗦，接口不够友好等缺点，进而在redux之上做2次封装，典型的代表国外的有如rematch，国内有如dva、mirror等，我将它们称为redux衍生的家族作品，或者是解读了redux源码，整合自己的思路重新设计一个库，如final-state、retalk、hydux等，我将它们称为类redux作品。 一类是走响应式道路的方案，和mobx一样，劫持普通状态对象转变为可观察对象，如dob，我将它们称为类mobx作品。 剩下的就是利用react context api或者最新的hook特性，主打轻量，上手简单，概念少的方案，如unstated-next，reactn、smox、react-model等。 我心中的理想方案 上述相关的各种方案，都各自在一定程度上能满足我们的需求，但是对于追求完美的水瓶座程序猿，我觉得它们终究都不是我理想的方案，它们或小而美、或大而全，但还是不够强，不够友好，所以决定开始自研状态管理方案。 我知道小和 美、全、强本身是相冲突的，我能接受一定量的大，gzip后10kb到20kb都是我接受的范围，在此基础上，去逐步地实现美、全、强，以便达到以下目的，从而体现出和现有状态管理框架的差异性、优越性。 让新手使用的时候，无需了解新的特性api，无感知状态管理的存在，使其遁于无形之中，仅按照react的思路组织代码，就能享受到状态管理带来的福利。 让老手可以结合对状态管理的已有认知来使用新提供的特性api，还原各种社区公认的最佳实践，同时还能向上继续探索和提炼，挖掘状态管理带来的更多收益。 在react有了hook特性之后，让class组件和function组件都能够享有一致的思路、一致的api接入状态管理，不产生割裂感。 在保持以上3点的基础上，让用户能够使用更精简且更符合思维直觉的组织方式书写代码，同时还能够获得巨大的性能提升收益。 为了达成以上目标，立项concent，将其定义为一个可预测、零入侵、渐进式、高性能的增强型状态管理方案，期待能把他打磨成为一个真真实实让用户用起来感觉到美丽、全面、强大的框架。 说人话就是：理解起来够简单、代码写起来够优雅、工程架构起来够健壮、性能用起来够卓越…… ^_^ concent.png 可预测 react是一个基于pull based来做变化侦测的ui框架，对于用户来说，需要显式的调用setState来让react感知到状态变化，所以concent遵循react经典的不可变原则来体现可预测，不使用劫持对象将转变为可观察对象的方式来感知状态变化（要不然又成为了一个类mobx……）, 也不使用时全局pub&sub的模式来驱动相关视图更新，同时还要配置各种reselect、redux-saga等中间件来解决计算缓存、异步action等等问题（如果这样，岂不是又迈向了一个redux全家桶轮子的不归路….. ） 吐槽一下：redux粗放的订阅粒度在组件越来越多，状态越来越复杂的时候，经常因为组件订阅了不需要的数据而造成冗余更新，而且各种手写mapXXXToYYY很烦啊有木有啊有木有，伤不起啊伤不起…… 零入侵 上面提到了期望新手仅按照react的思路组织代码，就能够享受到状态管理带来的福利，所以必然只能在setState之上做文章，其实我们可以把setState当做一个下达渲染指令重要入口（除此之外，还有forceUpdate）。 setState，下达更新指令 仔细看看上图，有没有发现有什么描述不太准确的地方，我们看看官方的setState函数签名描述: 代码语言：txt AI代码解释 setState<K extends keyof S>( state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null), callback?: () => void ): void; 通过签名描述，我们可以看出传递给setState的是一个部分状态(片段状态)，实际上我们在调用setState也是经常这么做的，修改了谁就传递对应的stateKey和值。 ...

1、什么是延迟呢？ 延迟其实就是我们在网页浏览或者使用应用时，从我们点击请求到服务器返回结果给我们之间的时间差。就像你在跟朋友打电话，你说完话后，朋友听到并回应你所说话的时间差一样。 我们的最终目标是创建一个系统，让这个时间差变得尽可能短，也就是实现零延迟。但现实世界中，有各种各样的问题会导致系统出现延迟。如果系统的延迟很低，那么我们请求得到响应的时间就会很短。每次你在浏览器中输入网址或者点击一个链接，浏览器都会向服务器发出一个请求信号，然后服务器需要处理这个请求，获取需要的信息，最后把这些信息返回给你的浏览器。整个过程中就会有一些时间差，这就是延迟。所以，我们要不断努力降低延迟，提高系统的响应速度。 2、延迟是怎么回事呢？ 延迟其实就是你在请求后需要等待的时间，就像等待快递送到家门一样。来看个例子，更容易理解它是怎么运作的。 想象你正在和一个电子商务网站（比如淘宝）互动，你喜欢一个商品，然后把它加入购物车。现在，当你点击“添加到购物车”按钮时，下面的事情会依次发生： 你点击了“添加到购物车”按钮，这时就像你启动了一个计时器，浏览器开始向服务器发请求。 服务器收到请求，然后开始处理它，就像你的快递订单到了快递中心一样。 服务器处理完后，回应你的请求，信息到达你的浏览器，商品成功添加到购物车中，就像你的包裹送到了家门口一样。 你可以想象在第一步按下了计时器的启动按钮，然后在最后一步停下，这段时间就是延迟。希望这个例子能让你更容易理解延迟是如何运作的。 3、延迟都是怎么来的呢？ 现在，你应该已经理解了要点，但是你知道是什么造成了延迟吗？网络中的延迟受多种因素影响，它们在确定延迟的具体数值时扮演着关键角色。其中一个主要因素是出站呼叫。回到之前添加购物车的例子，当你点击浏览器上的按钮时，请求会发送到后端的某个服务器，这个服务器可能会在内部调用多个服务来进行计算（可能是同时或者按顺序），然后等待它们的响应或将它们汇总。所有这些因素都会增加呼叫的延迟。但总结起来，主要由以下几个因素引起： 传输介质： 传输介质指的是信息在起点和终点之间的物理路径。系统的延迟会取决于用于传输请求的介质类型。广域网、光纤电缆等传输介质都广泛应用，但每种介质都有自己的限制，这会影响延迟。 传播延迟： 这指的是数据包从一个源传播到另一个源所需的时间。系统的延迟很大程度上取决于通信节点之间的距离。节点距离越远，系统的延迟就会越高。 路由器： 路由器在通信中扮演着重要的角色，它们需要一些时间来分析数据包的标头信息。延迟取决于路由器处理请求的效率。每一次路由器到路由器的跳跃都会增加系统的延迟。 存储延迟： 系统的延迟还受到所使用的存储系统类型的影响，因为处理和返回数据可能需要一些时间。因此，访问存储中的数据会增加系统的延迟。 4、如何测量延迟？ 要量化延迟其实很简单，我们有几种常用的方法，让我们来看看最常见的三种： Ping（网络探测）： Ping是测量延迟最常用的工具之一。它的原理是向目标地址发送一个小数据包，然后查看接收到响应所需的时间。更快的Ping意味着连接更敏捷，响应更迅速。 Traceroute（路径跟踪）： Traceroute是另一个用于测试延迟的工具。它也使用数据包，但不止如此，它还会逐一记录数据包从源到目的地经过的每个中间节点所需的时间。这有助于识别网络中的延迟点。 MTR（网络诊断工具）： MTR是Ping和Traceroute的超级组合。MTR提供了详尽的报告，列出了从一个端点到另一个端点所需的每个网络节点的信息。这份报告通常包括了各种细节，比如丢包率、平均延迟等，非常有助于分析网络性能。 5、延迟优化 延迟是系统性能的绊脚石，所以我们需要采取一些措施来进行优化。下面是一些简单又实用的方法，可以帮助我们减少延迟： 采用HTTP/2： 使用HTTP/2协议可以显著减少延迟。它支持并行传输，最大程度地减少了数据从发送方到接收方的往返次数，这对于降低延迟非常有效。 减少外部HTTP请求： 第三方服务会增加延迟。通过减少外部HTTP请求的数量，我们可以提高系统的响应速度和质量。 使用CDN： 内容分发网络（CDN）被证明能够减少延迟。CDN会在全球多个位置缓存资源，从而减少请求和响应的传输时间。这意味着可以从更接近客户端的缓存位置获取请求，而不必每次都回到原始服务器。 浏览器缓存： 利用浏览器缓存，可以减少向服务器发送的请求次数，从而降低延迟。浏览器会在本地缓存特定资源，这对于提高页面加载速度很有帮助。 优化磁盘I/O： 为了减小磁盘I/O的影响，我们需要优化算法，尽量减少频繁的磁盘写入操作。可以考虑使用直写式缓存、内存数据库，或者在适当的情况下进行写入合并，还可以考虑使用快速存储系统，比如SSD。 作为开发人员，我们还可以在应用程序级别采取一些方法来优化延迟： 避免低效算法： 高效的算法是代码中延迟的主要来源之一。要尽量避免不必要的循环或昂贵的嵌套操作。 避免锁定的设计模式： 锁定会引入延迟，因此我们应该采用避免锁定的设计模式，特别是在多线程环境中。 采用异步编程模型： 异步编程可以更好地利用硬件资源，因为它避免了阻塞操作，从而减少等待时间。 限制无界队列深度： 限制无界队列深度并提供反压通常可以减少代码中的等待时间，从而产生更可预测的延迟。 这些方法可以帮助我们优化延迟，提高系统性能，让用户获得更好的体验。 常见考点 在前端面试中，网络延迟和丢包是评估你对网络传输、性能瓶颈及应对策略理解的重要考点。面试官会通过这些话题判断能否从网络层面分析问题、优化用户体验，特别是在弱网环境、移动端场景下。 一、网络延迟的考点 1. 网络延迟的构成 面试官可能会问：“用户输入 URL 后，请求延迟可能发生在哪些阶段？” 阶段 含义 DNS 解析 域名 → IP 地址 TCP 建立连接 三次握手耗时 TLS 握手 HTTPS 建立安全连接耗时 请求发送 客户端发送数据 首字节返回 TTFB 服务端处理 + 网络传输 内容下载 响应内容下载耗时 渲染耗时 浏览器解析和绘制页面 2. 常见影响网络延迟的因素 地域距离：客户端与服务端物理距离大（如中国访问美国服务器） DNS 缓存未命中或 DNS 配置不合理 TLS 握手过长（HTTPS 开销） 带宽瓶颈：文件过大、网络拥堵 长连接未复用（未启用 HTTP/2） 移动网络抖动高（4G/5G 网络波动） 首包延迟（TTFB 过高） 3. 如何优化延迟？ 启用 CDN，部署全球节点，减少 RTT 启用 DNS 预解析：<link rel="dns-prefetch"> 启用 HTTP/2 或 HTTP/3，减少连接耗时 减少重定向跳转、合并请求 使用 preconnect、prefetch 提前连接目标源 SSR 提前输出首屏 HTML，减少白屏 缓存优化（减少服务端响应压力） 二、丢包的考点 1. 丢包的本质 网络传输中，部分数据包因链路拥堵、信号弱、硬件丢包率高等原因，未能到达目的地。 ...

什么是代码分割 代码分割是一种将代码分割成多个小块的方式，然后按需加载或并行加载所需的块的技术。代码分割可以用于减少应用程序的初始加载时间或将代码切割成可按需加载的块，从而减少应用程序所需的总体代码量。 为什么要使用代码分割 在大型应用程序中，将所有代码放在一个文件中会导致应用程序加载时间过长，影响用户体验。为了解决这个问题，我们需要将代码分割成小块，然后按需加载或并行加载所需的块。 代码分割的方式 1. 动态导入 import import()是 JavaScript 中的一个动态导入语法，它允许在运行时异步加载模块。它返回一个 Promise，该 Promise 在模块加载完成后被解析为一个包含导出内容的模块对象。 使用 import()的语法如下： import(modulePath) .then((module) => { // 使用导入的模块 }) .catch((error) => { // 处理错误 }); 在这个语法中，modulePath 是一个字符串，用于指定要加载的模块路径。它可以是相对路径或绝对路径，也可以是一个包名。 当调用 import(modulePath)时，它会返回一个 Promise。这个 Promise 会在模块加载完成后被解析为一个包含导出内容的模块对象。你可以使用.then()方法来处理解析后的模块对象，并在其中使用导入的模块。 如果模块加载失败，Promise 会被拒绝，并触发.catch()方法中的错误处理逻辑。 注意事项 import()只能在模块的顶层作用域中使用，不能在函数内部或条件语句中使用。这是因为 import()是静态解析的，它在代码加载时就会执行，而不是在运行时。 另外，import()可以与其他语法结合使用，例如动态模块路径和对象解构。 动态模块路径： const modulePath = "./myModule"; import(modulePath) .then((module) => { // 使用导入的模块 }) .catch((error) => { // 处理错误 }); 在这个示例中，modulePath 是一个变量，它的值在运行时确定。这样可以根据需要动态加载不同的模块。 对象解构： import("./myModule") .then(({ myFunction, myVariable }) => { // 使用导入的函数和变量 myFunction(); console.log(myVariable); }) .catch((error) => { // 处理错误 }); 2. React.lazy React.lazy 是 React 16.6 版本引入的一个特性，它可以让你以动态的方式进行代码拆分（code splitting）。通过 React.lazy，你可以延迟加载（lazy load）一个组件，只有在需要时才会加载该组件，从而提高应用程序的性能。 React.lazy 的用法如下： ...

HTML 的实体字符（HTML Entities）是用于显示某些特殊字符或符号的编码形式。 HTML 中某些符号具有特殊含义，例如 <, >, & 等字符不能直接在网页内容中使用，所以需要使用实体字符来表示它们。 常见的 HTML 实体字符 空格和控制字符 &nbsp;：空格字符 (non-breaking space) &nbsp; <!-- 表示一个空格 --> &lt;：小于号 < &lt;div&gt; <!-- 表示 <div> --> &gt;：大于号 > &gt;/div&gt; <!-- 表示 </div> --> &amp;：与符号 & &amp; <!-- 表示 & --> &quot;：双引号 " &quot;Hello&quot; <!-- 表示 "Hello" --> &apos;：单引号 ' &apos;Hello&apos; <!-- 表示 'Hello' --> 数学符号 &plus;：加号 + &minus;：减号 − &times;：乘号 × &divide;：除号 ÷ 货币符号 &dollar;：美元符号 $ &euro;：欧元符号 € &pound;：英镑符号 £ &yen;：日元符号 ¥ 其他常见符号 &copy;：版权符号 © &reg;：注册商标符号 ® &trade;：商标符号 ™ &sect;：章节符号 § &deg;：度数符号 ° 希腊字母 &alpha;：α &beta;：β &gamma;：γ &delta;：δ 为什么需要实体字符？ 避免 HTML 解析冲突：例如 <, >, & 等符号在 HTML 中有特定的用途，用实体字符可以避免冲突。 显示特殊符号：例如版权符号、商标符号或货币符号等，不能直接在键盘上输入，使用实体字符可以确保正确显示。 常见考点 1. HTML 实体字符的定义与作用 什么是 HTML 实体字符？为什么需要使用它们？ 实体字符用于在 HTML 中显示特殊符号（如 <, >, &, " 等）或不可见字符（如空格 、换行符等），避免与 HTML 语法冲突。 2. 常见的 HTML 实体字符 &lt;：小于号 < &gt;：大于号 > &amp;：与符号 & &quot;：双引号 " &apos;：单引号 ' &nbsp;：不间断空格 3. Unicode 和 ASCII 编码的实体字符 HTML 支持通过 &#xNNNN;（十六进制）或 &#NNNN;（十进制）表示 Unicode 字符。例如： &#x2665; 或 &#9829; 表示 ♥ 考察点可能涉及通过实体字符显示 Unicode 表情符号、语言字符等。 4. 转义字符 在 HTML 中如何使用实体字符进行转义？ 为什么需要转义符号（如 <, >, &）？特别是在 HTML 元素内嵌 JavaScript 或样式时需要避免歧义。 安全性方面的考量，尤其是防止 XSS（跨站脚本攻击）。 5. 空白字符 &nbsp;（不间断空格）：防止自动换行或保留多个空格。 &ensp; 和 **&emsp;**：半角和全角空格符号。 实体空白符在排版和布局中的应用（如对齐、占位）。 6. 其他常见实体字符 货币符号：如 &yen;（¥）、&euro;（€）。 数学符号：如 &plusmn;（±）、&times;（×）、&divide;（÷）。 特殊符号：如 &copy;（©）、&reg;（®）、&trade;（™）。 7. HTML5 实体字符扩展 HTML5 中新增的一些实体字符，如： **&le;**（≤）和 &ge;（≥） &bull;（•）用于列表符号 &hellip;（…）省略号 8. 实体字符与浏览器兼容性 浏览器如何处理不支持的实体字符？ 考察点可能涉及浏览器对不同编码的支持，以及如何确保兼容性。 9. HTML 实体字符与国际化 如何通过实体字符支持多语言文本？ 考察 Unicode 与实体字符在国际化中的应用，如如何使用实体字符表示非 ASCII 字符。 10. HTML 实体字符在输入表单中的应用 在表单中，如何防止特殊字符输入导致 HTML 注入攻击？ 使用实体字符保护表单数据的完整性和安全性。

说起CSS单位，我们最熟悉的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性。CSS中单位的形式有很多种，下面就分别来看看这些单位。 1. 相对单位 相对单位就是相对于另一个长度的长度。CSS中的相对单位主要分为两大类： 字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、rem、ex、ch； 视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有vw、vh、vmax、vmin。 下面就来看看这些常见的CSS单位。 （1）em 和 rem em是最常见的相对长度单位，适合基于特定的字号进行排版。根据CSS的规定，1em 等于元素的font-size属性的值。 em 是相对于父元素的字体大小进行计算的。如果当前对行内文本的字体尺寸未进行显示设置，则相对于浏览器的默认字体尺寸。当DOM元素嵌套加深时，并且同时给很多层级显式的设置了font-size的值的单位是em，那么就需要层层计算，复杂度会很高。 当然，上面的这个说法是不严谨 的。来看一个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .parent { width: 300px; height: 300px; font-size: 20px; } .child { border: 1em solid ; } </style> </head> <body> <div class="parent"> <div class="child"> 子元素 </div> </div> </body> </html> 这里给父元素设置了字体大小为20px，然后给子元素的border宽度设置为1em，这时，子元素的border值为20px，确实是相对于父元素的字体大小设置的： 那如果我们给子元素的字体设置为30px： .child { font-size: 30px; border: 1em solid ; } 这时可以看到，子元素的边框宽度就是30px，它是相对自己大小进行计算的： 所以，可以得出结论：如果自身元素是没有设置字体大小的，那么就会根据其父元素的字体大小作为参照去计算，如果元素本身已经设置了字体，那么就会基于自身的字体大小进行计算。 em单位除了可以作用于 font-size之外，还可以运用于其他使用长度的属性，比如border-width、width、height、margin、padding、text-shadow等。 所以，em的使用还是比较复杂的，它可能会继承任意一级父元素的字体大小。需要谨慎使用。 rem相对于em就简单了很多，它是根据页面的根元素（根元素）的字体大小来计算的。来对上面的例子进行修改： .child { font-size: 30px; border: 1rem solid ; } html { font-size: 25px; } 效果如下，可以看到，边框的长度变成了25px，它是根据根元素html的字体大小计算的： ...

1. 什么是Mixin？ 想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。 其实Mixin不是Vue专属的，可以说它是一种思想，也可以说它就是混入的意思，在很多开发框架中都实现了Mixin(混入)，我们这里主要讲解的是Vue中的Mixin。 老规矩，先看官方文档。 官方解释： 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 官方的解释通常都是晦涩难懂的，因为要专业和准确嘛！ 我们可以用我们自己容易理解的话来说说Vue中的Mixin是什么。 民间解释： 将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。 这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。其实大家也可以换一种想法，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，那么组件与组件之间还有重复部分，我们使用Mixin在抽离一遍。 2. Mixin和Vuex的区别？ 上面一点说Mixin就是一个抽离公共部分的作用。在Vue中，Vuex状态管理似乎也是做的这一件事，它也是将组件之间可能共享的数据抽离出来。两者看似一样，实则还是有细微的区别，区别如下： Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。 Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。 3. 如何使用？ 我们了解了Mixin的概念，那么如何使用它呢？这才是我们的重点。 3.1 准备工作 接下来我们的mixin就放在Vue2.x的脚手架项目中演示。 利用Vue-cli初始化一个最简单的项目： 3.1 mixin定义 定义mixin也非常简单，它就是一个对象而已，只不过这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等等。 在我们的项目src目录下新建mixin文件夹，然后新建index.js文件，该文件存放我们的mixin代码。 代码如下： // src/mixin/index.js export const mixins = { data() { return {}; }, computed: {}, created() {}, mounted() {}, methods: {}, }; 可以看到我们的mixin非常的简单，主要包含了一个Vue组件的常见的逻辑结构。 接下来让我们在mixin中简单的写点东西，代码如下： export const mixins = { data() { return { msg: "我是小猪课堂", }; }, computed: {}, created() { console.log("我是mixin中的created生命周期函数"); }, mounted() { console.log("我是mixin中的mounted生命周期函数"); }, methods: { clickMe() { console.log("我是mixin中的点击事件"); }, }, }; 3.2 局部混入 我们的公共mixin定义好后，最重要就是如何使用它。根据不同的业务场景，我们可以分为两种：局部混入和全局混入。顾名思义，局部混入和组件的按需加载有点类似，就是需要用到mixin中的代码时，我们再在组件章引入它。全局混入的话，则代表我在项目的任何组件中都可以使用mixin。 ...