- 博客(53)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 XHR与Fetch取消请求的方法及原理深度解析
本文对比了前端开发中XHR和Fetch API的请求取消机制。XHR通过abort()方法直接取消，而Fetch需结合AbortController实现。两者在取消方式、多请求控制、错误处理等方面存在差异。文章还提供了搜索框防抖、页面卸载取消请求等实用场景的代码实现，帮助开发者优化网络请求管理，提升应用性能和用户体验。
2025-09-13 21:53:52
446
原创 深入解析：preload与prefetch的区别及最佳实践
摘要：preload和prefetch是提升前端性能的关键预加载技术，但适用场景不同。preload高优先级加载当前页关键资源（如CSS、字体），避免阻塞渲染；prefetch低优先级预加载未来页面可能用到的资源（如下页JS）。核心差异：加载时机（立即vs空闲）、优先级、缓存策略及使用约束。最佳实践：preload用于首屏核心资源，prefetch预测用户行为加载非关键资源。需避免错误用法，并通过开发者工具检测效果，合理使用可显著优化页面性能。
2025-09-13 21:27:48
573
原创 React中使用Context：从基础到高级实践的全面指南
React的Context API解决了组件跨层级通信的痛点，通过创建、提供和消费三个步骤实现数据共享。基础用法包括useContext钩子、Context.Consumer组件和类组件的contextType。进阶用法支持复杂状态管理，如将状态和更新方法打包传递。对于多维度数据，建议使用多个独立Context避免性能问题。Context特别适合主题切换、用户信息等全局数据场景，能有效减少props逐层传递的冗余代码，提升应用可维护性。
2025-09-12 09:41:08
668
原创 Vue组件通信 vs React组件通信：从基础到跨框架的全面对比
Vue和React组件通信对比：Vue通过props/$emit实现父子通信，provide/inject解决跨层级问题；React采用props/回调函数，Context API应对深层组件交互。Vue推荐Pinia管理全局状态，React常用Redux。两者虽实现方式不同，但都遵循单向数据流原则，需根据项目复杂度选择合适的通信方案。
2025-09-12 01:06:41
585
原创 深入解析：Set、Map、WeakSet、WeakMap的区别与应用场景
本质：存储唯一不重复的值（原始值或对象引用）的无序集合。核心特性成员值唯一，重复添加会被忽略。可以存储任何类型的值（原始值如字符串、数字，或对象引用）。对存储的对象保持强引用（不会被垃圾回收）。set.add(1);// 两个空对象是不同引用，都会被存储// 输出：4存储内容：单一值用Set/WeakSet，键值对用Map/WeakMap。数据类型：存储原始值只能用Set/Map；存储对象且需自动回收用WeakSet/WeakMap。遍历需求。
2025-09-09 10:47:23
520
原创 React中memo/useMemo/useCallback三者的区别：从原理到实践
摘要：React性能优化中，memo、useMemo和useCallback三者的核心共性是通过缓存减少重复计算与渲染，但适用场景不同。memo用于缓存组件渲染结果，适合纯展示型子组件；useMemo缓存昂贵计算结果，适用于大数据处理；useCallback则缓存函数引用，常与memo配合使用。实践中需注意：避免过度优化，优先通过性能分析定位瓶颈，组合使用这三种API时要注意依赖项管理。性能优化应遵循"按需使用"原则，在确实存在性能问题时再针对性应用。
2025-09-09 10:46:34
831
原创 打造前端异步操作利器：从零实现实用Promise工具库
本文介绍了如何构建一个实用的前端Promise工具库，解决异步操作中的常见痛点。原生Promise在复杂场景下存在不足，作者实现了一套包含10个核心方法的工具库，覆盖请求缓存、竞态处理、并发控制等关键场景。工具库支持方法组合使用，如带缓存、超时和重试的请求。实际应用中显著减少了重复请求、解决了竞态问题并降低了代码量。这些方法设计为高阶函数，可灵活扩展，如添加请求取消或进度反馈功能。该工具库提升了开发效率和代码质量，是前端异步处理的实用解决方案。
2025-09-09 01:12:07
1192
原创 Vue响应式更新 vs React状态更新：两种范式的底层逻辑与实践差异
Vue与React的更新机制对比：响应式自动追踪 vs 显式状态更新。Vue通过依赖收集实现数据修改自动触发视图更新，React则依赖setState触发虚拟DOM diff。核心差异在于：Vue追求开发便捷性（自动依赖追踪），React强调可控性（显式更新+手动优化）。选择取决于项目需求：快速开发选Vue，复杂控制选React。理解底层原理有助于性能优化和技术选型。 （149字）
2025-09-08 21:09:39
806
原创 深入解析：Vue与React的异步批处理更新机制
前端框架通过异步批处理更新来优化性能，Vue和React采用不同机制：Vue基于微任务自动合并响应式数据变更，实现细粒度更新；React通过调度器支持优先级批处理，React 18后统一了批处理行为。核心差异在于Vue更自动化，React更可控。实践建议包括集中修改数据、慎用同步更新、合理利用延迟API。两种设计都能有效减少DOM操作，开发者应根据项目需求选择合适方案。
2025-09-08 20:59:13
999
原创 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
768
原创 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
1282
原创 不依赖虚拟 DOM，性能依旧卓越：以 Svelte 为例解析其核心原因
Svelte通过编译时优化实现高性能，完全抛弃虚拟DOM。其核心在于：1）构建阶段静态分析组件代码，精准定位数据与DOM的映射关系；2）生成针对性更新代码直接操作DOM，避免虚拟DOM的diff计算；3）细粒度更新仅修改必要节点；4）无运行时框架开销，编译为原生JS代码。相比虚拟DOM方案，Svelte从根源上减少了不必要计算和DOM操作，通过"编译时代替运行时"的设计思路，在保持轻量化的同时实现高效渲染。
2025-09-08 19:35:51
578
原创 React中的合成事件
React合成事件是对浏览器原生事件的封装，提供跨浏览器一致性API，采用事件委托机制提升性能。其特点包括：统一事件处理接口、通过事件池优化性能（17+版本移除）、支持原生事件访问(e.nativeEvent)。开发者无需处理浏览器差异，只需使用标准事件方法如preventDefault()。合成事件简化了React组件的事件处理流程。
2025-09-08 19:24:02
352
原创 浏览器数百函数执行？三招搞定性能优化
本文介绍了三种优化浏览器大量函数执行的方法：1）使用setTimeout分批执行任务，避免主线程阻塞；2）利用requestIdleCallback在浏览器空闲时执行任务；3）将不涉及DOM操作的任务交给WebWorker处理。此外还提到了一些优化细节，如任务优先级排序、减少函数执行时间等。这些方法能有效提升页面性能，开发者可根据实际场景灵活选择。
2025-09-07 15:09:15
361
原创 javascript函数柯里化
柯里化是一种将多参数函数转换为单参数函数链的技术。本文展示了一个通用的JavaScript柯里化工具函数实现，通过判断参数数量决定执行原函数或继续收集参数。示例包括加法运算、用户信息处理和对象属性访问，演示了柯里化在参数复用、延迟执行和函数组合方面的优势。该技术能增强代码灵活性和模块化，是函数式编程的重要特性，被Lodash等主流库广泛采用。
2025-09-06 01:14:03
219
原创 理解js中的迭代器
JavaScript迭代器（Iterator）是ES6引入的统一数据遍历机制，核心是定义了一个包含next()方法的对象。每次调用next()返回{value, done}，实现有状态的遍历。可迭代对象（如数组、Map）通过Symbol.iterator方法提供迭代器。迭代器支持for...of、解构赋值、展开运算符等语法，解决了不同数据结构遍历方式碎片化的问题。手动实现迭代器需要定义状态维护逻辑，而Generator函数可简化这一过程。迭代器机制为JavaScript提供了标准化的数据访问接口。
2025-09-01 00:48:10
896
原创 使用CSS创建带三角形指示器的气泡框
本文介绍了如何使用纯CSS创建带三角形指示器的气泡框。通过HTML基础结构和CSS样式实现，包括圆角矩形容器和利用边框技巧生成的三角形。关键点在于使用::after伪元素、边框属性设置以及精确定位技术。这种方法无需JavaScript或图片，简单高效，适合网页提示框、对话框等UI元素。文章还提供了完整代码示例并建议了可能的改进方向，如响应式设计、动画效果等。这种纯CSS实现方案轻量且易于定制。
2025-06-24 17:34:16
941
原创 使用JavaScript检测网络连接状态与性能指标
摘要：本文介绍了JavaScript中Navigator API的网络检测功能，包括基础在线状态检查和详细网络信息获取。通过navigator.onLine检测连接状态，利用navigator.connection获取网络类型、下载速度等参数。文章提供了完整示例代码展示实时网络监控的实现，并列举了自适应内容加载、离线提示等应用场景。同时指出需注意浏览器兼容性、隐私保护和数据准确性等问题。这些技术有助于开发响应式Web应用，特别适用于媒体密集型或需要离线支持的场景。
2025-06-10 00:22:10
680
原创 在Vue或React项目中使用Tailwind CSS实现暗黑模式切换：从系统适配到手动控制
在现代Web开发中，暗黑模式(Dark Mode)已成为提升用户体验的重要功能。本文将带你使用Tailwind CSS在React项目中实现两种暗黑模式控制方式：系统自动适配和手动切换。
2025-06-07 10:27:42
1081
原创 使用 SASS 与 CSS Grid 实现鼠标悬停动态布局变换效果
这篇文章介绍了一个纯CSS实现的3x3彩色格子网格交互效果。当鼠标悬停任意格子时，所在行和列会放大显示。主要技术点包括：CSS Grid布局构建基础网格，SASS循环生成9种不同颜色，利用:has()选择器监听悬停状态，结合SASS数学模块和列表操作动态调整行列比例。整个效果仅需少量HTML和SASS代码，无需JavaScript，但需注意:has()在Firefox的兼容性问题。该方案展示了现代CSS结合预处理器的强大表现力。
2025-06-01 00:32:15
835
原创 浏览器强缓存还未过期，但服务器资源已经变了怎么办？
本文探讨了前端开发中浏览器强缓存机制带来的经典问题：当服务器资源更新但浏览器仍在缓存有效期内时，用户无法获取最新版本。文章首先回顾了强缓存的原理，然后分析了问题场景及其原因，进而提供了三种解决方案：使用文件名hash（最佳实践）、缩短缓存时间+协商缓存、请求参数版本号。最后给出了不同资源的缓存策略推荐，强调通过资源唯一标识和合理缓存策略来兼顾性能与更新。核心要点是：文件名加hash可彻底解决问题，同时实现长期缓存和即时更新。
2025-05-24 23:47:04
971
原创 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
740
原创 node.js事件循环详解
Node.js 中的事件循环是一个高效的异步处理机制，它允许 Node.js 在单线程中处理大量的并发 I/O 请求，而不会阻塞程序的执行。理解事件循环的机制对于优化 Node.js 应用程序的性能至关重要，尤其是在处理大量 I/O 操作时。通过合理使用异步 API 和微任务、宏任务的优先级，可以确保应用程序能够高效地执行并响应请求。
2025-04-23 00:22:03
1263
原创 详解Node.js中的setImmediate()函数
setImmediate()的主要作用是将回调函数推送到事件循环的"Check"阶段。无论延迟时间是多少，它都会在当前事件循环周期的末尾执行，而不是等到下一个事件循环周期。
2025-04-23 00:08:27
1140
2
原创 深入理解 setTimeout：原理、问题与最佳实践
本文全面讲解了 JavaScript 中 setTimeout 的使用方法，包括语法、定时器 ID 管理、常见的 this 指向问题及其解决方案，分析了延迟不准确的原因，如事件循环和最小延迟限制，并展示了其在防抖、任务分片和动画控制中的实际应用，最后总结了常见问题和优化建议，帮助开发者更高效地使用定时器处理异步任务。
2025-04-21 09:52:28
393
原创 requestAnimationFrame() 详解：优化动画性能
requestAnimationFrame()是实现高效流畅动画的首选 API。它与浏览器的刷新机制深度集成，能够最大限度地减少性能开销，并自动暂停后台任务，有效节省资源。无论是简单的 UI 动画，还是复杂的游戏渲染，都能提供卓越的性能表现。
2025-04-21 09:29:50
1068
原创 浏览器重绘 vs 重排：性能优化必须懂的两大概念
在这篇博客中，深入探讨了浏览器渲染过程中两个关键概念——重绘（Repaint）和重排（Reflow）。解释了这两者的区别、它们如何影响页面性能，以及为何transform属性的使用可以有效提高页面渲染效率。通过理解这些基础知识，开发者可以优化网页表现，避免不必要的性能瓶颈。
2025-04-19 20:18:06
706
原创 详细解释浏览器是如何渲染页面的？
浏览器渲染页面的整个流程从接收到HTML文本开始，经过 HTML 解析、样式计算、布局、分层、绘制、光栅化 等多个阶段。每个阶段通过不同线程协作，确保页面高效渲染。
2025-04-19 20:01:26
958
原创 深入理解前端安全：CSRF与XSS攻击详解
CSRF（Cross-Site Request Forgery，跨站请求伪造），听起来像个高大上的术语，但其实它就是恶搞用户的日常操作。攻击者通过引诱已认证用户访问恶意网站，利用用户的身份发起未授权请求。结果？用户可能会无意中执行一些危险操作，比如转账、修改密码等。XSS（Cross-Site Scripting，跨站脚本攻击）就像是Web页面上的“病毒”，攻击者通过注入恶意脚本到网页，借此窃取数据或执行不法行为。不同于CSRF，它直接攻击浏览器环境，让用户的浏览器成为攻击的“战场”。
2025-04-19 17:44:02
2410
原创 JavaScript 原型链深度解析：继承与属性共享的核心机制
原型链的本质：对象通过__proto__连接形成链式结构，从而实现属性和方法的继承。最佳实践避免直接操作__proto__，推荐使用和来处理原型。在构造函数中定义引用类型属性，避免多个实例共享同一原型属性。对于类的继承，建议使用class语法，它是对原型链继承的封装，使得代码更简洁易懂。
2025-04-17 11:12:18
1070
原创 深入理解CSS定位：一文搞懂Static、Relative、Absolute、Fixed、Sticky的应用与区别
CSS定位是网页布局的核心技术之一，掌握各种定位方式对于前端开发者至关重要。本文将详细介绍CSS中的五种主要定位方式：静态定位、相对定位、绝对定位、固定定位和粘性定位，并通过实例展示它们的应用场景和差异。
2025-04-16 15:07:35
1121
原创 使用 Sass 打造动态星空背景效果
在前端开发中，视觉效果越来越受到重视。本文将通过一个生动的示例，讲解如何利用 Sass 构建一个具有动态星空滚动效果的背景页面，同时也系统介绍 Sass 的核心功能与实践技巧。
2025-04-15 14:35:37
907
原创 Vite到底是构建工具还是脚手架？前端工程化的“厨子”和“菜谱”
如果你还在用Webpack，试试Vite吧——毕竟，谁不想吃上秒上的菜呢？别急，我们就用“做饭”的比喻，轻松搞懂它们的区别！因为Vite把两者结合得太好了！刚学前端时，你是不是也被各种工具名词绕晕过？
2025-04-14 23:22:26
1198
原创 用Webpack 基础配置快速搭建项目开发环境
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，但是Webpack有大量的配置项，对新手不太友好，但是我们可以根据的init命令根据项目需求快速生成webpack的配置文件，本文将手把手教你如何用 Webpack 和 npm 快速搭建一个基础开发环境。
2025-04-14 22:49:10
699
原创 Webpack中的文件指纹：给资源戴上个“名牌”
文件指纹就像是给你的资源穿上了“高科技外衣”，不仅能让浏览器和CDN精确识别文件版本，还能避免因缓存问题带来的各种麻烦。无论是Hash、Chunkhash还是Contenthash，各有千秋，你只需选出最适合你项目的那一款。快乐构建，从有“名牌”的资源开始！
2025-04-12 17:23:34
1066
原创 Vue2和Vue3响应式的基本实现
在 Vue 框架中，数据的响应式是其核心特性之一。当页面数据发生变化时，我们希望界面能自动更新，而不是手动操作 DOM。这就需要对数据进行监听，并在数据变更时触发 UI 重新渲染。Vue2 和 Vue3 在实现响应式的方式上有所不同，Vue2 主要依赖，而 Vue3 则引入了Proxy，大大优化了响应式系统的性能和灵活性。它们都是通过函数来封装响应式对象，方便读取或更新数据时能够进行其他的操作。
2025-03-30 13:56:13
659
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人