小秀的博客

SSE 以文本流格式发送数据，每个事件由data: ...构成，以空行分隔。不支持直接发送 JSON、二进制，要先序列化成字符串。JSON 用，二进制用 Base64。封装思路：前端封装一个SSEClient（自动 JSON 解析、事件监听），后端封装一个工具函数（统一格式化输出）。

这里如果想要练手 canvas，我推荐两个项目：第一个是 vue3-particles（现在可能不叫这个名字了，总之就是粒子库/星空图的类似效果，第二个是代码雨/文字雨（canvas 版本），完全可以模仿着使用 canvas 复刻一下，能复刻出来，canvas 就算真正入门了。进阶同学可以研究下 gsap 这个动画库，配合 canvas 会非常好用，就可以。彩蛋（😜）：如果后续有时间，我还会分享一些我之前做过的“花里胡哨”的动效。原始尺寸：el.naturalWidth（canvas.width）

JS 主线程一次只能执行一个任务，不能出现两个并行的执行流。webpack 打包产物最终运行在浏览器环境内，受到浏览器 JS 线程限制。

现在 AI 对话发展迅速，而这个功能主要就是基于 SSE，因此我们面试时，SSE 会有很高的频率被问到，这里简单聊一聊 SSE。

​XSS​：攻击者注入脚本并可读取页面内容（更强），根源是输出/DOM 不安全。​CSRF​：攻击者伪造用户请求，无法直接读取响应，根源是浏览器自动带凭证。后端统一使用 HTML escape 库；富文本走白名单 sanitizer。HttpOnly;Secure;。对需要的页面开启 CSP（report-only 先观测，再 enforce）。SPA：首次获取 CSRF token 并在后续请求中以 header 发送；服务端检查OriginReferer。

我以上面这几个例子说明：第一个逻辑与，42 是真值，但决定不了整个表达式的逻辑是真还是假，所以能决定“真值性”的是“hello”；当然，情况比我们想得更复杂，如果只是希望通过面试，掌握最基本的就足够了，希望更深度学习可以看官方文档： https://262.ecma-international.org/#sec-toprimitive。但在 JavaScript 中，它们返回的是参与运算的操作数本身（准确来说是决定“真值性” 的那个数）。他们就是利用了“短路”求值的规则，保证的代码健壮性。

是现代 Web 动画的黄金标准与屏幕刷新率同步 → 更流畅；后台自动暂停 → 更省电；浏览器优化调度 → 更高性能。🎯最佳实践：只要涉及视觉变化的 JavaScript 动画，优先使用，而不是setTimeout。

旧书里常讲 VO 是全局的变量对象，AO 是函数的变量对象，而 VO 会绑定到 GO（window/global）上。TDZ 其实是更满足我们直观的编程特性，很多其他语言天然支持，so JavaScript 又在弥补自己的设计缺陷？当成作用域链的一部分，使得“找变量时”会先查这个对象属性。，一个是作用域块，一个是对象，但却是两个不同的东西。ER（环境记录）是用来真正“存变量、查变量”的地方。OER 内没有“自有存储”，所有变量查找实际上是 ​。环境记录是 JS 变量体系的“底层数据结构”。

执行栈/调用栈是针对函数调用来说的，而我们 js 任务的执行依赖于任务队列，先进入队列的任务会先执行，而且一个任务中可能存在多个函数。要注意一个是函数调用的机制，一个是任务执行的机制，不是一回事！之所以函数的执行基于“栈”这种结构，是因为 js 函数允许嵌套，先调用的函数需要等待内部函数的调用执行完毕才能执行，也就是先调用后执行的逻辑，正好满足“栈”这种数据结构。宏任务作为之前的一种笼统叫法，现代浏览器对这些任务做了更细的划分，对他们都统称为了 task，不同的任务具有不同的队列。

​。

原型这块知识点，其实在我们工作中的使用非常简单。但是俗话说“面试造火箭，工作拧螺丝”，在面试中，面试官不时就会考察一些花里胡哨的问题，所以，我们只有将这个概念和他的相关知识理解透彻，才能以不变应万变。

👉 可以这样回答：获取元素：如。创建修改：如。文档信息：如titleURLcookie。事件相关：如load。

如果添加任务后就立刻执行next，会导致每一个加入的任务都立刻执行，违背了串行，类似于并行执行。每次执行的任务里面调用 next，确保任务按顺序执行。构造函数还没结束，已经执行掉第一个任务了。同步代码跑完，进入事件循环 → 执行。这就是「来不及入队」的意思。构造函数执行完毕，继续执行。

换句话说，说函数的作用域在函数定义的时候就决定了。radix：进制（2 ~ 36 之间的整数，如果为 0 或不写，会默认按 10 进制解析，或按字符串格式猜测）然后执行 var func = 1 的赋值，把 func 变成了数字 1，所以最终为两个 1 相加。如果省略 delay 参数，则使用值 0，意味着“立即”执行（下一个事件循环执行），是异步行为。所以当调用 print 的时候，它会根据定义的位置向外查找变量，也就是 n = 10。先加载了函数 func（所以最初 func 是一个函数）。

递归会导致内存消耗变大，是因为每次函数调用都会在调用栈里保存上下文，如果递归层级太深，栈就会溢出。使用尾递归优化（如果语言/引擎支持）。将递归改写为迭代，降低空间复杂度。使用记忆化缓存，减少重复递归。

是当前代码段中，所有的变量(变量、函数、形参、arguments)组成的一个对象。在js中,函数存在一个隐式属性[[scopes]]，这个属性用来保存当前函数的执行上下文环境，由于在数据结构上是链式的，因此也被称作是作用域链。我们可以把它理解为一个数组，可以理解为是一系列的AO对象所组成的一个链式结构。JavaScript采用词法作用域，也就是静态作用域。作用域链的变量只能向上访问，直到访问到 window 对象终止。作用域链执行完会销毁。之所以没有及时被垃圾回收机制回收，是因为作用域链没有断裂。

继承方式代码写法优点缺点原型链继承简单，可复用方法引用属性共享，不能传参构造函数继承属性独立，可传参方法不能复用组合继承方法复用+属性独立调用两次父构造函数原型式继承简单引用属性共享寄生式继承Object.create(obj)+增强灵活方法不复用寄生组合继承完美：高效+灵活语法稍繁琐ES6 class简洁优雅本质还是原型链✅一句话总结ES5 推荐寄生组合继承。ES6 直接用 class extends，底层就是寄生组合继承。

IntersectionObserver 的实现原理是浏览器提供的一种的机制，其核心设计旨在高效解决传统滚动监听（如scroll）的性能瓶颈。

​通过。

​：语法更简洁，适合回调函数和简单逻辑。嵌套场景下，箭头函数继承最近普通函数的。可能指向全局对象（非严格模式）或。​，继承定义时的外层作用域，​。的场合（如闭包嵌套）。

在JavaScript中，使用const声明对象只能确保​​，而对象的内部属性默认仍可修改。

➡️ 执行任务需要 1.5s，但是设置interval 为 1s ，回调执行时间 .> delay。输出结果不是每隔 1 秒，而是任务积压执行，可能造成线程拥堵，主线程空闲时，任务接连执行。取决于事件循环，回调需要等待主线程执行完毕。浏览器中常见的最小延迟时间为 4ms ，避免过渡消耗资源。这样下一次任务的执行总是基于上一次任务完成后的时间来计算。，但实际执行时间可能远远大于 1000ms。虽然你写了 0 毫秒延时，实际上它会在。JavaScript 是单线程的，，不是准确执行时间。

在 JavaScript 中处理大数相乘时，由于 Number 类型存在精度限制（最大安全整数为 2⁵³-1），需要特殊处理。

【代码】【JavaScript】原生 JavaScript 实现 localStorage 过期时间。

若密码仅包含 ASCII 字符（如英文、数字、常见符号），可直接使用原生函数。将字符转为 UTF-8 字节序列，再通过正则替换为二进制格式。默认使用 UTF-8 编码，可直接处理多字节字符。优势：支持 URL 安全模式、自动填充等高级功能。优势：直接处理二进制数据，无需手动替换字符。适用场景：URL 参数、文件名存储等。在 Node.js 中需使用。处理中文或特殊符号会报错。API（现代浏览器）

通过 JavaScript 创建隐藏的。

需要 ES2022+ 环境支持，旧浏览器需通过 Babel 等工具编译。注意：private 关键字是 ts 中的，js 没有这个关键字。代理对象，拦截属性访问并过滤私有属性（如以下划线。：语法直观、强制封装、无内存泄漏风险。：每个实例独立存储方法，占用更多内存。：内存自动回收、无命名冲突风险。仍可遍历到 Symbol 键。：性能较低，需手动维护拦截逻辑。：属性键唯一，避免命名冲突。：无强制约束，外部仍可访问。：兼容旧环境，实现简单。：灵活控制属性可见性。

CDN（内容分发网络）CDN是一种分布式网络架构，通过在全球多个地理位置部署缓存节点，将静态资源（如图片、视频、CSS/JS文件等）缓存到离用户最近的节点，实现快速访问。其核心目标是减少网络延迟、降低源站负载，并提升用户体验。工作原理：用户请求资源时，CDN通过全局负载均衡（GSLB）选择最优节点，若节点已缓存资源则直接返回，否则回源获取并缓存。Service Worker是运行在浏览器后台的独立脚本，可拦截网络请求、管理缓存，并支持离线功能。

【代码】【JavaScript】异步代码执行顺序面试题。

当我们需要的时候，给予调用者一个承诺返回（比如我们的fetchData就会返回一个承诺）：待会儿我会给你回调数据时，就可以创建一个Promise 的对象；在早期没有 Promise 的情况下，解决回调地狱确实是比较棘手的一个问题。这种方式在处理简单异步任务时还算有效，但随着异步操作的复杂性增加，特别是在多个异步任务需要依次或并行执行时，回调函数会导致所谓的“回调地狱”问题。当然，在Promise、Generator、await、async出现之后，对于异步的处理，变得非常的简单和优雅了。

而Proxy则提供了更为强大和灵活的对象操作拦截能力，适合更复杂和动态的场景，但需要权衡性能和兼容性问题。其实他在我们开发的过程中使用到的很少，但是由于我们对 Vue 经常使用，而 Proxy 是 Vue 源码中的重要一环，因此也需要学好 Proxy。是一个内置的对象，和 Proxy 不同，他不是构造函数，不能用来创建对象，它提供了一组静态方法，用于执行一些与对象相关的默认操作。中新增的一个构造函数，它用于创建一个代理对象，可以拦截并自定义对象的基本操作，例如属性查找、赋值、枚举、函数调用等。

默认绑定：① 非严格模式:全局对象(window) ② 严格模式:undefined隐式绑定：对象方法调用的this值：① 调用者使用 new 方法调用构造函数，构造函数内的 this 会绑定到新创建的对象上。箭头函数，this 指向由外层作用域决定。apply / bind / call 方法调用，函数体内的 this 绑定到指定参数的对象上。// 为整个脚本开启严格模式// 为函数开启严格模式如何改变this指向,有2类改变this调用函数时并传入具体的thiscall。

执行。

WeakMap是 ES6 中新增的一种集合类型，叫做“弱映射”，key 必须是对象，由于他的，如果该对象只作为WeakMap 的键存在，在其他地方没有被引用，，可以防止内存泄露。因此 WeakMap 适合存储那些临时对象。WeakMap 不可迭代，无法通过for.of 或其他迭代方法遍历其内容。这是因为WeakMap的设计初衷是为了允许键被自动回收，如果可以迭代WeakMap, 将会打破其弱引用特性。

WebSockets是一种在浏览器和服务器之间建立持久连接的协议，它允许服务器主动推送数据给客户端，并且在客户端和服务器之间实现双向通信。建立连接：客户端使用WebSocket对象来建立WebSocket连接。例如：协议：WebSocket使用标准的WebSocket协议来进行通信。相对于HTTP协议，WebSocket协议提供了更高效率和更低的延迟。ws和wss协议正对应了http和https。事件：WebSocket对象提供了一些事件，用于处理连接的不同阶段和接收到的数据。常见的事件有（连接建立）、（接

配置的统一管理 .env 比如 timeout 和 baseUrl拦截器二次封装（接口（通过 ts 类型约束和类的继承为每一个 request 方法添加自定义 interceptors 配置，配置上有请求和响应成功和失败的方法）、实例（类构造实例）、全局）全局拦截（token 设置、loading 效果、message 弹窗提示）某个接口的请求拦截 -> 全局请求拦截 -> 全局响应拦截 -> 某个接口的响应拦截封装常用请求方法 post，get，delete，patch。

但是，机器码实际上也会被去优化为ByteCode（Deoptimization),这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数，原来执行的是number 类型，后来执行变成了string类型)，之前优化的机器码并不能正确的处理运算，就会去优化的转换成字节码；比如如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能。字节码是一种低级的、比机器码更抽象的代码，它可以快速执行，但比直接的机器码慢。

单个 Promise 错误：使用.catch或语法。全局未处理 Promise 错误：浏览器环境使用，Node.js 中使用。

方法时间复杂度适用场景优点缺点SetO(n)原始类型去重简单高效，适合简单数据类型去重不适合对象、复杂数据类型filterindexOfO(n²)小型数据集，简单去重代码易懂性能较差，不适合大数据reduceO(n²)数据处理过程中去重可以与其他操作结合性能较差Map或ObjectO(n)原始类型去重、效率高高效，适合需要大量查找的场景代码稍显复杂手动双重循环O(n²)教学、展示用不依赖其他方法性能最差，代码冗长复杂对象去重O(n²)对象数组去重。

React：使用state和onDrop等事件来处理拖拽和元素的放置。Vue：利用data和v-on指令来处理拖拽事件，同时使用v-for结合动态样式来更新放置元素的位置。两者的核心思路都是通过事件监听来处理拖拽操作，并将元素的位置存储在状态中，随后根据状态重新渲染页面。