- 博客(70)
- 收藏
- 关注
RSS订阅原创 虚拟 DOM Diff 算法详解
摘要：虚拟 DOM Diff 算法是现代前端框架（React/Vue）的核心优化技术，通过对比新旧虚拟 DOM 树差异，最小化真实 DOM 操作。算法核心包括：同级比较：仅逐层对比子节点，避免跨层级（O(n)复杂度）；列表优化：依赖 key 标识节点，React采用双端比较，Vue结合双指针与编译优化；特殊处理：根节点类型变化时直接销毁重建。优化策略：key 提高节点复用率，避免就地更新；双端对比减少移动操作；结合虚拟列表、Fiber架构应对大数据场景。React与Vue差异在于：R
2025-06-12 14:42:40
824
原创 JS 原型与原型链详解
本文详细讲解了JavaScript中的原型与原型链机制。主要内容包括：1) 原型基础概念，介绍如何访问对象原型和构造函数、实例对象与原型对象的三者关系；2) 原型链的查找机制和代码示例分析；3) new操作符的执行原理及其手动实现；4) 原型链继承的实现方式。文章通过清晰的代码示例和关系图，阐述了JavaScript基于原型的继承特性，帮助读者深入理解这一核心概念。
2025-06-11 17:50:26
1019
原创 JS闭包详解：从原理到实践
闭包的本质 = 内部函数 + 引用的外层函数变量闭包（Closure）是指函数和其定义时的作用域链的结合，使得函数能够跨作用域访问变量。简单说，当一个函数内部定义了另一个函数，并且内部函数引用了外部函数的变量，那么内部函数就形成了一个闭包。只在必要时使用闭包：评估是否真的需要使用闭包，有时可以通过其他方式实现相同功能限制闭包引用的变量：只闭包引用真正需要的变量，避免大对象或DOM元素清理不需要的闭包：提供清理机制，如取消订阅、移除事件监听器等注意函数定义的位置。
2025-06-10 17:03:59
929
原创 JS 节流（Throttle）与防抖（Debounce）详解
是的，移动端建议适当增加延迟（如PC用300ms，移动端用500ms）（Lodash）或未实现立即执行逻辑。
2025-06-05 11:46:42
696
原创 JS 事件循环详解
JS 是一种单线程语言，这意味着它只有一个主线程（执行栈）来处理所有任务。这种设计避免了多线程环境中的复杂同步问题，但也带来了一个挑战：如何防止长时间运行的代码阻塞整个程序？：执行栈中的任务依次执行。
2025-05-30 15:00:19
1025
原创 React Contxt详解
React 的 Context API 是用的解决方案，尤其适合解决「prop drilling」（多层组件手动传递 props）的问题。
2025-05-19 17:40:35
1129
原创 JS Map使用方法
Map 是 ES6 引入的一种数据结构，用于存储键值对，具有以下特性：键可以是任意类型，保持插入顺序，支持直接获取大小，且在频繁增删操作时性能优于普通对象。常用方法包括 set、get、has、delete 和 clear，并支持多种遍历方式。与 Object 相比，Map 在键类型、顺序、大小获取和性能方面更具优势，但不支持直接序列化。实际应用中，Map 可用于统计字符频率、缓存计算结果等场景。需要注意的是，Map 使用 "SameValueZero" 算法比较键，且使用对象作为键时需注意内存管理问题。
2025-05-13 17:53:31
709
原创 Vue 的双向绑定原理，Vue2 和 Vue3 双向绑定原理的区别
Vue 的双向绑定（Two-way Data Binding）是其核心特性之一，其本质是通过结合实现的。
2025-05-06 17:20:02
992
原创 Vue 2 与 Vue 3 自定义指令（Directive）详解
Vue 的自定义指令（Directive）允许开发者直接操作 DOM，实现原生 HTML 无法直接实现的功能（如自动聚焦、滚动加载等）。以下是 Vue 2 和 Vue 3 中自定义指令的核心差异及详细用法。
2025-04-30 07:00:00
1106
原创 0.5 像素边框实现
推荐方案：优先使用缩放伪元素，兼容性最好。高分辨率设备：可结合媒体查询直接使用0.5px。简单场景：尝试box-shadow或0.5px（需测试目标浏览器支持）。性最好。高分辨率设备：可结合媒体查询直接使用0.5px。简单场景：尝试box-shadow或0.5px（需测试目标浏览器支持）。根据实际需求选择合适方案，并注意测试不同设备的显示效果。
2025-04-29 14:00:00
383
原创 JS深拷贝和浅拷贝
浅拷贝适合简单数据，或明确知道不需要独立嵌套属性的场景。深拷贝适合复杂对象，或需要完全独立副本的场景。实际开发中优先使用或 Lodash 的，手写深拷贝需谨慎处理边界情况。
2025-04-29 07:00:00
823
原创 Vue2和Vue3区别之API
Options API 是 Vue 2 中定义组件的标准方式，通过一个包含多个选项的对象来描述组件逻辑。开发者将组件的不同功能分散在不同的选项中（如。
2025-04-28 07:00:00
1141
原创 CSS 内容超出显示省略号
推荐在移动端或 WebKit 内核环境使用，其他场景可考虑后端截断或 JavaScript 方案。在 CSS 中实现内容超出显示省略号，主要通过控制文本溢出行为来实现。根据需求选择合适方案，单行场景推荐优先使用。若元素默认是行内元素（如。
2025-04-27 16:54:52
1854
原创 Vue2、Vue3区别之响应式原理
工作原理：通过遍历数据对象的每个属性，使用Object.defineProperty来定义getter和setter。当数据被访问时，收集依赖；当数据变化时，触发更新。但这种方法有一些限制，比如无法检测到对象属性的添加或删除，需要借助Vue.set或Vue.delete方法。对于数组，Vue 2需要重写数组的方法（如push、pop等）来触发更新，而不能直接通过索引设置元素或修改长度。实现步骤：Object.defineProperty()语法代码示例：2. 局限性无法检测动态属性：解
2025-04-27 08:58:33
1361
原创 CSS常见布局
渐进增强：先写 Flex 布局，再用 Grid 覆盖。：一维布局（水平或垂直方向），通过容器控制子项排列。针对 IE 编写降级代码或使用 Polyfill。：二维布局（行列同时控制），适合复杂网格结构。使用 Autoprefixer 自动添加前缀。：导航栏、等分布局、垂直居中、响应式排列。：仪表盘、卡片网格、杂志式布局。
2025-04-25 11:47:52
1514
原创 CSS标准盒子（标准盒模型）和怪异盒子（怪异盒模型）
标准盒子：内容尺寸独立，但总尺寸易失控（需手动计算padding和border怪异盒子：总尺寸固定，内容自适应，更适合现代响应式布局。优先选择border-box，仅在特殊需求时回退到。
2025-04-25 07:00:00
2130
原创 Vue2的生命周期
/ ❌ 错误：箭头函数导致 this 指向错误// this 不是 Vue 实例// ✅ 正确：使用普通函数// 正常访问数据。
2025-04-23 16:39:44
876
原创 v-show和v-if的区别，使用场景
它们都依赖于 Vue 实例的数据属性来动态控制元素的显示与隐藏。数据属性发生变化时，Vue 会自动更新 DOM，从而改变元素的显示状态。这与 Vue 响应式原理紧密相关，只要数据变化，对应的视图就会更新。二者在使用时的语法基本相同，都是在 HTML 标签上以指令形式存在，并且后面跟一个 JavaScript 表达式。，都能用于根据不同条件渲染不同的内容。在实际开发中，可根据业务逻辑设置不同的条件表达式，从而实现灵活的页面渲染。），来控制元素显示或者隐藏的状态。时，对应的元素会显示；要复杂的多，因为还有。
2025-04-22 07:00:00
2421
原创 什么是SPA，SPA与MAP区别
SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTMLJavaScript和CSS。
2025-04-21 16:44:29
1225
原创 SEO（搜索引擎优化）是什么？
SEO 是提升网站在搜索引擎中可见性的核心技术，通过优化内容、结构和外部链接，实现免费流量的增长。对于 SPA 这类前端渲染的应用，需通过 SSR、静态化等技术解决内容抓取问题，平衡用户体验与搜索引擎友好性。
2025-04-21 16:36:41
952
原创 认识Vue
维度Vue传统开发架构MVVM + 组件化MVC/MVP + 分散代码数据绑定双向绑定，响应式手动操作 DOM性能虚拟 DOM 优化直接操作真实 DOM工程化现代化工具链，TypeScript 支持依赖 Webpack 基础配置适用场景中大型 SPA，复杂交互简单页面，静态内容选择建议若项目复杂度高、需长期维护，Vue 的组件化、状态管理和工程化能力显著提升效率。若为简单页面或需直接操作 DOM（如游戏），传统开发可能更直接。总结。
2025-04-17 17:43:26
745
原创 Promise详解
Promise 在什么场景使用，如何实现（手写 Promise），Promise 的静态方法有哪些？除了 Promise 还有哪些可以处理异步操作，Promise 属于宏任务还是微任务？
2025-04-15 08:00:00
968
原创 微任务（Microtasks）与宏任务（Macrotasks）详解
宏任务表示需要较长时间执行的任务，每次事件循环中只执行一个宏任务，随后处理微任务队列。
2025-04-14 15:19:16
794
原创 数据类型与判断
JS 的数据类型有哪些？null 和 undefined 的区别是什么？如何判断一个变量的数据类型（typeof、Array.isArray ()、instanceof 等方法的考察）？
2025-04-07 17:54:44
919
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人