- 博客(68)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 前端树形结构过滤算法
树形结构过滤是前端开发的高频需求，用于菜单权限、文件管理等场景。文章介绍了递归和迭代两种实现方案，核心思想是保留匹配节点及其完整父路径，同时保持原始数据不变。递归方案简洁高效，时间复杂度O(n)；迭代方案适合大数据量，避免栈溢出。还提供了通用过滤函数，支持自定义匹配条件和子节点字段。实战场景包括文件搜索、组织架构筛选等，并给出性能优化建议和测试用例。关键要把握递归遍历、路径保留和数据不可变三大原则。
2025-11-01 00:23:41
551
原创 原生JS实现虚拟列表：前端长列表渲染的性能救星
本文围绕原生 JS 实现虚拟列表展开，先介绍其核心原理 —— 通过占位容器、可视区域计算、动态渲染减少 DOM 节点。接着呈现两版实现：基础版用全量 DOM 重建，存在操作频繁、布局重排等问题；优化版通过 DOM 复用减少节点创建销毁，用 transform 替代 top 避免重排，配合 will-change 提升性能。还对比两版性能，最后给出动态高度列表项和下拉加载更多的进阶适配方案，帮助开发者脱离第三方库实现高性能长列表。
2025-10-30 23:47:55
325
原创 深入剖析React useState底层原理：从链表存储到状态更新的完整链路
React Hooks 核心解析：useState 工作原理全解 摘要：本文深入剖析 React 中 useState 的核心实现原理。useState 通过链表结构存储组件状态，每个 Hook 节点包含 memoizedState（状态值）、updateQueue（更新队列）和 next（指针）三个关键属性。首次渲染时初始化状态并创建更新函数，后续渲染通过索引指针按顺序读取状态。状态更新采用批量处理机制，将多个更新合并为一次渲染。文章揭示了 Hook 调用顺序必须一致的原因，并提供了错误示例，最后通过手写
2025-10-21 16:06:44
783
原创 React 组件重复渲染终极解决方案：从原理到实战
React 重复渲染优化指南：8 种实用方案 摘要：本文针对 React 开发中的重复渲染问题，从三个核心触发条件（state/props/父组件渲染）出发，提出 8 种优化方案：1) React.memo 函数组件浅比较；2) useMemo 缓存计算结果；3) useCallback 稳定函数引用；4) PureComponent 类组件优化；5) shouldComponentUpdate 自定义渲染控制；6) 状态提升与拆分；7) 合理设计组件结构；8) 正确使用 Context。每种方案均附代码示
2025-10-21 15:09:15
925
原创 前端中的受控组件与非受控组件：核心区别与实践指南
前端开发中，表单处理主要有受控组件和非受控组件两种模式。受控组件由框架状态（如React的useState或Vue的data）控制数据流，通过状态变更触发UI更新，适合需要实时校验和联动的复杂表单；非受控组件则由DOM自身管理数据，通过ref直接操作DOM元素，适合简单表单场景。核心区别在于数据控制权归属：受控组件数据与UI强绑定，非受控组件数据与UI弱绑定。开发者应根据表单复杂度选择合适方案——实时交互需求用受控组件，仅需提交数据时用非受控组件可降低复杂度。
2025-10-16 14:59:50
754
原创 Vue与React中动态导入的原理及实现差异解析
本文对比分析了Vue和React框架中动态导入技术的实现方式。动态导入基于ES Modules的import()规范，支持异步加载和代码分割。Vue通过defineAsyncComponent封装组件动态导入，深度集成响应式系统和路由懒加载；React则采用React.lazy结合Suspense的方案，专注于组件级异步加载和状态管理。两者都依赖打包工具生成独立chunk，但Vue提供了更全面的原生支持，而React需要配合错误边界处理异常。开发者可根据项目需求选择适合的动态导入方案，优化应用性能。
2025-10-16 14:37:47
929
原创 手写Function.prototype.bind：从原理到完整实现
本文深入解析了JavaScript中Function.prototype.bind的核心特性与手写实现。原生bind具有绑定this、参数柯里化和兼容构造函数三大特性。手写实现需重点处理：1）校验调用者类型；2）保存原函数与预传参数形成闭包；3）通过instanceof判断调用场景，分别处理普通调用(apply)和构造函数调用(new)；4）使用Object.create实现原型链继承。测试验证表明，该实现能正确处理普通绑定和构造函数调用场景，与原生行为一致。理解bind的底层逻辑有助于深入掌握this绑定
2025-10-08 23:22:49
1023
原创 手写 Promise.all 的原理与实现
本文深入解析Promise.all的实现机制，从规范特性、输入校验到两种实现方案对比。规范要求处理可迭代输入、空数组返回及成功/失败条件。核心逻辑通过结果数组和计数器管理异步任务。两种实现方案对比显示内部封装resolve/reject更安全简洁。测试验证覆盖空输入、混合值、失败等场景。关键点包括统一Promise转换、保证结果顺序和快速失败机制。理解这些原理有助于更好地运用该API进行异步编程。
2025-10-08 21:56:50
800
原创 深入解析：Object.prototype.toString.call() 的工作原理与实战应用
JavaScript类型检测终极方案：Object.prototype.toString.call()凭借精准识别各类数据的能力脱颖而出。其原理是读取值的内部属性[[Class]]，返回"[object Type]"格式字符串。必须通过call()改变this指向才能正确识别目标类型。该方法能区分基本类型、内置对象和特殊对象，是比typeof和instanceof更可靠的类型检测方案，适用于需要精确判断类型的开发场景。
2025-10-07 21:00:56
1199
原创 深入解析：JavaScript中typeof与instanceof的原理及区别
摘要：JavaScript中的typeof和instanceof是两种类型检测工具，但原理和用途不同。typeof通过类型标签快速判断基本数据类型（如"number"、"string"），但对引用类型（如数组、对象）统一返回"object"，且存在typeof null === "object"的历史遗留问题。instanceof则通过原型链判断对象是否属于某个构造函数，适用于引用类型检测，但无法用于基本类型。两者各有优劣：ty
2025-10-07 21:00:24
1040
原创 深入解析：JavaScript中typeof与instanceof的原理及区别
摘要：JavaScript中的typeof和instanceof是两种类型检测工具，但原理和用途不同。typeof通过类型标签快速判断基本数据类型（如"number"、"string"），但对引用类型（如数组、对象）统一返回"object"，且存在typeof null === "object"的历史遗留问题。instanceof则通过原型链判断对象是否属于某个构造函数，适用于引用类型检测，但无法用于基本类型。两者各有优劣：ty
2025-10-07 20:37:54
1151
原创 Nginx proxy_pass 斜杠陷阱：一篇搞懂带不带 / 的区别与实战配置
Nginx反向代理中proxy_pass末尾斜杠/的配置差异直接影响请求路径拼接。不带斜杠时保留location匹配路径，带斜杠则替换匹配路径。本文通过实例对比两种配置的差异，分析常见404问题的根源，并给出优化方案：根据后端路由是否包含前缀，选择是否在proxy_pass中添加斜杠。同时提供验证方法，包括语法检查、平滑重载及后端日志监控，确保配置正确生效。掌握这一细节可有效避免路径拼接错误导致的代理问题。
2025-09-26 22:38:51
1706
原创 一文搞懂 Nginx 中的 try_files 与 $uri：解决 SPA 路由刷新 404 核心配置
这篇文章深入解析了前端单页应用（SPA）部署时常见的404问题及解决方案。核心知识点包括： URI基础概念：URI是URL中不包含协议、域名、查询参数和锚点的路径部分，Nginx的$uri变量会自动提取这部分内容。 Nginx的try_files指令工作原理：按顺序尝试查找文件/目录（$uri→$uri/），全部失败则返回兜底资源（通常为/index.html），从而解决SPA history模式刷新404的问题。 实际配置示例：提供了包含API代理、静态资源缓存和SPA路由处理的完整Nginx配置方案，强
2025-09-26 22:22:54
1400
原创 深入解析Vue Router：history模式与哈希模式的实现原理
Vue Router的hash和history模式是SPA路由的两种核心实现方式。hash模式利用URL片段标识符实现无刷新路由，无需后端支持但URL含#符号；history模式基于HTML5 History API，提供更简洁的URL但需要后端配置SPA fallback。两种模式各有优缺点：hash模式兼容性好、实现简单，history模式URL美观、SEO友好。理解其原理差异有助于开发者根据项目需求选择合适方案，其中history模式需特别注意后端配置以避免404问题。
2025-09-26 00:27:44
876
原创 浏览器跨标签页/跨窗口通讯方式全解析：从基础到进阶
摘要 本文系统梳理了浏览器跨标签页/窗口通讯的多种实现方案，分析了其原理、优缺点及适用场景。核心方案包括：基于浏览器存储（localStorage、IndexedDB）的通讯方式，适合简单状态同步；基于广播（BroadcastChannel）的实时通讯方式；利用窗口引用（window.postMessage）的跨域通讯方案；以及通过WebSocket实现的服务器中转通讯。每种方案都有其适用场景，开发者需根据同源需求、实时性要求、数据复杂度等因素选择最佳方案。文章还强调了安全注意事项，如验证消息来源等，为开发
2025-09-15 17:21:34
863
原创 XHR与Fetch取消请求的方法及原理深度解析
本文对比了前端开发中XHR和Fetch API的请求取消机制。XHR通过abort()方法直接取消，而Fetch需结合AbortController实现。两者在取消方式、多请求控制、错误处理等方面存在差异。文章还提供了搜索框防抖、页面卸载取消请求等实用场景的代码实现，帮助开发者优化网络请求管理，提升应用性能和用户体验。
2025-09-13 21:53:52
977
原创 深入解析：preload与prefetch的区别及最佳实践
摘要：preload和prefetch是提升前端性能的关键预加载技术，但适用场景不同。preload高优先级加载当前页关键资源（如CSS、字体），避免阻塞渲染；prefetch低优先级预加载未来页面可能用到的资源（如下页JS）。核心差异：加载时机（立即vs空闲）、优先级、缓存策略及使用约束。最佳实践：preload用于首屏核心资源，prefetch预测用户行为加载非关键资源。需避免错误用法，并通过开发者工具检测效果，合理使用可显著优化页面性能。
2025-09-13 21:27:48
1219
原创 React中使用Context：从基础到高级实践的全面指南
React的Context API解决了组件跨层级通信的痛点，通过创建、提供和消费三个步骤实现数据共享。基础用法包括useContext钩子、Context.Consumer组件和类组件的contextType。进阶用法支持复杂状态管理，如将状态和更新方法打包传递。对于多维度数据，建议使用多个独立Context避免性能问题。Context特别适合主题切换、用户信息等全局数据场景，能有效减少props逐层传递的冗余代码，提升应用可维护性。
2025-09-12 09:41:08
1019
原创 Vue组件通信 vs React组件通信：从基础到跨框架的全面对比
Vue和React组件通信对比：Vue通过props/$emit实现父子通信，provide/inject解决跨层级问题；React采用props/回调函数，Context API应对深层组件交互。Vue推荐Pinia管理全局状态，React常用Redux。两者虽实现方式不同，但都遵循单向数据流原则，需根据项目复杂度选择合适的通信方案。
2025-09-12 01:06:41
704
原创 深入解析：Set、Map、WeakSet、WeakMap的区别与应用场景
本质：存储唯一不重复的值（原始值或对象引用）的无序集合。核心特性成员值唯一，重复添加会被忽略。可以存储任何类型的值（原始值如字符串、数字，或对象引用）。对存储的对象保持强引用（不会被垃圾回收）。set.add(1);// 两个空对象是不同引用，都会被存储// 输出：4存储内容：单一值用Set/WeakSet，键值对用Map/WeakMap。数据类型：存储原始值只能用Set/Map；存储对象且需自动回收用WeakSet/WeakMap。遍历需求。
2025-09-09 10:47:23
635
原创 React中memo/useMemo/useCallback三者的区别：从原理到实践
摘要：React性能优化中，memo、useMemo和useCallback三者的核心共性是通过缓存减少重复计算与渲染，但适用场景不同。memo用于缓存组件渲染结果，适合纯展示型子组件；useMemo缓存昂贵计算结果，适用于大数据处理；useCallback则缓存函数引用，常与memo配合使用。实践中需注意：避免过度优化，优先通过性能分析定位瓶颈，组合使用这三种API时要注意依赖项管理。性能优化应遵循"按需使用"原则，在确实存在性能问题时再针对性应用。
2025-09-09 10:46:34
1011
原创 打造前端异步操作利器：从零实现实用Promise工具库
本文介绍了如何构建一个实用的前端Promise工具库，解决异步操作中的常见痛点。原生Promise在复杂场景下存在不足，作者实现了一套包含10个核心方法的工具库，覆盖请求缓存、竞态处理、并发控制等关键场景。工具库支持方法组合使用，如带缓存、超时和重试的请求。实际应用中显著减少了重复请求、解决了竞态问题并降低了代码量。这些方法设计为高阶函数，可灵活扩展，如添加请求取消或进度反馈功能。该工具库提升了开发效率和代码质量，是前端异步处理的实用解决方案。
2025-09-09 01:12:07
1372
原创 Vue响应式更新 vs React状态更新：两种范式的底层逻辑与实践差异
Vue与React的更新机制对比：响应式自动追踪 vs 显式状态更新。Vue通过依赖收集实现数据修改自动触发视图更新，React则依赖setState触发虚拟DOM diff。核心差异在于：Vue追求开发便捷性（自动依赖追踪），React强调可控性（显式更新+手动优化）。选择取决于项目需求：快速开发选Vue，复杂控制选React。理解底层原理有助于性能优化和技术选型。 （149字）
2025-09-08 21:09:39
976
原创 深入解析：Vue与React的异步批处理更新机制
前端框架通过异步批处理更新来优化性能，Vue和React采用不同机制：Vue基于微任务自动合并响应式数据变更，实现细粒度更新；React通过调度器支持优先级批处理，React 18后统一了批处理行为。核心差异在于Vue更自动化，React更可控。实践建议包括集中修改数据、慎用同步更新、合理利用延迟API。两种设计都能有效减少DOM操作，开发者应根据项目需求选择合适方案。
2025-09-08 20:59:13
1157
原创 Vue响应式底层原理：深入解析依赖追踪机制
Vue响应式系统依赖追踪机制解析：Vue 2通过Dep和Watcher实现双向绑定，利用Object.defineProperty的getter/setter收集和触发依赖；Vue 3升级为Effect+Track/Trigger模式，基于Proxy和WeakMap三级缓存实现更高效的依赖管理。核心差异体现在依赖存储方式、响应式实现和性能优化上，Vue 3的动态懒递归和自动去重特性使其在大型应用中表现更优。开发者需注意避免不必要的依赖以提升性能。
2025-09-08 20:44:10
908
原创 Vue的响应式底层原理：Proxy vs defineProperty
本文深入解析Vue框架响应式系统的技术演进，对比Vue 2的Object.defineProperty和Vue 3的Proxy实现方案。Vue 2通过遍历对象属性定义getter/setter实现响应式，存在无法监听新增/删除属性、数组索引修改等问题；而Vue 3采用Proxy代理整个对象，天然支持这些操作，且性能更优、扩展性更强。文章详细分析两种技术的实现原理、核心差异及优缺点，揭示Vue 3升级响应式系统的主要原因，帮助开发者深入理解Vue响应式机制。
2025-09-08 20:05:11
1448
原创 不依赖虚拟 DOM，性能依旧卓越：以 Svelte 为例解析其核心原因
Svelte通过编译时优化实现高性能，完全抛弃虚拟DOM。其核心在于：1）构建阶段静态分析组件代码，精准定位数据与DOM的映射关系；2）生成针对性更新代码直接操作DOM，避免虚拟DOM的diff计算；3）细粒度更新仅修改必要节点；4）无运行时框架开销，编译为原生JS代码。相比虚拟DOM方案，Svelte从根源上减少了不必要计算和DOM操作，通过"编译时代替运行时"的设计思路，在保持轻量化的同时实现高效渲染。
2025-09-08 19:35:51
677
原创 React中的合成事件
React合成事件是对浏览器原生事件的封装，提供跨浏览器一致性API，采用事件委托机制提升性能。其特点包括：统一事件处理接口、通过事件池优化性能（17+版本移除）、支持原生事件访问(e.nativeEvent)。开发者无需处理浏览器差异，只需使用标准事件方法如preventDefault()。合成事件简化了React组件的事件处理流程。
2025-09-08 19:24:02
472
原创 浏览器数百函数执行？三招搞定性能优化
本文介绍了三种优化浏览器大量函数执行的方法：1）使用setTimeout分批执行任务，避免主线程阻塞；2）利用requestIdleCallback在浏览器空闲时执行任务；3）将不涉及DOM操作的任务交给WebWorker处理。此外还提到了一些优化细节，如任务优先级排序、减少函数执行时间等。这些方法能有效提升页面性能，开发者可根据实际场景灵活选择。
2025-09-07 15:09:15
426
原创 javascript函数柯里化
柯里化是一种将多参数函数转换为单参数函数链的技术。本文展示了一个通用的JavaScript柯里化工具函数实现，通过判断参数数量决定执行原函数或继续收集参数。示例包括加法运算、用户信息处理和对象属性访问，演示了柯里化在参数复用、延迟执行和函数组合方面的优势。该技术能增强代码灵活性和模块化，是函数式编程的重要特性，被Lodash等主流库广泛采用。
2025-09-06 01:14:03
246
原创 理解js中的迭代器
JavaScript迭代器（Iterator）是ES6引入的统一数据遍历机制，核心是定义了一个包含next()方法的对象。每次调用next()返回{value, done}，实现有状态的遍历。可迭代对象（如数组、Map）通过Symbol.iterator方法提供迭代器。迭代器支持for...of、解构赋值、展开运算符等语法，解决了不同数据结构遍历方式碎片化的问题。手动实现迭代器需要定义状态维护逻辑，而Generator函数可简化这一过程。迭代器机制为JavaScript提供了标准化的数据访问接口。
2025-09-01 00:48:10
1000
原创 使用CSS创建带三角形指示器的气泡框
本文介绍了如何使用纯CSS创建带三角形指示器的气泡框。通过HTML基础结构和CSS样式实现，包括圆角矩形容器和利用边框技巧生成的三角形。关键点在于使用::after伪元素、边框属性设置以及精确定位技术。这种方法无需JavaScript或图片，简单高效，适合网页提示框、对话框等UI元素。文章还提供了完整代码示例并建议了可能的改进方向，如响应式设计、动画效果等。这种纯CSS实现方案轻量且易于定制。
2025-06-24 17:34:16
1060
原创 使用JavaScript检测网络连接状态与性能指标
摘要：本文介绍了JavaScript中Navigator API的网络检测功能，包括基础在线状态检查和详细网络信息获取。通过navigator.onLine检测连接状态，利用navigator.connection获取网络类型、下载速度等参数。文章提供了完整示例代码展示实时网络监控的实现，并列举了自适应内容加载、离线提示等应用场景。同时指出需注意浏览器兼容性、隐私保护和数据准确性等问题。这些技术有助于开发响应式Web应用，特别适用于媒体密集型或需要离线支持的场景。
2025-06-10 00:22:10
847
原创 在Vue或React项目中使用Tailwind CSS实现暗黑模式切换：从系统适配到手动控制
在现代Web开发中，暗黑模式(Dark Mode)已成为提升用户体验的重要功能。本文将带你使用Tailwind CSS在React项目中实现两种暗黑模式控制方式：系统自动适配和手动切换。
2025-06-07 10:27:42
1358
原创 使用 SASS 与 CSS Grid 实现鼠标悬停动态布局变换效果
这篇文章介绍了一个纯CSS实现的3x3彩色格子网格交互效果。当鼠标悬停任意格子时，所在行和列会放大显示。主要技术点包括：CSS Grid布局构建基础网格，SASS循环生成9种不同颜色，利用:has()选择器监听悬停状态，结合SASS数学模块和列表操作动态调整行列比例。整个效果仅需少量HTML和SASS代码，无需JavaScript，但需注意:has()在Firefox的兼容性问题。该方案展示了现代CSS结合预处理器的强大表现力。
2025-06-01 00:32:15
937
原创 浏览器强缓存还未过期，但服务器资源已经变了怎么办？
本文探讨了前端开发中浏览器强缓存机制带来的经典问题：当服务器资源更新但浏览器仍在缓存有效期内时，用户无法获取最新版本。文章首先回顾了强缓存的原理，然后分析了问题场景及其原因，进而提供了三种解决方案：使用文件名hash（最佳实践）、缩短缓存时间+协商缓存、请求参数版本号。最后给出了不同资源的缓存策略推荐，强调通过资源唯一标识和合理缓存策略来兼顾性能与更新。核心要点是：文件名加hash可彻底解决问题，同时实现长期缓存和即时更新。
2025-05-24 23:47:04
1094
原创 Flexbox中的flex-shrink和flex-grow属性
flex-shrink 和 flex-grow 是 CSS Flexbox 布局中的两个关键属性，分别用于控制弹性项目在容器空间不足或有多余空间时的行为。flex-shrink 定义了项目在空间不足时的收缩比例，数值越大，收缩越多，默认值为 1，设置为 0 可禁止收缩。flex-grow 则定义了项目在有多余空间时的伸展比例，数值越大，伸展越多，默认值为 0，设置为 0 可保持初始宽度。通过合理使用这两个属性，可以实现灵活且自适应的布局，确保页面在不同屏幕尺寸下保持良好的显示效果。
2025-05-16 16:25:19
804
原创 node.js事件循环详解
Node.js 中的事件循环是一个高效的异步处理机制，它允许 Node.js 在单线程中处理大量的并发 I/O 请求，而不会阻塞程序的执行。理解事件循环的机制对于优化 Node.js 应用程序的性能至关重要，尤其是在处理大量 I/O 操作时。通过合理使用异步 API 和微任务、宏任务的优先级，可以确保应用程序能够高效地执行并响应请求。
2025-04-23 00:22:03
1386
1
原创 详解Node.js中的setImmediate()函数
setImmediate()的主要作用是将回调函数推送到事件循环的"Check"阶段。无论延迟时间是多少，它都会在当前事件循环周期的末尾执行，而不是等到下一个事件循环周期。
2025-04-23 00:08:27
1488
2
原创 深入理解 setTimeout：原理、问题与最佳实践
本文全面讲解了 JavaScript 中 setTimeout 的使用方法，包括语法、定时器 ID 管理、常见的 this 指向问题及其解决方案，分析了延迟不准确的原因，如事件循环和最小延迟限制，并展示了其在防抖、任务分片和动画控制中的实际应用，最后总结了常见问题和优化建议，帮助开发者更高效地使用定时器处理异步任务。
2025-04-21 09:52:28
570
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人