- 博客(116)
- 收藏
- 关注
RSS订阅
原创 理解虚拟dom
虚拟 DOM是由一系列的 JavaScript 对象组成的树状结构，每个对象代表着一个DOM元素，包括元素的标签名、属性、子节点等信息。虚拟 DOM中的每个节点都是一个 JavaScript 对象，它们可以轻松地被创建、更新和销毁，而不涉及到实际的DOM操作。将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的DOM与之保持同步。
2024-03-31 00:23:00
1391
原创 vue和react的区别
因为View中很多控件的数据类型和Model中的属性不相同，例如Model中的时间数据可能是一串数字，View想要展示成日期的格式，这就需要一种转化，这个转换如果放在View不合适，因为View中不应该出现逻辑代码，放在Model中也不合适，这回导致Model臃肿庞大，因为这种问题的存在诞生了ViewModel，，但是单向数据流并非单向绑定，React想要从一个组件去更新另一个组件的状态，需要进行状态提升，即将状态提升到他们最近的祖先组件中，触发父组件的状态变更，从而影响另一个组件的显示。
2024-03-08 23:25:05
1418
原创 react的diff源码
react 的每次更新，都会将新的 ReactElement 内容与旧的 fiber 树作对比，比较出它们的差异后，构建新的 fiber 树，将差异点放入更新队列之中，从而对真实 dom 进行 render。简单来说就是如何通过最小代价将旧的 fiber 树转换为新的 fiber 树。
2024-03-08 23:03:15
1121
原创 gc（关于v8垃圾回收机制联想到的知识点）
这也是两者最大的区别。V8 是使用副垃圾回收器和主垃圾回收器处理垃圾回收的，不过由于 JavaScript 是运行在主线程之上的，一旦执行垃圾回收算法，都需要将正在执行的 JS 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。：对于对象A，任何一个对象引用了A的值，计数器+1，引用失效时计数器-1，当计数器为0时责备回收，但是会存在循环引用的情况，可能会导致内存泄漏，自2012年起，所有的现代浏览器均放弃了这种算法。通过增量标记的方式，V8引擎可以在垃圾回收过程中与应用程序的逻辑交替执行，减少长时间的阻塞。
2024-02-02 13:01:59
1334
原创 京东啊啊啊啊啊
那你觉得其实京东的业务场景也有很多这种和就是容易有性能问题的场景，比方说，嗯，我的订单就是一个很长的一个长远表，然后，嗯，那你做这种长远表的时候，我可以再说一下他具体的交互的形态和，就比方说我的订单他其实可以是无限的下拉的。OK，那现在还有这样一个场景，比方说一个 react 组件里边，嗯。比如说他，我两次 set 第二次的时候，他读到的，虽然可能是说这两次在变化，他读到的可能都是之前的那一部分，但实际执行的时候因为这个次序的问题，他可能就变了，除了刚才这个 set state 的场景，你就是函数式的。
2025-12-20 22:54:13
262
原创 非官方的 成功人
然后有一些小的一些营销商这些，但是没有的这些一般是有保丝绸在成功来承接的，然后对于一些没有的店铺的话，他就可以来我们平台去订购这些保丝绸提供的那些保险服务，他订购完了之后，然后在他的那个商品的 SQL 页面就会有相应的展示。然后买家买到这个，买这个商品的时候，购买这个相应的服务了之后，相当于给他多下了一笔单，然后基本上大概的类似的一些产品都是这样，就是先要做买家的，也要做卖家的，然后买卖家的流程都有，然后卖家的流程主要是以 PC 端为主。然后买家，嗯，然后移动就会有设计好的，我这边就暂时没有其他问题。
2025-12-04 19:33:04
196
1
原创 懒加载的原理
return (✅ 执行流程：页面初始化，React 渲染 App 组件遇到，它是由 React.lazy 创建的，内部会触发动态 import('./LazyComp')动态 import() 发起网络请求，异步加载 LazyComp.js（代码分割后的 chunk）在 JS chunk 还没下载并执行完成时，LazyComp 组件还未准备好Suspense 检测到组件未 ready，于是展示。
2025-11-22 19:16:01
801
原创 关于规则引擎的业务指标埋点
为了采集项目的业务指标，比如规则使用率、布局效率、用户满意度等，我们设计了一套前端埋点方案，主要围绕用户的关键行为和系统核心功能来上报数据。“埋点主要分为几个模块：” 比如用户什么时候创建规则、创建了什么类型、保存了几条、哪些规则被实际布局引擎使用，我们会记录等事件。 包括用户是否使用自动布局、布局耗时多久、有没有手动调整、布局结果是否满意，对应事件如layout_end。 比如用户访问了哪些功能模块、日活、功能点击、留存情况，通过user_visit等事件来统计。
2025-11-20 20:21:52
698
原创 监听错误的方式有哪些？
同步代码：使用try-catch（最基础）try {// 可能抛出错误的同步代码throw new Error('同步错误');console.error('捕获到同步错误:', error.message);✅ **能捕获：** 同步代码中通过throw抛出的错误❌ **不能捕获：** 异步代码、Promise 错误、全局错误等。
2025-11-10 22:50:33
694
原创 关于部署知识
有个硬件，然后他提供了一个 SDK，就是 JS 的 SDK，然后他那个 SDK 能够接收那个硬件的消息，我现在想让你就在我的网页上实现一个功能，就是那 SDK 接收到消息之后，然后你在页面上弹一个消息的弹框。对，然后这个页面有可能会多开的情况下，那永远我希望在浏览器当前激活的那个标签页里面，那个页面上弹出来，那可以任意切换，切到任意一个页面，然后就在对应的这个页面收到消息，就把它那个消息弹出来，你想要怎么实现这个功能？你之前做的项目怎么部署的？你之前做的项目怎么部署的？联合类型和交叉类型的区别是什么？
2025-11-10 21:52:32
195
原创 WebSocket
WebSocket 是一种网络通信协议，提供客户端与服务器之间的全双工、长连接、低延迟 的通信能力。它使得浏览器和服务器之间可以像 “打电话” 一样随时双向发送消息，而不需要像 HTTP 那样 “请求-响应” 模式下反复建立连接。特性HTTPWebSocket连接方式短连接，每次请求都要建立连接长连接，一次握手后保持连接通信模式单向（客户端请求，服务器响应）**全双工（双方可随时主动发消息）**协议基于 HTTP（端口 80/443）基于 TCP（通过 HTTP 升级握手）
2025-11-09 19:59:23
732
原创 前端跨页面通信
多个页面可以连接到同一个 SharedWorker，通过它来进行数据通信和状态共享。Service Worker 是运行在浏览器背后的脚本，通常用于。 的多个浏览器 Tab、窗口、iframe。，这样就可以实现间接的通信。
2025-11-09 19:41:47
932
原创 场景题大全
属性计算范围（宽度）包含内容不包含内容典型用途元素可视区域（内边距 + 内容区）内容区宽度 + 左右内边距（padding）边框（border）、滚动条、外边距（margin）获取元素 “实际显示的可视宽度”（如自适应布局）元素整体布局宽度（边框 + 内边距 + 内容区）内容区宽度 + 左右内边距 + 左右边框外边距、滚动条占据的空间（若滚动条在元素外）获取元素 “整体占位宽度”（如计算元素在页面中占据的空间）元素滚动内容的总宽度（包含未显示部分）
2025-11-05 17:19:52
781
原创 SSR服务器端渲染
即让 React/Vue 框架“接管”这个已经存在的 DOM，使其可以响应用户事件（点击、输入等）每次请求都要在服务端执行渲染逻辑，消耗 CPU / 内存，相比 CSR 更占服务器资源。最流行的 React SSR / SSG 框架，内置 SSR 支持，开箱即用 ✅。使用方式与 Next.js 类似，约定式路由，内置 SSR 支持。，实际项目中强烈建议使用 Next.js / Nuxt.js！用户打开页面时，已经可以看到完整内容，无需等待 JS 加载！，用户马上就能看到内容，不用等待 JS 加载完再渲染。
2025-11-05 13:27:55
858
原创 position大全
属性值说明是否脱离标准流常见用途static默认值，元素按照正常的文档流排列（从上到下、从左到右）❌ 不脱离默认布局，不定位时使用relative相对定位，元素进行偏移❌微调元素位置，常作为绝对定位的“定位参考点（父级）”absolute绝对定位，元素，相对于定位✅实现弹窗、下拉菜单、复杂布局fixed固定定位，元素，相对于定位✅实现固定导航栏、回到顶部、吸底按钮sticky粘性定位，元素在滚动到特定位置前正常排列，之后“粘”在屏幕某个位置⚠️实现吸顶导航、表格头部固定等。
2025-11-05 12:45:29
804
原创 同时打开两个浏览器页面，关闭 A 页面的时候，要求 B 页面同时关闭，怎么实现？
你在一个中：用户打开了你希望在浏览器出于安全考虑，，但允许关闭。所以，，或者通过某种去协调两者的关闭行为。
2025-11-04 15:18:21
687
原创 关于数组的方法大全
push（）尾部增加unshift （）头部增加splice（开始，要删除的，结束） 返回空数组 影响的是原数组concat（） 有限创建一个原数组的副本，然后把想要添加的元素放到副本的尾端 返回新数组前三个都会改变原数组 最后一个不会改变原数组numbers.pop（）尾部删除numbers.shift（） 头部删除splice（开始的index，要删除的位置，插入的元素） 返回包含删除后的元素的数组，修改原数组！！slice（1,4不包函） 用于创建包含原数组一个或多个的新数组。
2025-10-30 16:46:43
484
原创 输出题大全
函数声明会提升，而且它的优先级比 var 声明更高！但要注意：如果函数名和变量名同名，会产生覆盖或冲突！同样适用：使用函数式更新 + useEffect 监听。注意首先函数提升，然后变量提升，赋值不提升。✅ 变量提升（var），但函数本身不提升。变量提升，函数不提升（属于变量赋值部分）依然推荐函数式更新，不要依赖立即生效。React 可能不会合并，但依然异步。用函数式更新，每次都基于前一个状态。类似 var，不推荐依赖提升逻辑。提升到当前作用域最前面，。提升到当前作用域最前面，。（比 var 高）
2025-10-30 12:12:25
329
原创 使用 ESLint + Prettier + Husky
步骤工具作用关键命令/文件1ESLint检查代码质量与规范，配置2Prettier格式化代码风格，配置格式规则3ESLint + Prettier 兼容避免冲突，让 ESLint 管 Prettier 规则4HuskyGit 提交前自动执行脚本5只检查 Git 暂存区的文件配置在6自动格式化 + 修复提交前自动格式化代码并修复部分问题。
2025-10-29 19:59:39
695
原创 防抖/节流/预加载
默认第一次不执行，也可以写一个变体，第一次执行搜索框输入联想（用户停止输入一段时间后再发送请求，避免频繁调用接口）窗口 resize 后重新计算布局（等用户调整完窗口大小后再计算）表单验证（等用户输入完再校验，而不是每次按键都校验）防抖和节流的核心逻辑是：要 “记住” 上一次操作的时间、定时器、或者状态，以便控制下一次的执行时机。而闭包，恰好可以 “记住” 函数定义时的环境，包括变量！。
2025-10-28 16:00:28
113
原创 setState
问题答案说明✅setState是异步的吗？✅ 是的，通常是异步的React 不会立即更新 state 和 UI，而是批量处理更新✅ 为什么是异步的？✅ 为了性能优化，合并多次更新，减少渲染次数提升渲染效率，避免频繁重绘✅ 能否立即获取更新后的 state？❌ 不能直接获取，因为更新是异步的使用回调函数（类组件）或useEffect（函数组件）监听更新后逻辑✅ 在 setTimeout / Promise 中 setState 是同步的吗？❌ 。
2025-10-23 14:44:44
721
原创 JSX 的编译过程
项目说明语法糖，用来描述 UI，最终编译为 React.createElement 或 jsx()JSX →，必须手动JSX →jsx(...)，不再需要手动引入 React，而是自动引入React 17 引入的新模块，导出了jsx()和jsxs()方法，用于编译 JSX使用 Babel / TypeScript 新配置后，编译器会自动 import或，你无需手动写开发用（更好的错误提示），生产用Babel 设置，TypeScript 设置。
2025-10-22 11:26:03
868
原创 前端工程化
/ 当子组件抛出错误时触发，用于更新状态，决定显示降级 UI// 更新 state 使下一次渲染能够显示降级 UI// 捕获错误信息和 React 组件栈信息（可用于日志上报）console.error('🔥 ErrorBoundary 捕获到错误：', error, errorInfo);// 上报错误到日志服务（比如 Sentry、Fundebug）});render() {// 你可以自定义降级 UI，比如错误提示、联系客服、返回首页按钮等return (
2025-10-19 11:45:03
1079
原创 保证样式稿高度还原
px2rem 是一种开发工具或构建工具插件，它的作用是：自动将你代码中的 px 单位，转换为 rem 单位。比如：你写，经过 px2rem 后会变成前提是你配置了 确保你拿到的是最新、最清晰的设计稿。
2025-10-12 15:09:58
563
原创 使用动画实现元素水平移动的方法
方法推荐程度原理适合场景)⭐⭐⭐⭐⭐CSS 过渡，自动补间简单动画，点击触发移动⭐⭐⭐⭐⭐关键帧动画，强大灵活复杂动画、循环、序列⭐⭐⭐⭐⭐手动控制每一帧，性能最优需要精细控制动画逻辑6. CSS + JS 类切换（推荐组合）⭐⭐⭐⭐⭐通过 JS 添加 class 触发 CSS 动画业务逻辑与样式分离，易维护3. JS + setInterval + left（老方法）⭐老式动画，性能差不推荐，仅作了解⭐⭐。
2025-10-12 14:32:47
736
原创 深浅拷贝具体使用场景
深拷贝的核心是递归复制对象的所有层级属性，但如果对象存在循环引用（如obj.self = obj），递归会无限访问同一对象，最终导致栈溢出。WeakMap的作用是缓存已拷贝的对象：首次遇到某对象时，将其存入WeakMap（键为原对象，值为克隆对象）；相比之下，若使用Map或普通对象缓存，键对象会被强引用，即使原始对象不再使用，缓存也不会被释放，导致内存泄漏。与普通对象的区别：普通对象的键只能是字符串或Symbol，无法直接以对象为键；与数组的区别：数组需要手动遍历查找缓存，效率低；
2025-10-11 19:49:56
357
原创 cdn原理
CDN（内容分发网络）是一组分布在全球各地的边缘服务器，它通过智能 DNS 调度，让用户从离自己最近的 CDN 节点获取内容。其基本原理是：当用户发起请求时，请求首先被路由到 CDN 边缘节点，**如果 CDN 节点已经缓存了该内容（如静态资源），就会直接返回，速度非常快；如果没有缓存，CDN 节点会向源站拉取内容，缓存下来后再返回给用户，同时后续请求就可以直接命中缓存。比如访问，这个域名通常会通过 解析到 CDN 服务商提供的地址。CDN 的 会根据用户的 。
2025-10-11 16:27:37
1151
原创 npm相关知识
当项目直接或间接依赖了同一个包（比如 lodash、react、axios）的多个不兼容的版本时，就产生了依赖版本冲突。npm 会尝试解决这些依赖，生成一个树，但有时无法完美解决，就会导致某些包拿到错误的版本，进而运行异常。。
2025-10-09 21:20:42
514
原创 关于for循环的使用
方案是否推荐原理适用环境✅ 使用let✅✅✅ 推荐每次循环创建一个新的块级作用域变量 i，每个事件函数捕获自己那次的 i现代 JavaScript（ES6+），最简洁、最安全✅ 使用 IIFE（立即执行函数）✅ 可用，但较旧每次循环通过函数作用域隔离 i 的值，传入参数保存当前索引ES5 环境，老代码兼容❌ 继续使用 var（不修复）❌ 不推荐所有事件函数共享同一个 i，最终值为循环结束后的值会导致 bug，不要用在异步/事件中。
2025-10-09 16:57:54
700
原创 Js本地存储的方式
方式容量持久性是否自动发到服务器数据类型特点适合场景Cookie~4KB可设置过期✅ 是（每次请求携带）字符串可设置 Domain/Path，支持 HttpOnly/Secure身份验证、用户跟踪~5~10MB永久（手动删）❌ 否字符串同源共享，长期保存用户偏好、缓存配置~5~10MB标签页级（关闭即删）❌ 否字符串仅当前标签页可用当前页面临时数据很大（几十MB+）永久❌ 否对象/二进制/结构化异步、支持事务/索引/查询。
2025-10-09 16:15:24
890
原创 bind，apply，call
方法何时使用是否立即执行参数形式主要场景call你想立即调用函数，并明确 this 指向，且参数是逐个传递的✅ 立即执行借用方法、明确 this 和少量参数apply你想立即调用函数，并明确 this 指向，但参数是数组形式✅ 立即执行参数是数组、动态参数、数学函数bind你不想立即调用函数，而是先绑定 this（和/或部分参数），生成新函数供后续调用❌ 不立即执行，返回新函数。
2025-10-08 19:35:51
830
原创 css动画
0% {100% {名称作用用法关键词是否需要触发是否复杂让某个样式属性变化时平滑过渡用在 hover / 点击后，如颜色、宽度变化✅ 需要触发❌ 简单过渡对元素进行视觉变形（旋转/缩放/移动/倾斜）用作视觉效果，不改变布局❌ 可自动生效❌ 几何变换是 transform 的一部分，表示移动（位移）如 translateX(), translateY()视情况✅ 移动元素实现复杂动画（可包含多个状态、循环、控制）
2025-10-06 15:53:18
610
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人