- 博客(41)
- 收藏
- 关注
RSS订阅
原创 浅拷贝和深拷贝
引用：指向堆内存中的指针，指针指向的地址存储了引用类型数据。栈内存：7个基本类型存储在执行上下文栈中，正常情况跟随执行上下文一起被创建和回收。复用：多个变量为同一个引用。
2025-07-29 16:53:26
233
原创 前端工程化宏观基础概念
前端到底有哪些东西？前端语言：JavaScript、HTML、CSS协议：网络相关协议（http、websocket、oauth2、websocket）环境：浏览器、node环境、小程序环境、app环境、构建工具。框架/库：Vue、React、aixos服务器：node、expree、mysql、redis、mongoDB工程化：TS、saas、less、stylus。
2025-07-28 11:01:05
822
原创 深度贴：JS到底如何被执行——JavaScript引擎及执行上下文
JavaScript执行机制解析：从词法环境到V8引擎 本文系统梳理了JavaScript的核心执行机制，主要包括四个部分：1)词法环境与变量环境的区别及关系；2)闭包的形成机制与内存管理；3)V8引擎的完整执行流程；4)内存回收机制。文章详细解释了词法环境由环境记录和外部引用组成的三层结构，以及闭包形成的三要素；通过流程图展示了V8引擎从初始化到代码执行的全过程，包括解析、编译、优化等关键环节；最后分析了内存生命周期和垃圾回收机制。对变量提升、作用域链、执行上下文等核心概念进行了深入剖析，为理解JavaS
2025-07-27 00:24:52
1265
原创 LeetCode 热题100：160.相交链表
根据这个思路，当A和B指针遍历到null，跳到对方的头节点，若两个节点相等，则一定交于同一个节点（最终一定交于null）参照图片，链表A指针从开始到null，链表A步长 = 链表A独立节点步长 + 公共节点步长 + 空节点；链表A步长 + 链表B独立节点步长 == 链表B步长 +链表A独立节点步长。同理，链表B步长 = 链表B独立节点步长 + 公共节点步长 + 空节点。时间复杂度O(m+n)，空间复杂度O(m)时间复杂度O(m+n)，空间复杂度O(1)
2025-07-23 17:01:28
557
原创 LeetCode 热题100:42.接雨水
关键理解点1：不论如何，right_max和left_max最终会汇聚到height最高的一列，也就是 max = Math.max(...height)。Volume = min(left, right) - height，即。关键理解点2：总是以桶最短的边减去底座装满水。总是以桶最短的边减去底座装满水。这道题也可以用双指针。
2025-07-22 21:34:23
547
原创 LeetCode 热题100:11.接雨水
算法思路：volume = min(左边桶高，右边桶高)*桶长。左右相向双指针，时间复杂度O(n)，空间复杂度O(1)。
2025-07-22 16:56:21
163
原创 React 源码7:Lane、React和schedule优先级转换
在《源码3》requestUpdateLane函数根据eventLane获取不同情况对应优先级。
2025-07-16 18:41:10
673
原创 React源码5 三大核心模块之一:render，renderRoot
【代码】React源码5 三大核心模块之一:render，renderRoot。
2025-07-15 22:10:00
182
原创 React源码6 三大核心模块之一：commit, finishConcurrentRender函数
【代码】React源码6 三大核心模块之一：commit, finishConcurrentRender函数。
2025-07-15 22:09:57
251
原创 React源码4 三大核心模块之一：Schedule，scheduleUpdateOnFiber函数
在《React源码3》，我们已经将update加入队列并返回到了根容器节点root。
2025-07-15 18:13:10
425
原创 React源码3 ：update、fiber.updateQueue对象数据结构和updateContainer()中enqueueUpdate()阶段
回顾：初始化创建完FiberRootNode和hostRootFiber后，调用render方法update。
2025-07-15 00:08:39
754
1
原创 CSS设计理念：层叠、优先级和继承
简单的说，就是 CSS 规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
2025-07-12 03:15:20
146
原创 CSS 版本迭代历史和版本特性
这个版本包含了font(字体)的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性。分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容；同时模块独立实现和发布，也为日后CSS3.0标准正式推出铺垫。1998年5月，CSS2.0推出。推荐内容和表现效果分离的方式，开始使用样式表结构。CSS3.0的新特性是被分成若干个相互独立的模块。2001年，W3C着手开始准备开发CSS第三版规范，推出草案。将HTML和CSS分离，通过导入CSS文件到HTML文件，使用外联样式表。
2025-07-11 11:04:03
175
原创 深度帖：浏览器的事件循环与JS异步
从渲染主线程、同步的劣势和异步操作过程等角度回答。JS的运行环境JS是单线程的语言，这是因为它运行在浏览器渲染进程中的渲染主线程，渲染主线程只有一个。渲染主线程是浏览器线程里最繁忙的一个，承担了许多工作，解析HTML、解析CSS、计算样式、布局、处理图层、每秒渲染页面60次（60帧）、执行全局JS代码、封装成任务的事件处理和计时器回调函数(选几个回答)等都在其中执行。如果使用同步的方式，极有可能会造成渲染主线程的阻塞，从而导致消息队列中的很多其他任务无法执行。
2025-07-09 23:11:47
529
原创 数据结构1:哈希表HashMap
哈希表通常基于数组实现，是一种将文本、数字等数据通过哈希化投影到一维数组中存储的数据结构。提供快速的插入-删除-查找操作。无论数据量多大，插入和删除的时间复杂度O(1)。哈希表的查找速度很快。
2025-07-08 04:46:11
334
原创 React源码1 :React中三个重要节点Node ReactElement、FiberRootNode和FiberNode的构造函数
ReactV18.2源码在阅读源码过程中，有很多小白觉得奇怪、不常见的写法，往往是处于等角度出发，可以去稍作了解，但还是应以主要脉络为主。参考:1. Object.defineProperty(obj, prop, descriptor)静态方法会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。2.静态方法可以使一个对象被冻结。冻结一个对象是 JavaScript 提供的最高完整性级别保护措施。
2025-07-06 16:16:25
362
原创 使用Vite创建React初始化项目
安装依赖Vite：npm install --save-dev [email protected] @vitejs/[email protected]。安装制定版本react：npm install [email protected] [email protected]。├── index.html # Vite的入口文件。│ └── main.jsx # JS入口文件。├── node_modules #包文件。创建文件react-app。
2025-07-05 21:00:40
630
原创 已解决：React在Chrome F12 调试台断点调试中跳过node_modules内部黑盒
在最左侧文件夹一栏中，右键node_modules，点击将其“从忽略列表中移除”，问题解决。（博主最开始遇到问题时无图片最下方黄色提示部分，解决问题将问题还原后才新增的提示）当我点击下一步时，程序直接结束。遇到这种情况，无法得知黑盒内部源码运行机制。
2025-07-05 17:07:12
609
原创 ES：ECMA与JavaScript
因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。
2025-07-05 00:31:57
769
原创 Ajax：现代JS发起http通信的代名词
Ajax，全称Asynchronous JavaScript and XML（extensive Markup Language，XML）。浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。
2025-07-04 23:38:31
223
原创 浏览器渲染引擎和JS引擎分类
(Microsoft Internet Explorer)，IE浏览器。(Chrome, Chromium)，Node.js也是V8。(Safari)，苹果IOS浏览器。(Firefox)，火狐。
2025-07-04 22:25:09
119
原创 误区：你可能理解错了JS的单线程了。
如果排队是因为计算量大，CPU 忙不过来，倒也算了，但是很多时候 CPU 是闲着的，因为 IO 操作（输入输出）很慢（比如 Ajax 操作从网络读取数据），不得不等着结果出来，再往下执行。JavaScript 运行时，除了一个正在运行的主线程，引擎还提供一个任务队列（task queue），里面是各种需要当前程序处理的异步任务。答案就是引擎在不停地检查，一遍又一遍，只要同步任务执行完了，引擎就会去检查那些挂起来的异步任务，是不是可以进入主线程了。等到同步任务全部执行完，就会去看任务队列里面的异步任务。
2025-07-03 19:44:01
500
原创 React VDOM中双fiber树挂载初始化过程（React Element➡️Fiber Node）
（current Fiber Tree，左）（current Fiber Tree，左）（双Fiber Tree的最“根”节点）
2025-07-03 06:06:25
148
原创 React:useState()方法详解
以use开头的方法都是React中的钩子（Hook函数），用来勾住不同的React特性。Hook只在渲染时生效。下面写法等式左边是数组解构（“模式匹配”）。()的唯一参数是 state 变量的。每次你的组件渲染时，
2025-06-30 03:41:20
308
原创 为html元素绑定事件的三种方式
浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。JavaScript 有三种方法，可以为事件绑定监听函数。
2025-06-29 16:21:31
333
原创 浏览器处理文件通用流程
当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息。下面的步骤是浏览加载网页的简化版本。虽然不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。
2025-06-29 11:15:12
210
原创 JS中的对象（Object）
这个角度看，对象是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。属性是对象的状态，方法是对象的行为（完成某种任务）。一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个远程服务器连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。对象，使用“属性”记录具体是哪一种动物，使用“方法”表示动物的某种行为（奔跑、捕猎、休息等等）。
2025-06-27 15:22:18
151
原创 栈、回调栈(Call Stack)与执行上下文(Execution Context)
JS在一开始运行后，先将全局可执行上下文push到栈底，依次遍历代码，将可执行的代码push进栈，代码依次被处理后被pop出栈，当执行完全部的代码，全局可执行上下文pop出，程序结束。可执行上下文：在上述表达中，入栈的可执行上下文 = 入栈部分代码及其环境（理解成作用域就行了，作用域：全局就是全局作用域，还包括模块作用域、函数作用域以及块作用域）。栈：一种数据结构，遵循先进后出(FILO,First In Last Out)的原则，区分于队列先进后出（FIFO，First In Last Out）不同。
2025-06-26 02:31:28
120
原创 JS中原始值（primitive values）和引用数据类型存储方式
封装成对象Object的其他类型都叫引用类型，如Array、Function()等你能想到除了基本类型之外的所有。所以对引用类型标识符进行操作实际操作的是对象的引用，通过引用才能访问对象的值。
2025-06-25 17:12:03
95
原创 JS中的事件循环过程
遇到宏任务分发器（也可以称之为宏任务任务源）将其代码分发到宏任务环境中，若该任务条件满足时，会被分发到宏任务队列排队(如不同时间的setTimeout1(,9999)，setTimeout2(,0)即使timeout1在前，宏任务也先执行setimeout2）；➡️执行该次分发的微任务队列，将其放入回调栈并执行，拿取队列下个微任务➡️最后一个微队列的回调栈清空，微任务事件循环结束➡️第一轮宏任务的事件循环结束，从宏任务队列拿取第二个宏任务，进行下一次宏任务事件循环。➡️执行完最后一个宏任务，结束。
2025-06-25 15:32:00
334
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人