- 博客(39)
- 收藏
- 关注
RSS订阅原创 Web前端性能指标
LCP（Largest Contentful Paint）最大内容绘制（WebVitals 核心）INP（Interaction to Next Paint）新核心交互指标（必学）CLS（Cumulative Layout Shift）累积布局偏移（核心）FCP（First Contentful Paint）首次内容绘制。FID（First Input Delay）首次输入延迟（老核心）FCP（First Contentful Paint）首次内容绘制。FP（First Paint）首次绘制。
2026-07-09 18:18:39
430
原创 浏览器页面渲染流程
浏览器渲染流水线核心流程分为5个阶段：1)解析HTML生成DOM树；2)解析CSS构建CSSOM树；3)样式计算确定节点最终样式；4)布局阶段计算几何信息；5)绘制和合成最终渲染页面。其中回流(Layout)性能消耗最大，重绘(Paint)次之，合成(Composite)最优。优化关键点在于减少阻塞操作，避免频繁触发回流/重绘，优先使用transform/opacity等只触发合成的属性，合理利用图层技术提升渲染性能。
2026-06-25 18:19:43
369
原创 Vue2与Vue3之间API差异
本文对比了Vue的Options API和Composition API，从设计理念、代码组织、逻辑复用、类型支持等方面分析了两者的核心差异。Options API以选项分类为核心，适合小型项目和初学者；Composition API以逻辑聚合为核心，更适合复杂场景和团队协作。Composition API在逻辑复用、类型推导和代码维护性上更具优势。建议根据项目规模选择：小型项目用Options API快速开发，中大型项目优先Composition API。两者并非替代关系，Vue 3同时支持两种API以满
2026-06-12 16:37:32
220
原创 Vue3 编译优化
Vue 3通过编译阶段优化大幅提升性能，核心思路是在编译时分析模板，让运行时只处理动态变化的部分。主要优化包括：1）静态提升——将静态节点提取复用，避免重复创建；2）树结构打平——将嵌套DOM转换为一维数组，降低diff复杂度；3）PatchFlags——标记动态节点类型，实现精准更新；4）多层缓存——缓存渲染函数、事件处理等。这些优化使Vue 3从全量虚拟DOM对比变为定向diff，运行时性能显著提高。
2026-06-05 17:01:48
443
原创 Vue3 手写响应式原理
Vue3响应式原理基于Proxy+Reflect实现，相比Vue2的Object.defineProperty具有更全面的拦截能力和更好的性能。核心逻辑包括：通过Proxy拦截对象操作，使用WeakMap和Map构建依赖收集系统，实现惰性深层响应式。代码实现展示了Depend类管理副作用函数、CollectionOfDepend类维护依赖关系、reactive函数创建代理对象、watchEffect注册副作用等核心功能。当数据变更时，会触发关联的副作用函数执行，实现响应式更新。该实现支持对象嵌套属性监听，且
2026-05-18 11:09:03
276
原创 Vue3 架构
Vue 3 采用模块化、分层式架构设计（基于 Monorepo 管理），相比 Vue 2 的 “整体式” 架构，最大特点是「解耦核心逻辑、按需引入、跨平台扩展」，所有功能围绕「三大核心模块」展开，模块间通过标准化接口交互，兼顾灵活性与性能。Vue 3 的核心代码被拆分为编译时（Compiler）、运行时（Runtime）、响应式系统（Reactivity） 三大独立模块，且每个模块可单独使用（如仅用 Reactivity 做状态管理），是 Vue 3 架构的基石。
2026-05-09 19:20:25
490
原创 详解Cursor 中 Skill、Spec
摘要： AI编程工具在企业研发中日益重要，合理构建AI Workflow需围绕Cursor的Skill（能力）与Spec（规范）展开。Spec定义强制约束（如编码规范、技术栈要求），确保代码统一性；Skill赋予AI专项能力（如组件开发、接口联调），但执行时需遵循Spec约束。设计原则包括：Spec需轻量化、可迭代，Skill需场景化、流程化。企业应用中，Spec需清晰无歧义，Skill须绑定Spec并标准化输出，通过组合多Skill完成复杂任务，同时定期优化流程。最终实现规范约束与效率提升的平衡，推动AI
2026-04-26 12:33:48
981
原创 React并发模式与Suspense原理
本文梳理了React并发模式的核心概念：并发更新通过优先级调度实现任务中断与恢复，提升交互响应性；Suspense通过捕获Promise实现异步资源加载时的优雅降级；useDeferredValue/useTransition则基于优先级调度优化渲染性能。文章还通过一个极简版Suspense模拟实现，展示了其"暂停渲染-等待异步-重试渲染"的核心机制。这些特性共同构成了React现代并发渲染体系的基础，有效解决了长任务阻塞和异步加载体验问题。
2026-04-21 16:30:39
383
原创 CRA 迁移 Rspack（实战）
本文介绍了将基于CRA搭建的React项目迁移至Rspack的完整过程。针对原有项目存在的开发启动慢、热更新延迟、构建时间长等问题，详细说明了迁移步骤：安装核心依赖、修改npm命令、创建Rsbuild配置文件。同时提供了CSS预处理器、SVGR转换等常见场景的解决方案，以及代理配置和Webpack配置的迁移方法。通过迁移到Rspack，项目构建性能得到显著提升，有效解决了原有性能瓶颈问题。文章还附带了相关技术文档链接，为开发者提供了进一步学习资源。
2026-04-18 13:24:13
478
原创 Rspack简介
Rspack是由字节跳动开发的一款高性能前端构建工具，旨在解决Webpack构建速度慢和Vite生态兼容性不足的问题。它基于Rust语言开发，兼容Webpack生态，提供极致的构建速度，同时支持TypeScript、JSX等丰富的构建功能。性能测试显示，Rspack在大型项目中比Webpack快10倍左右，且比Vite的构建速度更稳定。Rspack适用于需要高性能构建的Webpack老项目和大型项目，为开发者提供了兼顾性能与兼容性的新选择。
2026-04-17 16:46:55
469
原创 React Hooks原理
本文深入解析React Hooks的设计原理与实现机制。Hooks旨在解决类组件的状态逻辑复用困难、组件复杂度高等问题，通过useState和useEffect两个核心Hook实现函数组件的状态管理和生命周期能力。文章详细剖析了Hooks的底层实现：useState通过数组索引匹配状态，setState触发重渲染；useEffect通过依赖数组对比决定回调执行，支持清理函数避免内存泄漏。同时解释了Hooks调用规则背后的原因，即维护稳定的状态索引匹配关系。文中还提供了简化版实现代码，帮助开发者深入理解Hoo
2026-04-15 19:07:13
420
原创 React状态更新流程
React 中 setState 的同步/异步特性由 React 更新上下文决定：在合成事件、生命周期等 React 可控上下文中表现为异步（批量更新），而在原生事件、定时器等不可控上下文中则为同步执行。其核心机制通过 dispatchAction 更新链路实现，包括创建 Update 对象、加入队列和调度更新等步骤。批量更新原理依赖于事务机制和 isBatchingUpdates 标记，将多次状态变更合并为单次 DOM 更新以优化性能。开发时需注意不同场景下的行为差异，可通过回调函数或函数式更新确保获取最
2026-04-14 17:23:05
489
原创 React中BeginWork和CompleteWork解析
React调和阶段通过beginWork和completeWork两大核心方法完成Fiber树的构建与更新。beginWork在递阶段负责Fiber节点的创建/复用、Diff算法执行和子节点生成；completeWork在归阶段处理DOM生成、副作用收集和属性处理。两者基于深度优先遍历协同工作，确保高效更新且不阻塞高优先级任务。调和阶段仅计算更新结果，实际DOM操作在提交阶段执行。
2026-04-13 18:31:57
429
原创 Fiber调度原理解析
Fiber调度原理（Scheduler）学习笔记摘要 React Scheduler 是一个基于优先级的时间切片任务调度系统，解决了原生 requestIdleCallback 的局限性。其核心特性包括： 优先级设计：通过过期时间（expirationTime）定义任务优先级，过期时间越短优先级越高，已过期任务立即执行。 时间切片：将长任务拆分为不超过5ms的小任务切片，通过requestAnimationFrame+MessageChannel实现精确控制，确保主线程不被长期阻塞。 抢占式调度：高优先级任
2026-04-12 15:33:32
370
原创 React中Fiber数据结构
摘要 Fiber 是 React 的核心虚拟 DOM 增强节点，作为可中断/恢复调度的核心数据结构，它通过 return、child、sibling 指针形成双链表树结构，支持高效遍历和动态操作。Fiber 节点包含六大类属性：节点标识、层级关联、组件信息、调度控制、DOM 关联和更新状态，支撑 React 的渲染全流程。其双缓存机制通过 alternate 指针连接 current 和 workInProgress 树，实现无阻塞渲染。Fiber 架构使 React 能够拆分任务并按优先级调度，是理解 R
2026-04-10 14:41:21
359
原创 React18架构
React架构演进：从同步到并发的革新之路 React架构经历了从Stack Reconciler到Fiber Reconciler的重大变革。旧版Stack采用递归同步机制，存在主线程阻塞问题；新版Fiber通过可中断的链表结构，实现任务拆分和优先级调度，解决了性能瓶颈。React 18基于Fiber核心构建了分层架构：底层Fiber负责虚拟DOM协调，中间调度器管理任务优先级，上层渲染器适配多平台。这种设计支持并发渲染、自动批处理等特性，大幅提升了用户体验和架构扩展性。整体演进体现了React从同步阻塞
2026-04-09 18:16:28
411
原创 详解JS中闭包原理以及应用场景
闭包原理与应用摘要 闭包是函数能够访问并保留其定义时词法作用域变量的特性，由函数嵌套、内部函数引用外部变量和外部函数执行返回内部函数三个条件构成。其核心优势在于实现变量私有化、模块化封装和状态保存，但也可能导致内存泄漏和性能问题。实际应用中，闭包广泛用于模块化设计、防抖节流函数和私有变量保护。在React Hooks中，闭包机制可能导致状态捕获问题，需要合理处理依赖数组。内存管理方面，应注意及时解除引用或使用弱引用避免泄漏。掌握闭包原理对编写高效、安全的JavaScript代码至关重要。
2026-04-08 16:24:13
472
1
原创 详解JS中执行上下文 / 调用栈 / 作用域链
本文系统介绍了JavaScript执行上下文的核心概念。执行上下文是代码执行的环境，分为全局、函数和Eval三种类型，其生命周期包括创建、执行和销毁三个阶段。创建阶段涉及this绑定、词法环境（存储let/const等）和变量环境（存储var/函数声明）。调用栈采用后进先出原则管理执行上下文。作用域链通过[[Environment]]属性实现变量查找。文章还对比了GO/AO/VO/VE/LE等关键概念，并通过流程图展示了执行流程。这些机制共同构成了JavaScript代码执行的基础架构。
2026-04-07 18:00:25
434
原创 React18中添加React Compiler编译优化
摘要：本文介绍了使用React Compiler优化基于CRA+React18的中型后台管理系统性能的实践。随着业务复杂度增加，组件重渲染问题导致页面卡顿和响应延迟。传统手动优化方法存在依赖项管理困难、代码冗余等问题。通过安装babel-plugin-react-compiler和runtime依赖，配置craco.config.js后，编译器自动分析代码并插入优化逻辑，无需修改业务代码。实际效果显著减少了不必要的重渲染，提升了运行效率，尤其适用于组件多、交互复杂的项目。该方案实现了近乎零改动的性能优化，且
2026-04-03 20:15:36
426
原创 Vue 3 DOM Diff 算法实现原理
Vue 3 的 DOM Diff 算法通过同级比较双端对比算法最长递增子序列优化等策略，显著提升了性能。同时，Vue 3 还通过静态提升Patch FlagBlock Tree等优化手段，进一步减少了不必要的计算和 DOM 操作。理解 Vue 3 的 DOM Diff 算法不仅有助于我们更好地使用 Vue，还能为我们在实际开发中优化性能提供思路。希望本文能帮助大家更深入地掌握 Vue 3 的核心机制！
2025-03-13 18:27:47
1023
原创 async&await原理实现
本文深入剖析了async/await异步编程机制。首先指出其本质是基于Promise的语法糖，将链式调用转化为同步写法，提升代码可读性。然后通过示例解析其底层执行机制，说明遇到await会挂起函数，待Promise状态改变后通过微任务恢复执行。接着对比Generator实现异步的方式，指出async/await自动执行和错误处理的优势。最后给出Generator自动执行函数的手写实现，验证其原理。文章强调async/await结合了Generator和Promise的优点，是现代前端异步开发的首选方案。
2023-09-21 17:16:55
250
原创 JS算法系列-每日一题(数组子集)
回溯算法定义：回溯算法实际上一个类似枚举的搜索尝试过程，主要是在搜索尝试过程中寻找问题的解，当发现已不满足求解条件时，就“回溯”返回，尝试别的路径。但当探索到某一步时，发现原先选择并不优或达不到目标，就退回一步重新选择，这种走不通就退回再走的技术为回溯法，而满足回溯条件的某个状态的点称为“回溯点”。当取出1时：子集为[1]，剩余数字2和3，再下次递归时，则需要从2开始取出，取2则为[1,2]，以此类推。输出：[[],[1],[1,2],[1,2,2],[2],[2,2]]输入：nums = [1,2,2]
2023-09-19 16:21:36
215
原创 JS算法系列-每日一题(移除元素)
例如，函数返回的新长度为 2 ，而 nums = [2,2,3,3] 或 nums = [2,2,0,0]，也会被视作正确答案。解释：函数应该返回新的长度 5, 并且 nums 中的前五个元素为 0, 1, 3, 0, 4。解题思路：要求原地移除数组中的元素，可以想到使用数组的splice方法，我们只需要循环数组，去除其中值等于val的元素即可。输入：nums = [0,1,2,2,3,0,4,2], val = 2。元素的顺序可以改变。输入：nums = [3,2,2,3], val = 3。
2023-09-15 14:49:38
188
原创 JS算法系列-每日一题(无重复字符的最长子串)
请注意，你的答案必须是 子串 的长度，"pwke" 是一个子序列，不是子串。给定一个字符串 s ，请你找出其中不含有重复字符的 最长子串 的长度。解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。解释: 因为无重复字符的最长子串是 "wke"，所以其长度为 3。解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1。输入: s = "abcabcbb"输入: s = "pwwkew"输入: s = "bbbbb"
2023-09-13 21:20:04
796
原创 【es6系列】手写Promise
前言：Promise作为解决异步问题的一种方案，成功替代了以往的callback回调函数，在而今的开发中广泛使用，但是它的实现原理更需要掌握。Promise状态一旦确定，变为fulfilled或rejected后，将不可更改；抱着这样的思路，我们将实现一个基础功能的Promise。fulfilled：成功。rejected：失败。实现细节下次补充~~~
2023-09-08 17:33:16
145
原创 JS算法系列-每日一题(合并两个有序数组)
注意，因为 m = 0 ，所以 nums1 中没有元素。nums1 中仅存的 0 仅仅是为了确保合并结果可以顺利存放到 nums1 中。,5,6] ，其中斜体加粗标注的为 nums1 中的元素。最终，合并后数组不应由函数返回，而是存储在数组。需要合并 [1,2,3] 和 [2,5,6]。需要合并的数组是 [] 和 [1]。个元素表示应合并的元素，后。需要合并 [1] 和 []。中，使合并后的数组同样按。合并结果是 [1]。合并结果是 [1]。题解2：截取添加+排序。
2023-09-07 14:33:13
124
原创 vue3响应式原理实现
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。问题2：使用WeakMap存放多个对象，WeakMap的key即为每个对象，value为对象所对应的map结构，如下代码，我们创建了一个代理对象，并拦截了get与set操作，同时使用Reflect中的静态方法来操作对象；上面则是对Proxy的基本用法，创建了一个代理对象，对空对象进行了拦截，重定义了属性的读取（2、当有多个对象的情况，如何存放；
2023-06-01 17:11:53
453
原创 vue3页面权限以及按钮权限
最近再写一个vue3项目中，需要涉及页面以及按钮权限，在此做一个简单的记录。一、页面权限：有两种方案可以实现（本文采用的第二种方式）：1、匹配角色路由后，通过vue-router中的addRoutes方法添加。2、在sidebar组件中使用工具函数，通过meta中定义的code与后端返回的codeList做对比，没有则隐藏菜单。sidebar.vue<template> <div :class="{ 'has-logo': showLogo }">
2022-01-09 18:46:13
3142
转载 前端webSocket基础配置
1、JS<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit
2022-01-09 18:18:56
2016
原创 基于element-ui树形穿梭框
最近写项目，遇到了需要使用树形结构并且是穿梭框的场景，为了避免以后遇到相同的场景而出现没必要的工作量，编写了一款组件；文档地址：ele-tree-transfer - npm
2022-01-06 17:31:53
3475
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人