- 博客(1207)
- 收藏
- 关注
RSS订阅原创 IOS下中文字体布局错位问题解决
另外说一句为什么不用“删掉 width 让内容自然撑开”的方案：那会导致不同机型按钮宽度不一致（vw 取整后各差一点），胶囊按钮们左对齐排列时右边参差不齐；这就像一扇门宽度恰好等于人的肩宽——平时能过，穿件外套（哪怕 0.5px）就卡住了。这个布局在“设计稿的精确世界”里是成立的，但浏览器不是精确世界。，第二行出现后装不下，溢出部分直接被裁——这就是截图里「绑」只剩上半截的原因。，而按钮高度固定 28px 只装得下一行，所以「绑」被裁掉一半。保住了“所有解绑按钮至少一样宽”的设计稿语义。
2026-09-24 17:19:53
370
原创 01_Java基础速通
用abstract标记类或方法。抽象方法强制子类必须实现，否则子类也得标成abstract。两点就够：① 继承Exception（受检）或（非受检）；② 构造方法里。// 业务异常，继承 RuntimeException 不用强制 try-catch// 自定义错误码// 把错误信息传给父类// 使用：throw new BizException("余额不足");真实后端几乎都定义一套业务异常（如），配合全局异常处理器（
2026-09-08 16:34:53
201
原创 怎么保证缓存和数据库一致性？
为了方便大家理解，上面的情况中我们并没有特别强调边界情况，防止干扰大家的思路。如果你已经看懂了上面的所有内容，那么接下来我把这些边界情况逐一分析一下，就可以真正学会为什么上面的策略是我们工程上相对的最优解了。
2026-08-24 17:14:16
223
原创 腾讯前端面试：如何排查页面卡顿及链路追踪？
面对“页面卡顿”，我不会先猜是哪个组件有问题，而是先用 Performance 把卡顿定位到网络、JS 执行、Vue 更新还是浏览器渲染阶段。如果是 Vue 更新导致的卡顿，我会从响应式数据变更开始追：A 修改筛选条件 → 触发对应响应式依赖 → Vue scheduler 调度更新任务 → 相关组件执行 render → 生成 VNode → patch → DOM 更新 → 浏览器进行 Layout/Paint。
2026-08-22 00:30:03
208
原创 大厂前端调试不能只会debugger
比如，我们遇到一个需求，项目使用了 vform3 这个库，然后希望一个接口同时返回我们期望的所有 form 组件，这时候大部分前端肯定是去代码中注释掉真实接口（或者用现成的插件），然后手写一个 mock 接口填上我们需要的返回值。但是这种方法太笨重，项目代码繁杂，需要注释-> 调试-> 修改代码-> 解开注释这一系列过程。聊到网路请求调试，除了 debugger 和 mock 接口，其实可以直接在浏览器中拦截接口响应。因此，我这里说一种更加优雅的调试技巧。相比之下，另一个方案是不是更优雅了呢？
2026-08-14 17:24:42
151
原创 查看端口冲突并杀死端口
浏览器（Vite HMR 的 WebSocket）和 curl 之类的客户端连上来，状态变成 ESTABLISHED；其中一条连接客户端先关了，所以走到了 FIN_WAIT_2。还有一条比较"卡"——对端先 FIN 了，服务端（Vite）还没来得及关，于是停在 CLOSE_WAIT。一般 HMR 频繁建立/断开连接时出现这个是正常的，但如果。或者——任务管理器 → 详细信息列 → 按 PID 排序 → 找到 37380 → 右键结束任务。，也就是打开 Vite 页面的那个浏览器标签页。
2026-07-27 10:25:36
220
原创 AI时代大厂想要什么样的同学——大学四年时间线
大一的试错成本是最低的，哪怕这一年走错了，大二补完全来得及。如果你大四还在海投简历，想着二战，说明前面的节奏出了问题，但也不用慌，补上就行，只是需要付出数倍的努力了。前端也学、后端也学、大模型也学、AI 也学、算法也刷、比赛也打、项目也做。不管是写博客、做项目还是维护开源仓库，持续产出的价值在于你面试的时候有东西可以讲，而且讲的是你自己做的，不是 AI 生成的。我看过这么多简历，只见过一个人，一个北大的哥们，那是真的全精通，都学得非常好，就再也找不到第二个人了，甚至我还挂过清华的 hh。
2026-07-10 14:42:00
218
原创 通过Semi Design思考前端组件AI化
前端正在被 AI 一步步干死，今天我不讲就业环境，我们通过 Semi Design 这个组件库来讲讲，前端组件是如何从 Ant Design X 这样的纯 AI 应用组件库，发展到 Semi Design 这样的组件库“AI 化”。
2026-07-08 22:02:08
244
原创 SSR 水合问题
CSR（客户端渲染）请求 -> 返回空壳 -> 下载 JS -> 渲染 -> 可交互 ❌ 白屏期长SSR（服务端渲染）请求 -> 服务端渲染 HTML -> 返回完整 HTML ->立即可见 + 后台下载 JS -> 水合 -> 可交互 ✅ 首屏快水合问题服务端 HTML 和客户端虚拟 DOM 不一致 ->闪屏 / 重渲染 / SSR 白费 ⚠️ 需要处理SSR 不是银弹——它解决了首屏速度和 SEO 问题，但引入了服务端开销和水合复杂度。
2026-07-07 16:49:15
195
原创 Vite进阶用法详解
做 transform（TS → JS、JSX 转译等），它是 Go 写的，比 Babel 快 20 倍（官方说的，不是我说的）。用户访问首页只下载首页的 chunk，切换到订单页才下载订单页的 chunk。不管项目大小，启动时先把所有模块打包成一个 bundle，启动慢、改一行代码也要重新打包。如果不做分割，所有代码打成一个大包（比如 5MB），用户打开页面要下载 5MB 才能渲染。是有争议的，通常是保留错误日志（方便监控），去掉调试日志。是 SCSS 的，不是 CSS 的，注意区分。
2026-07-03 11:15:47
202
原创 14_React 中的更新队列 updateQueue
updateQueue 是挂在 Fiber / Hook 上的更新队列（链表），用于缓存 setState 产生的 update，并在 render 阶段按优先级（lane）依次计算出新的 state。setState这些方法使用相同的更新流程，因为它们都使用 updateQueue 这个数据结构。setState↓创建 update（带 lane）↓加入 updateQueue（环形链表）↓↓render 阶段：↓processUpdateQueue（计算 state）↓。
2026-05-05 09:48:11
283
原创 11_深入探索副作用 Hooks
insertion → layout → effect（从“最早”到“最晚”）必须在这个阶段：如果样式在 DOM 更新后才插入 → 会闪烁（FOUC）所有 effect 类 Hook，本质都挂在 Fiber 上。执行时机 beforeMutation 阶段 ，DOM 还没变。执行时机，layout 阶段（DOM 已更新，浏览器未绘制）。入口：mountEffect / updateEffect。执行时机，commit 完成后（浏览器绘制后）避免：重复请求 / 状态错乱。
2026-05-04 10:38:26
253
原创 10_从 React Hooks 本质看 useState
假设第一次父组件传递过来的 showNumber 为 true，此时就会渲染第一个 hook；第一次：useState -> useState。第二次：useState -> useRef。体现在我们开发者眼中就是报错。该示例来源：渡一教育。示例来源：渡一教育。
2026-05-03 17:22:16
795
原创 【Next】客户端组件和服务端组件
在 Next.js（尤其是 App Router 体系）里，客户端组件（Client Component）和服务端组件（Server Component）是基于 React 的RSC（React Server Components）模型实现的。服务端组件（Server Component）默认执行在服务端（Node.js），用于数据获取、减少 bundle客户端组件（Client Component）运行在浏览器，用于交互、状态、事件二者通过序列化协议（Flight）进行通信能力Server。
2026-04-23 10:29:30
232
原创 页面通信策略
页面通信方式可以分为同源和跨源两类。同源场景下可以使用 localStorage、BroadcastChannel 或 SharedWorker 实现多 Tab 通信；跨源场景下主要使用 postMessage，它通过消息机制实现不同窗口间安全通信。基于：Window.postMessage。基于：BroadcastChannel。基于：Web Storage API。不同域名（比如 iframe）多页面共享一个 worker。同协议 + 域名 + 端口。
2026-04-09 16:38:26
84
原创 【React】setState 触发渲染的流程
setState 本质是向 React Fiber 树中加入一个更新（update），触发调度（schedule），在协调阶段（reconciliation）通过 diff 算法计算变更，最终在提交阶段（commit）更新 DOM。setState↓创建 update 对象↓加入 Fiber updateQueue↓调度更新（schedule）↓render 阶段（diff）↓commit 阶段（更新 DOM）
2026-04-05 18:09:08
131
原创 这才称得上是提示词工程！
Prompt Engineering = 如何写Prompt + 如何用代码管理Prompt大模型本质是概率预测，你需要让它尽量按你的意图输出。例如：总结这段话效果不稳定。你是一个技术文档助手。请用三条 bullet point 总结下面内容。每条不超过20字。内容：{content}输出就稳定很多。
2026-03-17 00:06:16
276
原创 深入 React19 Diff 算法
由于双端 diff 需要向前查找节点，但每个 FiberNode 节点上都没有反向指针，即前一个 FiberNode 通过 sibling 属性指向后一个 FiberNode，只能从前往后遍历，而不能反过来，因此该算法无法通过双端搜索来进行优化。React 认为对于列表反转和需要进行双端搜索的场景是少见的，所以在这一版的实现中，先不做额外的优化。如果 DOM 更新后，为多个节点的话，就采用多节点 diff（数组 diff）。如果 DOM 更新后，还是一个节点的话，那么就采用单节点 diff。
2026-03-05 23:59:02
264
原创 React19为什么一定要使用位运算？
React commit 深度遍历整棵 Fiber 树，会产生很大的性能问题。JS 的 Number 在做位运算时：会转为 32 位有符号整数。它表示：当前 Fiber 子树是否包含某些副作用。如果用数组，无法做到：O(1) 子树状态判断。作用：O(1) 选出最高优先级 lane。它等价于：一个最多 31 个元素的集合。可以一次判断整棵子树，而不必递归。工程含义：从集合中删除某个状态。因为：每一位就是一个独立布尔位。工程含义：判断某状态是否存在。工程含义：用于“移除某状态”工程含义：合并多个状态。
2026-02-26 09:34:19
324
原创 React19事件调度的设计思路
但如果我们使用低帧率，假如使用 30 帧 1s，那么 1 帧就是 33.3ms，这样虽然画质变差了，但是动画流畅度确实更好了。我们拿游戏“原神”举例子，帧率越高动画越流畅，而如果某一帧事件 Task 执行时间太长（超过 1 帧总时长），rAF 就不再执行，这帧就被自动“丢掉了”。因此如果上一帧的 Task 太重导致错过渲染窗口，浏览器会直接“丢帧”，而不是排队执行导致连锁累积卡顿（setTimeout 的做法）**详细讲讲（其他知识点可以翻看我之前写的关于事件循环的文章，讲解的非常清楚）。
2026-02-02 23:52:15
804
1
原创 React19 渲染流程
研究表明，用户操作之后，100ms 以内的响应给用户的感觉都是瞬间发生，也就是说不会感受到延迟感，因此将空闲时间设置为 50，浏览器依然还剩下 50ms 可以处理用户的操作响应，不会让用户感到延迟，这就是我们面试题中常看到的浏览器渲染每帧的空闲时间。虽然每一帧绘制时间约为 16.66ms，但是如果屏幕没有刷新，那么浏览器会安排长度为 50ms 左右的空闲时间。协调器是由 Scheduler 调度后执行的。useLayoutEffect 的意义是：在 DOM 更新完成后，浏览器绘制之前，同步读取或修改布局。
2026-01-29 23:43:34
736
原创 Canvas 何尝不是亮点呢？（一）
这里如果想要练手 canvas，我推荐两个项目：第一个是 vue3-particles（现在可能不叫这个名字了，总之就是粒子库/星空图的类似效果，第二个是代码雨/文字雨（canvas 版本），完全可以模仿着使用 canvas 复刻一下，能复刻出来，canvas 就算真正入门了。进阶同学可以研究下 gsap 这个动画库，配合 canvas 会非常好用，就可以。彩蛋（😜）：如果后续有时间，我还会分享一些我之前做过的“花里胡哨”的动效。原始尺寸：el.naturalWidth（canvas.width）
2026-01-25 22:03:59
436
原创 Vue3底层原理——keep-alive
keep-alive 不是缓存 DOM，而是缓存「组件 VNode + 组件实例（但 VNode 里持有组件实例）」，它通过“劫持组件卸载流程”，把 destroy 变成 deactivatekeep-alive 是一个抽象组件，它不产生真实 DOM，只影响子组件的渲染/生命周期（只“包裹 & 接管”子组件）。为什么 keep-alive 不缓存 DOM 快照？DOM 是副产品，真正的“状态”在组件实例中DOM 可以随时重建Vue 缓存的是“状态”，不是“视图”。
2026-01-22 22:43:16
479
原创 Vue3架构设计——调度系统
调度本义是指控制一系列任务的执行顺序/编排规划。Vue3 的调度系统使其能够做到**“批量更新、不重复渲染、任务执行顺序可控”**。
2026-01-22 00:00:21
425
原创 Vue3底层架构——编译器
编译器是什么意思呢？和我们之前讲过的响应式系统有什么关联呢？编译器只会生成“访问响应式数据的代码”，执行收集依赖在运行时。而本文我们着重讲讲编译这个过程。
2026-01-20 23:51:38
703
原创 Vue3 响应式系统——computed 和 watch
所有响应式逻辑都会依赖 effect 执行，computed / watch / render 本质都是 effect。effect：依赖 state。dep：被外部 effect 依赖。computed带缓存的、惰性的、基于依赖的派生 effectwatch主动监听数据变化的副作用调度器副作用（watch）不可缓存，派生值（computed）必须缓存computed：watch / watchEffect： 直接执行副作用})state.a++↓↓↓↓↓↓。
2026-01-19 22:27:51
721
原创 Vue3 响应式系统——ref 和 reactive
Vue3 响应式包数据 (Proxy Object) —— 依赖收集 Track —— 触发更新 Trigger —— Effect 执行更新拦截读取和设置操作收集依赖在数据变化时重新触发相关副作用。
2026-01-18 14:25:05
225
原创 Vue3 应用实例创建及页面渲染底层原理
Vue3 是平台无关的（runtime-core），真正依赖 DOM 的是在。用来快速判断 vnode 类型，是内部性能优化。返回了我们前面在 createApp 中使用的。注入（在 web 下是 DOM 渲染器）。实例保存基础信息，还没运行 setup。Vue3 的响应式来自。触发 setter →。
2026-01-02 23:13:59
627
原创 Monorepo 架构
当多个强相关项目需协同演进时，Monorepo 以统一依赖、原子化变更、工具链一致性和高效构建，显著降低协作与维护成本。通过 pnpm workspace 与 Turborepo 等工具，实现本地开发即时生效、CI 快速缓存、跨包联动无痛升级，尤其适合组件库与多业务线共存的长期维护场景。
2025-12-26 00:23:21
1270
原创 reset和revert最佳实践
✅安全适合已经 push 到远端的分支不影响其他人❌历史会“变长”会看到「提交 + revert 提交」📌 面试一句话：revert 是“用新的提交修正旧的提交”，不破坏历史。
2025-12-23 17:22:07
707
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人