Ice_Sugar_7的博客

JavaScript采用自动垃圾回收机制管理内存，主要算法包括引用计数和标记清除。V8引擎采用分代回收策略，将堆内存分为新生代和老生代，分别使用Scavenge算法和标记清除算法。V8通过多线程并行回收、增量标记和三色标记法优化回收效率。建议开发者及时解除无用引用，避免内存泄漏。

React 16引入Fiber架构重构核心算法，解决了旧版Stack Reconciler的同步递归更新导致的性能瓶颈。Fiber通过将渲染任务拆分为可中断、可恢复的增量单元，结合优先级调度机制，实现了更流畅的用户体验。新架构增加了Scheduler层来管理任务优先级，使高优先级任务可以打断低优先级任务，有效避免了JavaScript长时间占用主线程造成的界面卡顿问题。这一改变也影响了React的生命周期设计，使其适应异步渲染的特性。Fiber架构从数据结构、工作流到调度机制的全方位革新，为React带来了

HTTP协议发展历程：1.0到2.0的演进 HTTP1.0采用短连接模式，每个请求都需要建立和销毁TCP连接，导致资源浪费和性能低下。HTTP1.1引入长连接和管道化技术，允许多个请求复用同一个TCP连接，但仍存在队头阻塞问题。 HTTP2.0通过二进制分帧实现真正的多路复用，解决了队头阻塞问题。它采用帧和流的概念，允许不同请求交替传输。同时还实现了头部压缩和服务器推送功能，显著提升了传输效率。 各版本核心区别在于连接管理方式：1.0短连接效率低，1.1长连接仍有限制，2.0通过二进制分帧彻底解决了复用问题

题目如下：用 React 和 JS 实现一个组件，组件分为左右两块左侧模块：展示可选列表，如 [1,2,3,4,5]，每一项是一个 checkbox，可以勾选和取消勾选时，右侧模块会展示已选项的列表，并且每项旁边有个删除按钮，点击删除后，左侧对应项也会取消勾选。

摘要： Vite与WebPack的核心差异主要体现在开发模式、构建工具、启动速度和热更新等方面。Vite基于ES Modules实现按需编译，开发启动快，适合现代浏览器项目；而WebPack需完整打包，配置复杂但生态成熟，兼容性更强。Vite适用于大型项目、快速原型开发及现代浏览器场景；WebPack则更适合需要支持旧浏览器或高度定制化的项目。生产环境下，Vite基于Rollup优化，WebPack则通过代码拆分等处理复杂场景。开发者需根据项目需求选择工具。

React 中的 useEffect 钩子若依赖数组配置不当，可能导致副作用重复执行、状态更新不及时或性能问题。未优化代码中，遗漏依赖数组会使副作用在每次渲染时都执行，而依赖项遗漏则会导致闭包问题。优化方案包括：1）正确声明依赖项；2）空数组用于仅需挂载/卸载的场景；3）使用 useCallback/useMemo 减少依赖。合理配置依赖数组可提升性能，避免无效渲染，关键在于精确声明依赖关系，平衡执行频率与状态同步需求。（150字）

浏览器缓存机制通过存储位置和缓存类型两个维度进行管理。缓存位置分为Service Worker、Memory Cache、Disk Cache和Push Cache四级，优先级依次降低。Service Worker可精细控制缓存，但需HTTPS协议；Memory Cache读取快但生命周期短；Disk Cache容量大且遵循HTTP头部控制；Push Cache是HTTP/2新增的会话级短暂缓存。缓存类型分为强制缓存和协商缓存：强制缓存通过Cache-control（相对时间）和Expires（绝对时间）字

摘要： BFC（块级格式化上下文）是CSS中独立的布局环境，内部元素不受外部影响。触发方式包括根元素、浮动/定位元素、overflow非visible及特定display值。特性：垂直排列、边距不合并、包含浮动、隔离外部浮动。应用场景：解决浮动塌陷（父元素触发BFC）、避免边距合并（包裹BFC容器）、自适应两栏布局（BFC不与浮动重叠）。注意：过度使用可能增加复杂度，Flexbox/Grid可部分替代。BFC是CSS布局的重要机制，合理使用可高效解决布局问题。

受控组件的数据流是双向的。缺点是代码量较多，尤其是表单复杂时，需要为每个输入字段编写事件处理逻辑。受控组件是指表单元素的值由 React 组件的状态（state）控制。与受控组件相反，非受控组件可以直接编辑组件的值。非受控组件的值由 DOM 自身管理，而不是通过 React 状态控制。直接访问 DOM 元素的值，适用于简单表单或需要集成第三方库的场景。需要实时验证或动态控制表单行为时，优先使用受控组件。事件，那它就是受控组件，也就是受。要获取非受控组件的值，需要通过。要获取组件的值，直接使用。

React 生命周期分为挂载、更新和卸载三个阶段。挂载阶段包括constructor初始化、getDerivedStateFromProps处理props、render渲染和componentDidMount执行副作用操作。更新阶段通过shouldComponentUpdate优化渲染，使用getSnapshotBeforeUpdate捕获DOM信息，componentDidUpdate执行更新后操作。卸载阶段通过componentWillUnmount进行清理。废弃的生命周期方法已被标记，函数组件可使用u

链式调用（Method Chaining）是 JavaScript 中一种常见的编程模式，允许通过连续调用对象的方法来简化代码。这种模式的核心在于每个方法返回调用对象本身（通常是 ），从而可以继续调用其他方法。链式调用的关键在于每个方法返回当前对象（）。这样，每次方法调用后，可以立即调用下一个方法。例如：优点代码简洁：减少重复代码，避免多次引用同一对象。可读性高：链式调用的代码通常更接近自然语言，易于理解。流畅接口：适合构建流畅的 API 或 DSL（领域特定语言）。常见应用场景jQue

ES6 Proxy 简介 ES6 Proxy 允许创建对象的代理，拦截并自定义底层操作。通过 new Proxy(target, handler) 语法创建代理对象，其中 handler 包含拦截方法（如 get 和 set）。主要用途包括数据验证、日志记录和性能优化。相比 Vue2 的 Object.defineProperty（需要深度遍历属性），Proxy 直接监听整个对象，无需遍历且能检测属性增删，性能更优。Vue3 采用 Proxy 实现响应式，通过操作代理对象间接修改原对象。

WebSocket协议是HTML5新增的通信协议，它通过HTTP完成握手后建立持久连接，实现服务器主动推送消息。相比传统HTTP，WebSocket具有实时性高、资源占用少的优势，但存在兼容性和连接维护成本问题。握手过程包含特殊HTTP请求头，协商成功后转为全双工通信。前端可通过原生WebSocket API或封装库Socket.io实现即时通讯，后者提供事件管理和兼容处理。常见即时通讯方案还包括短轮询和长轮询，但WebSocket在性能和实时性上更优。

本文介绍了JavaScript中的词法环境和闭包概念。词法环境指函数所在作用域中的变量，如内部函数可以访问外部函数的变量。闭包由函数及其词法环境组成，当函数未被销毁时，其词法环境也会保留。闭包可能导致内存泄漏：1）持有不需要的函数引用会阻止词法环境销毁；2）多个函数共享词法环境时，可能导致内存空间无法回收。合理使用闭包可以避免不必要的内存占用。

比如延后了，那么下次就提前执行，但是打算提前执行的这一次，它在真正执行的时候，这一帧也有可能被推迟，那么我们就在计时器到达之后继续提前。渲染帧不会受失活页面的影响，哪怕页面失活，也会依次进行，但是渲染帧会受很多其他因素的影响。比如你在打游戏或者看剧，这时候电脑卡了（比如操作系统卡了、浏览器卡了、某些页面卡了等等），是会影响到渲染帧的。web 标准对嵌套计时器设置了最小延迟限制，即使计时器设置的延迟时间为 0，当嵌套层次 >= 5 时，会有一个 4ms 的最小延迟时间。（通常精确到微秒），适合测量时间间隔。

本文介绍了文件上传所需的核心交互协议。首先通过创建文件协议获取唯一标识uploadToken和分片大小chunkSize；其次通过hash校验协议验证分片或文件的完整性，包含hash类型、值、是否已存储等信息；然后通过分片数据上传协议传输具体分片内容；最后通过分片合并协议完成文件合并。这些协议共同构成了一个完整的文件上传流程，确保前后端能高效、可靠地完成大文件分片上传任务。

摘要 大文件上传的前端处理方案主要包含三个关键技术点：1) 使用Web Worker多线程分片计算文件哈希值，避免主线程阻塞；2) 采用并发控制策略上传分片（通常限制6个并行请求），通过FormData携带分片元数据；3) 实现动态分片调整，利用EMA算法平滑网络速度波动，根据实时网速自动优化分片大小（高速网络增大分片，弱网减小分片）。整个方案结合IndexedDB存储、断点续传和进度监控，有效提升大文件上传的可靠性和用户体验。（149字）

本文介绍了虚拟DOM的概念及其在Vue中的应用。虚拟DOM是一个JS对象，用于描述视图结构。每个Vue组件通过render函数生成虚拟DOM树，避免直接操作真实DOM带来的性能损耗。当数据变化时，Vue会对比新旧虚拟DOM树，只更新必要的节点。文章还解释了模板与虚拟DOM的关系：模板通过编译转换为render函数，最终生成虚拟DOM。Vue提供了运行时编译和打包时预编译两种方式，预编译能提升性能并减小包体积。模板的存在是为了方便开发，最终Vue运行需要的是render函数而非模板。

浏览器采用多进程多线程架构，渲染主线程通过事件循环机制处理各种任务，包括解析HTML、执行JS等。为避免阻塞，浏览器采用异步方式处理耗时任务，将任务交给其他线程处理后再通过消息队列调度执行。任务队列分为不同优先级，其中微队列任务优先执行。这种异步模式保证了单线程浏览器的流畅运行。

这篇文章详细介绍了浏览器渲染页面的完整流程，主要包括6个关键步骤：HTML解析构建DOM树、CSS解析构建CSSOM树、样式计算、布局计算、分层和绘制。其中重点分析了CSS和JS对解析过程的影响差异：CSS不会阻塞HTML解析，而JS会阻塞。此外，文章还解释了transform性能优异的原因（仅影响合成线程的绘制阶段），以及分层机制如何提高渲染效率。整个过程涉及主线程、合成线程和GPU进程的协同工作，最终将页面内容呈现到屏幕上。