- 博客(419)
- 收藏
- 关注
RSS订阅原创 react native学习record one month
• 尺寸适配（Dimensions、PixelRatio、react-native-responsive 等）• 函数组件 + Hook（useState、useEffect、useCallback、useRef 等）• 熟练掌握 ES6+（async/await、Promise、Map、Set 等）• 相册、摄像头、麦克风（如 react-native-image-picker）• 状态管理（Context、Redux、Zustand、Recoil 等）
2025-07-15 11:04:20
440
原创 el-button/button置灰及原理
这是等效于写 button disabled的写法，虽然它的值是字符串 “true”，但只要 disabled 这个属性存在，浏览器就认为它为 true。如果你希望按钮在“初始渲染前”就已经是灰的（比如 SSR 场景），那就不建议用指令，而是直接用 :disabled=“true” 靠组件本身逻辑控制。el.classList.add(‘is-disabled’) ✅（仅样式） ❌（仍能点）❓ 如果你操作的是 el-button 这样的组件，不是原生 ，为什么仍然能置灰？
2025-07-02 20:02:09
622
原创 dfs+回溯的practice
例如：target = ‘c’，那么 [‘a’, ‘c’, ‘d’] 和 [‘a’, ‘b’, ‘c’, ‘e’] 都要返回。示例：‘d’ 和 ‘f’ 的 LCA 是 ‘c’；示例：target = ‘c’，树中有多个 node: ‘c’，返回所有路径。描述：传入根节点和目标值，返回该节点在树中的深度（level），根为 0。描述：给定一个树结构，返回所有从根节点到叶子节点的路径数组。🧩 题目 3：找所有到指定节点值的路径（节点值可能重复）描述：传入根节点和目标值，返回从根到该节点的路径。
2025-07-02 00:24:42
144
原创 Gzip的压缩原理
Gzip 的压缩原理本质上是：通过去除冗余 + 编码优化，来减小数据体积。LZ77 会尝试在之前的内容里找出重复的部分，用三元组 (偏移量, 长度, 下一个字节) 来替代。2. 用引用替代重复数据 —— 把之前出现过的字符串，用指向“之前位置 + 长度”的引用替代。我们用一个简单的字符串举例，模拟 Gzip 中 LZ77 + 哈夫曼编码 的压缩原理。1. 查找重复内容（字符串） —— 通过 LZ77 算法找到重复的字节序列。• 保持一个滑动窗口（如 32KB），记录前面已经处理过的数据。
2025-06-25 02:13:25
348
原创 【开发问题】vue自定义指令在el-table-column上使用不生效
el-table组件是使用createElement动态生成的，在执行自定义指令时该column所代表的。，在结构中仅仅只有一个根div，所以这里在el-table-column上使用自定义指令会不生效。自定义指令，在Vue中，自定义指令是一种。替代方式：可以使用v-if来控制。
2025-06-25 01:53:19
237
原创 dom属性 previousElementSibling
因为我们通常不知道 DOM 结构是否有空格、换行、注释等干扰节点，所以要确保我们获取的是 真正的元素 节点，用 previousElementSibling 是最保险的方式。previousSibling 前一个任意类型节点（可能是文本） ❌ 不忽略。previousElementSibling 前一个元素节点 ✅ 忽略。当前元素的前一个兄弟元素节点（忽略文本、注释等非元素节点）。nextElementSibling 后一个元素节点 ✅。属性 含义 是否忽略空白/注释节点。
2025-06-24 13:44:01
191
原创 nacos配置的一些问题
因为 Nacos 本身没有公开可供浏览器直接访问的 OpenAPI，也不支持跨域和简单认证，所以我基于 Nacos SDK 开发了一个 Node.js 中间层服务，封装成接口供前端 SDK 使用。因此，我们通常会用 Nacos SDK 开发一个中间层服务（例如基于 Node.js 或 Java），由它来访问 Nacos，再由前端通过 HTTP 请求该服务拿到配置内容。Nacos 没有直接面向浏览器开放的 HTTP 接口（OpenAPI），所以前端不能直接从 Nacos 拉取配置。
2025-06-24 10:28:59
197
原创 work遇到的状态码
含义：请求未通过身份验证，需要登录或提供有效凭据（如 Token）。Authorization: Bearer <普通用户的token>Authorization: Bearer <无效的token>403 已授权但禁止访问 ✅ 是 ✅ 是 权限不足、被封禁等。401 未授权 ✅ 是 ❌ 否 未登录、Token 失效。用户登录了，但权限不足（如普通用户访问管理员接口）。含义：请求已经通过身份验证，但没有权限访问该资源。检查是否携带了正确的 Token。检查用户的角色/权限是否符合要求。资源访问被明确禁止。
2025-06-22 21:56:53
190
原创 await使用的一些疑惑
你的理解实际情况“await 会自动等待”await 只能等待 Promise 完成“async 函数会自动延迟”async 只是包装返回值，不改变执行流程“可以 await 任何东西”非 Promise 值会被自动包装为 resolved Promise关键点await需要配合真正的异步操作（如返回 Promise 的操作），而setTimeout本身不是 Promise 化的，所以需要手动用包装它。
2025-06-22 01:44:29
343
原创 resizeOberserverAPI实现原理
ResizeObserver 是浏览器提供的原生 API，用于监听元素尺寸的变化。ResizeObserver 不像 addEventListener(‘resize’) 是事件驱动的，它是浏览器在 layout/reflow/repaint 流程后统一调度触发的。观察者注册方式 observer.observe(el) subject.addObserver(observer)是的，ResizeObserver 的设计正是观察者模式在浏览器 DOM 尺寸检测上的一种典型应用。
2025-06-21 01:02:34
392
原创 vite代理步骤原理
Vite 的 proxy 功能主要是为了解决前端开发阶段的 跨域问题，它通过将前端请求「代理」转发到后端服务器，从而绕过浏览器的同源策略限制。会将请求头中的 origin / host 改成目标地址对应的 origin，以避免被目标服务器拒绝（某些后端做了 origin 校验）。使用 proxy，相当于浏览器只请求 localhost:5173，Vite 作为中间人转发请求给后端，就 不会触发跨域问题。后端返回数据后，Vite 开发服务器将响应数据传回给浏览器，完成一次“伪装”的同源请求。
2025-06-21 00:34:38
339
原创 http2与websocket关系
HTTP/2 和 WebSocket 协议本身确实不兼容，不能像在 HTTP/1.1 中那样用标准 WebSocket 协议（ws:// / wss://）进行升级握手。也就是 “WebSocket over HTTP/2”，允许在 HTTP/2 的流（stream）中创建 WebSocket 连接。HTTP/2 不直接支持传统 WebSocket（ws/wss），但可以通过扩展（如 RFC 8441）或其他协议实现类似效果。gRPC / gRPC-Web 双向通信，基于 HTTP/2，多用于微服务。
2025-06-20 13:45:54
403
原创 CSRF攻击场景
CSRF（跨站请求伪造，Cross-Site Request Forgery）攻击常见于受害者已登录并持有合法身份的前提下，攻击者诱导其在不知情的情况下向目标网站发送恶意请求。场景描述：用户登录 App 内的 WebView 页面时，点击了某个按钮，实际上触发了 CSRF 请求。场景描述：攻击者向家庭路由器、摄像头、NAS 等设备发起 CSRF 请求，如重启设备、修改密码、关机等。场景描述：用户登录某电商网站后，攻击者引导其点击某个链接，自动将某商品加入购物车或下单付款。📤 4. 自动提交表单（POST）
2025-06-20 13:22:34
433
原创 错误监控----比如实现sentry一些思路
错误监控⼀、引⾔1.为什么需要前端错误监控你的脚本在哪些边界条件下会报错？你的脚本和样式兼容性如何？有哪些地区不能正常访问你的⽹站？出现问题之后，你如何快速定位排查，把损失降到最低？如果你想解决以上这些问题，那么你需要给你的⽹站部署错误监控系统。2.前端错误监控系统如何⼯作监控系统分为上报端、服务端与管理后台。上报端的形式⼀般为SDK，主要功能是捕获错误与上报，更进阶的话可以考虑错误的复现与⽤⼾数据的收集，还有保证⽤⼾体验的平顺降级。服务端则负责存储、分析错误信息，在错误数量和严重性达
2025-06-18 23:56:23
798
原创 markRaw
是 Vue 3 响应式系统中的一个 API，用于标记一个对象，使其永远不会被转换为响应式代理。这在您希望确保对象保持原始状态且不触发响应式更新时非常有用。工作中使用带的例子：为什么需要 markRaw？ECharts 实例本身是一个复杂的对象，如果被 Vue 的响应式系统代理，可能会导致性能下降或意外行为。使用场景性能优化：处理不需要响应式的大型对象第三方库对象：处理复杂的类实例或外部库的对象不可变数据：如配置对象等不应改变的数据避免响应式开销：当响应式转换会造成不必要开销时重要特性
2025-06-18 22:31:31
363
原创 git回滚操作
👉 查看 HEAD 变动记录，比如误用了 reset --hard 可以找回之前的 commit。修改和提交都会被删除，无法恢复（除非 reflog）。👉 不会删除历史，而是创建一个“反操作”的提交（适合公开分支）。2.2 撤销最近的一次提交（保留修改但移出暂存区）回退某一提交（保留历史） revert ✅ ✅。🚧 一、修改尚未提交的内容（工作区/暂存区）回退最近提交 reset ❌（危险） 可选。2.1 撤销最近的一次提交（但保留修改）2.3 撤销最近的一次提交（彻底丢弃）
2025-06-17 21:49:36
420
原创 为什么Vite在开发环境不用打包，到了生产环境就需要打包了呢？
有些旧浏览器不支持 ESM（比如 IE11），需要将代码转成兼容格式（如 CommonJS / UMD / IIFE）。这是因为开发环境和生产环境的运行目标和性能要求完全不同，Vite 针对这两者采用了不同的技术策略。页面加载时，Vite 只在服务端用 esbuild 做一次预处理（如 TS 转 JS），不做打包。生产环境下不能让浏览器一个个去请求上百个模块（会造成大量网络请求，严重影响首屏性能）。生产环境追求性能和兼容性，所以必须打包。使用 模块级热更新（HMR），只更新变更模块，而不是整个页面。
2025-06-12 01:53:20
270
原创 网络资源缓存
前端性能优化是提升用户体验和页面响应速度的关键，可以从 网络优化、资源优化、缓存优化 三个方面系统地进行。缓存优化 重复访问加速 Cache-Control、ETag、Service Worker、文件 hash。资源优化 减小体积、延迟加载 图片压缩、JS/CSS 按需加载、Tree Shaking。stale-while-revalidate（旧资源立即返回，后台更新新资源）网络优化 降低加载延迟 CDN、Gzip、HTTP/2、预加载、请求合并。一、网络优化（减少请求数、降低延迟、提升加载速度）
2025-06-04 01:27:50
619
原创 npm、yarn幽灵依赖问题
你在代码中使用了某个依赖包，但它并没有在当前项目的 package.json 中声明，只是“间接依赖”被安装到了 node_modules 中，导致你能用，但其实不应该能用。你没有显式安装 lodash，但项目里却能跑成功，因为 webpack 的某个插件内部依赖了 lodash，所以它“顺便”被装进 node_modules。pnpm 的 node_modules 是使用 符号链接（symlink）+ 嵌套结构 搭出来的，你只能访问你自己声明的依赖。这就是幽灵依赖：你没声明，系统却能跑。
2025-05-31 01:20:31
719
原创 yarn、pnpm、npm
下面我按时间线和动机，把 npm → yarn → pnpm 的演变脉络讲清楚。如果你想继续，我可以带你写个从 yarn 或 npm 切换到 pnpm 的实战迁移指南，也可以讲讲它们在 Monorepo 里的表现。Facebook 的工程师维护着数千个 Node 项目，npm 的不稳定、速度慢，严重拖累开发效率，于是他们造了 Yarn。npm 安装依赖是不稳定的，即使锁版本，也有可能在不同机器上装出不同的 node_modules。pnpm：使用内容寻址 + 硬链接，依赖只下载一次，多个项目共享。
2025-05-31 01:02:25
601
原创 qiankun解决的问题
qiankun 通过 Proxy 等技术实现沙箱机制，有效隔离微应用之间的 JS 和 CSS 环境，解决全局变量冲突、样式污染、多实例运行等问题，是微前端稳定运行的核心保障。为每个微应用创建一个 Proxy(window) 的代理对象，拦截所有对 window 的修改，限制作用域。qiankun 的沙箱机制主要用于隔离微应用之间的运行环境，避免相互影响。每次微应用切换时，记录 window 的状态（如全局变量），卸载时恢复原状态。退出微应用时能恢复主应用或其它子应用原本的状态。样式隔离防止样式干扰。
2025-05-24 18:56:29
464
原创 2025.04.19react面试题
每次状态变化后，会生成新的虚拟 DOM 树，并与旧的树进行 Diff 运算，找出差异部分，再最小化更新真实 DOM。当 useEffect 的依赖数组传入空数组 [] 时，表示该副作用函数仅在组件首次渲染时执行一次，行为等价于类组件中的 componentDidMount。React 18 推出了自动批处理与并发特性，对生命周期感知更强，建议使用函数组件 + Hook 替代类组件管理生命周期。React 事件是合成事件，非原生事件，具备跨浏览器兼容性，支持事件池优化（v17 之后逐步废弃事件池机制）。
2025-04-19 03:36:59
763
原创 css3.31面试题
不同浏览器的 CSS 兼容性问题如何解决？visibility: hidden、display: none 和 opacity: 0 的区别？伪类（:hover、:nth-child()）和伪元素（::before、::after）的区别？层叠上下文（Stacking Context）是如何形成的？哪些 CSS 属性会触发回流（Reflow）和重绘（Repaint）？如何使用 CSS 预处理器（SASS/LESS）提升开发效率？如何使用 CSS 变量（var()）提高样式的可维护性？如何实现垂直水平居中？
2025-04-04 15:37:15
654
原创 微前端知识内容
Shared State（全局状态管理）：使用 qiankun 提供的 initGlobalState，或者采用 Redux、Pinia 等库共享状态。registerMicroApps() 方法用于注册子应用，配置 name、entry、container、activeRule 等参数。如果你有特定项目上的挑战，也可以详细探讨。主要基于 single-spa，并进行二次封装，提供更好的 应用加载管理、沙箱隔离、应用通信 能力。通过劫持路由（Hash/History），监听路径变化，加载对应的子应用。
2025-04-01 22:41:42
195
原创 vuex和pinia区别
Pinia 采用的是函数式 API，直接基于 defineStore 创建 store，类型可以被 TypeScript 自动推导，无需手动定义复杂的类型。doubleCount: (state) => state.count * 2, // ✅ 自动推导 doubleCount 为 number。Pinia 通过更好的类型推导、自动识别 state 和 getter，减少了对手动声明类型的依赖，使 TypeScript 支持更加友好。// ✅ this 直接访问 state。// ✅ 自动识别方法类型。
2025-04-01 21:29:22
979
原创 2025.3.30前端模拟面试
介绍一下 Composition API 和 Options API 的区别，为什么 Vue 3 推荐使用 Composition API？说说 Event Loop 机制，setTimeout 和 Promise 在事件循环中的执行顺序是什么？手写一个 LRU 缓存，要求支持 get 和 put 方法，put 需要保证超出容量时淘汰最久未使用的项。手写一个 Promise.all 实现，支持所有传入的 Promise 并行执行，返回一个数组结果。如果让你设计一个前端架构，你会做哪些决策？
2025-04-01 11:55:49
539
原创 css_z-index属性
z-index 只能作用于 position 为 relative、absolute、fixed 或 sticky 的元素，static（默认值）无效。.parent 的 z-index: 2 高于 .sibling 的 z-index: 1，所以 .parent 覆盖 .sibling。注意：层叠上下文内的元素只能相互比较 z-index，不会受外部 z-index 影响。层叠上下文会隔离 z-index，内部的 z-index 无法超出父级的层叠上下文。
2025-03-31 21:30:45
463
原创 Teleport场景及原理
在 Vue 3 的虚拟 DOM 渲染过程中，Teleport 组件会在 patch 阶段 处理 VNode，并将其内容渲染到 to 指定的 DOM 位置，而非原组件层级。// 解析目标 DOM。Vue 不会 直接更新 Teleport 本身，而是 更新目标 DOM 位置的内容，避免不必要的重新渲染。作用：Teleport 允许 Vue 组件的部分 DOM 结构被渲染到 Vue 组件树之外的指定位置。当 Teleport 组件卸载时，会清理其 children 并移除目标 DOM 位置的内容。
2025-03-30 16:55:33
536
原创 3.29前端模拟面试
好的，我会按照Vue 3 + TypeScript + 微前端（qiankun）的方向进行模拟面试，并结合你的项目经验和场景化手写代码题，确保问题具备一定的深度和挑战性。（例如子应用间通信、全局状态管理、样式隔离问题）你是如何解决的？多结合项目经验：回答问题时，结合你的实际项目经历，让面试官知道你不仅理解概念，还能在项目中落地。function throttle(fn, delay) { /* 实现 */ }function debounce(fn, delay) { /* 实现 */ }
2025-03-29 23:04:34
500
原创 2025.3.29-2025.8.29前端学习计划
目标：在 5 个月内掌握 Vue3 源码、TypeScript 高级用法、微前端（qiankun）、Node.js、前端性能优化、地图 & WebGL，为跳槽到顶级前端团队做好准备。Week 2（4.8 - 4.14）：Vue3 Virtual DOM & Diff 算法。Week 4（4.22 - 4.30）：Vue3 插件 & Vite 项目优化。Week 12（6.22 - 6.30）：Node.js 项目优化。Week 20（8.22 - 8.31）：最终总结 & 项目完善。
2025-03-29 04:06:06
140
原创 地图项目入手学习
• 如果有轨迹回放：是否有 setInterval 或 requestAnimationFrame 更新坐标点？• 如果有标记点：看 addMarker 是怎么实现的？• 如果有热力图：用的 HeatMapLayer 还是自己画的 Canvas？目标：用 Vue 3 + 你的地图库（如高德地图）实现基本功能。目标：先大致了解你的地图项目代码，找到核心实现逻辑。• 是否有 点标记、轨迹回放、热力图、区域覆盖物？目标：写一篇总结，整理你学到的内容，加深理解。• 是否有 地图组件（Map.vue）？
2025-03-28 16:23:19
315
原创 异步的场景
异步编程最常见的场景之一是发起 网络请求。在文件读取、写入操作时，尤其是涉及大量文件的操作，异步编程是非常重要的。例如，批量处理多个任务（如批量发送请求、同时执行多个计算）时，可以使用异步来避免阻塞主线程，从而提高程序的效率。对于一些需要长时间运行的任务（如复杂计算、大数据处理等），异步编程可以避免阻塞主线程或 UI 线程，提升应用响应性。通过异步编程，可以避免阻塞主线程，提高应用的响应速度和性能，尤其是在处理耗时操作时尤为重要。许多异步操作依赖于定时器的使用，例如：定时任务、轮询操作、动画的定时执行等。
2025-03-28 00:51:59
621
原创 TypeScript和JavaScript的区别
TypeScript（简称 TS）是 JavaScript（简称 JS）的超集，它对 JavaScript 进行了扩展，提供了更强的类型检查和其他功能。TypeScript 是 静态类型的语言，这意味着在编译阶段，开发者可以指定变量、函数参数和返回值的类型，编译器会在编译时进行类型检查。JavaScript 仅支持基本类型和对象，不支持 TypeScript 中的联合类型、交叉类型等高级类型。age = ‘30’;JavaScript 是 动态类型的语言，变量的类型可以在运行时变化，缺少编译时的类型检查。
2025-03-28 00:48:31
929
原创 cdn原理和作用
容灾与冗余：CDN 系统在多个节点缓存内容，即使某个节点或源站发生故障，CDN 也可以自动将请求路由到其他正常工作的节点，确保内容的高可用性。减少延迟：CDN 将内容分发到离用户最近的节点，缩短数据传输的物理距离，从而减少网络延迟，提高访问速度。适应不同网络条件：CDN 的边缘节点通过对本地网络的优化，能够在不同的网络环境下提供更稳定的内容传输。分布式缓存：通过将内容缓存到全球多个节点，即使在远离源站的地区，用户也能享受到快速的访问体验。CDN 通过将内容缓存到全球各地的多个边缘节点，提供高效的内容分发。
2025-03-28 00:41:50
439
原创 前端性能优化思路_场景题
在高并发场景下，最重要的是减少不必要的 DOM 更新，减少 WebSocket 消息量，并利用 CDN、虚拟列表、Canvas 渲染弹幕 提高性能。20 万人同时在直播间打赏，前端优化需要考虑高并发、性能优化、流畅体验等问题，涉及 WebSocket 处理、消息去抖、虚拟列表优化、动画优化、CDN 加速 等多个方面。WebSocket 可以实现实时通信，只在有数据更新时推送，提高效率。效果：每 300ms 更新一次 UI，减少渲染次数，提高性能。合并消息：同一秒内的多条打赏消息可以合并，减少通信压力。
2025-03-28 00:38:26
680
原创 优化webpack打包体积思路
你已经有 Webpack 迁移到 Rspack 的经验，可以考虑直接用 Rspack，它的构建速度更快，尤其适用于 Vue 3 项目。如果 Webpack 打包特别大，可以从以下几方面优化： ✅ 按需加载（路由懒加载、组件懒加载、动态 import()）这样 node_modules 里的库会被打包成一个独立的 vendors.js，浏览器可以缓存它，不用每次都下载。如果你的 Webpack 构建速度慢，考虑直接迁移到 Rspack，你之前已经做过类似的迁移，应该很容易上手！
2025-03-28 00:35:20
1084
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人