- 博客(2166)
- 收藏
- 关注
RSS订阅原创 浏览器正在偷偷革命硬件世界，而大多数开发者还不知道
我亲眼见过这种场景：一个学生打开Chrome，插上Arduino开发板，打开浏览器IDE，写完LED闪烁的代码，点击"上传"，整个编译、下载、验证、重启的过程在几秒内完成。学生们上课，打开Chrome，进入学校的在线编程平台，用拖拽式或代码方式编程，点"上传"，他们插在电脑上的Arduino立刻执行新代码。以前硬件编程的准入门槛是"很高"，现在变成了"跟学网页一样"。从网页读心率、控制灯泡、上传固件，再到构建工业级仪表板——这一切的实现方式，已经从"需要专门的桌面应用"，变成了"一个响应式网页"。
2025-12-07 10:22:55
681
原创 React状态管理的性能陷阱:我是如何用RxJS解决复杂异步流的
如果你的React项目也遇到类似的性能问题,可以考虑引入Observable的思路。当你的React应用越来越慢,但Profile工具找不到明显瓶颈时,问题可能不在代码细节,而在状态管理架构本身。在尝试了各种状态管理库后,我最终选择了RxJS。React就像一个展示柜,它擅长"摆放商品"(渲染UI),但不擅长"管理仓库"(复杂数据流)。React依然是很好的UI框架,但在复杂的异步数据流场景下,确实需要专门的状态管理方案。认清工具的适用范围,在合适的场景下选择合适的方案,这是我这次重构最大的收获。
2025-12-05 21:56:12
222
原创 TypeScript真的能救你的命?一次线上Bug引发的类型安全思考
在现代前端开发中,TypeScript已经不是"要不要用"的问题,而是"什么时候用"的问题。在国内,字节跳动、腾讯、阿里等大厂的新项目几乎全部使用TypeScript。很多人对TypeScript的第一印象是:"不就是给变量加个类型标注吗?TypeScript内置了很多实用的工具类型,可以极大提升开发效率。这个Store类可以用于任何类型的状态,同时保证了完全的类型安全。如果你的项目满足以下任一条件,TypeScript绝对值得。在评论区聊聊你在使用TypeScript时遇到的问题或心得。
2025-12-04 21:06:35
540
原创 为什么你的项目里到处都是loading?其实React早就给出了答案
它不会让你的接口更快,但会让你的应用"看起来"更快,更稳,更专业。而Suspense的设计恰好符合这个原则 —— 它不会为了"表现努力"而显示loading,只有在确实需要等待时才展示。用户看到的不是"正在加载",而是"这个页面在疯狂抖动"。从手动管理loading状态到Suspense自动编排,这不仅是API的升级,更是前端异步渲染思维的一次革命。这就是Suspense的魔力 —— 它不是让数据加载更快,而是让UI行为更符合用户预期。组件不需要知道自己在loading,它只需要在数据准备好的时候渲染。
2025-12-03 20:43:25
534
原创 那个说“TypeScript是多余的“的同事，昨晚又在改bug到凌晨
简单说就是："我不知道这里是什么类型，TypeScript你帮我推导一下，推导出来的结果叫R"。90%的人以为自己在用TypeScript，其实只是在用"带类型注释的JavaScript"。第一天他就跟我说："TypeScript就是JavaScript加个类型标注，有啥难的？之前TypeScript不知道怎么判断，现在你教它了，它就能在代码里自动推导类型了。的意思就是："这个对象满足Theme类型，但不要把它变成Theme类型"。上个月组里来了个新人，工作两年，简历上写着"精通TypeScript"。
2025-12-02 21:36:17
762
原创 那个说“TypeScript是多余的“的同事，昨晚又在改bug到凌晨
简单说就是："我不知道这里是什么类型，TypeScript你帮我推导一下，推导出来的结果叫R"。90%的人以为自己在用TypeScript，其实只是在用"带类型注释的JavaScript"。第一天他就跟我说："TypeScript就是JavaScript加个类型标注，有啥难的？之前TypeScript不知道怎么判断，现在你教它了，它就能在代码里自动推导类型了。的意思就是："这个对象满足Theme类型，但不要把它变成Theme类型"。上个月组里来了个新人，工作两年，简历上写着"精通TypeScript"。
2025-12-02 21:36:17
737
原创 那个说“TypeScript是多余的“的同事，昨晚又在改bug到凌晨
简单说就是："我不知道这里是什么类型，TypeScript你帮我推导一下，推导出来的结果叫R"。90%的人以为自己在用TypeScript，其实只是在用"带类型注释的JavaScript"。第一天他就跟我说："TypeScript就是JavaScript加个类型标注，有啥难的？之前TypeScript不知道怎么判断，现在你教它了，它就能在代码里自动推导类型了。的意思就是："这个对象满足Theme类型，但不要把它变成Theme类型"。上个月组里来了个新人，工作两年，简历上写着"精通TypeScript"。
2025-12-02 21:36:17
702
原创 那个说“TypeScript是多余的“的同事，昨晚又在改bug到凌晨
简单说就是："我不知道这里是什么类型，TypeScript你帮我推导一下，推导出来的结果叫R"。90%的人以为自己在用TypeScript，其实只是在用"带类型注释的JavaScript"。第一天他就跟我说："TypeScript就是JavaScript加个类型标注，有啥难的？之前TypeScript不知道怎么判断，现在你教它了，它就能在代码里自动推导类型了。的意思就是："这个对象满足Theme类型，但不要把它变成Theme类型"。上个月组里来了个新人，工作两年，简历上写着"精通TypeScript"。
2025-12-02 21:36:17
960
原创 那个说“TypeScript是多余的“的同事，昨晚又在改bug到凌晨
简单说就是："我不知道这里是什么类型，TypeScript你帮我推导一下，推导出来的结果叫R"。90%的人以为自己在用TypeScript，其实只是在用"带类型注释的JavaScript"。第一天他就跟我说："TypeScript就是JavaScript加个类型标注，有啥难的？之前TypeScript不知道怎么判断，现在你教它了，它就能在代码里自动推导类型了。的意思就是："这个对象满足Theme类型，但不要把它变成Theme类型"。上个月组里来了个新人，工作两年，简历上写着"精通TypeScript"。
2025-12-02 21:36:17
732
原创 那个说“TypeScript是多余的“的同事，昨晚又在改bug到凌晨
简单说就是："我不知道这里是什么类型，TypeScript你帮我推导一下，推导出来的结果叫R"。90%的人以为自己在用TypeScript，其实只是在用"带类型注释的JavaScript"。第一天他就跟我说："TypeScript就是JavaScript加个类型标注，有啥难的？之前TypeScript不知道怎么判断，现在你教它了，它就能在代码里自动推导类型了。的意思就是："这个对象满足Theme类型，但不要把它变成Theme类型"。上个月组里来了个新人，工作两年，简历上写着"精通TypeScript"。
2025-12-02 21:36:17
844
原创 那个说“TypeScript是多余的“的同事，昨晚又在改bug到凌晨
简单说就是："我不知道这里是什么类型，TypeScript你帮我推导一下，推导出来的结果叫R"。90%的人以为自己在用TypeScript，其实只是在用"带类型注释的JavaScript"。第一天他就跟我说："TypeScript就是JavaScript加个类型标注，有啥难的？之前TypeScript不知道怎么判断，现在你教它了，它就能在代码里自动推导类型了。的意思就是："这个对象满足Theme类型，但不要把它变成Theme类型"。上个月组里来了个新人，工作两年，简历上写着"精通TypeScript"。
2025-12-02 21:36:17
470
原创 搜索框为什么会显示“旧数据“？彻底理解JavaScript竞态条件的那些坑
想象你在做一个"瀑布流加载"的无限滚动列表（像微博的信息流），如果不节流scroll事件，可能每秒就要检查100+次是否需要加载更多数据。现实世界里，我们可以看看淘宝搜索框当你快速输入时，之前的搜索请求确实被中止了（在Chrome DevTools的Network标签里能看到一堆"取消"的请求）。你有没有遇到过这种诡异的现象：在一个搜索框里快速输入"React"，然后立刻删除几个字变成"Re"，结果屏幕闪了闪，突然又显示出"React"的搜索结果？很多开发者写出来的搜索功能只用了防抖，却忽视了竞态条件。
2025-11-29 20:53:12
543
原创 搜索框为什么会显示“旧数据“？彻底理解JavaScript竞态条件的那些坑
想象你在做一个"瀑布流加载"的无限滚动列表（像微博的信息流），如果不节流scroll事件，可能每秒就要检查100+次是否需要加载更多数据。现实世界里，我们可以看看淘宝搜索框当你快速输入时，之前的搜索请求确实被中止了（在Chrome DevTools的Network标签里能看到一堆"取消"的请求）。你有没有遇到过这种诡异的现象：在一个搜索框里快速输入"React"，然后立刻删除几个字变成"Re"，结果屏幕闪了闪，突然又显示出"React"的搜索结果？很多开发者写出来的搜索功能只用了防抖，却忽视了竞态条件。
2025-11-29 20:53:12
929
原创 搜索框为什么会显示“旧数据“？彻底理解JavaScript竞态条件的那些坑
想象你在做一个"瀑布流加载"的无限滚动列表（像微博的信息流），如果不节流scroll事件，可能每秒就要检查100+次是否需要加载更多数据。现实世界里，我们可以看看淘宝搜索框当你快速输入时，之前的搜索请求确实被中止了（在Chrome DevTools的Network标签里能看到一堆"取消"的请求）。你有没有遇到过这种诡异的现象：在一个搜索框里快速输入"React"，然后立刻删除几个字变成"Re"，结果屏幕闪了闪，突然又显示出"React"的搜索结果？很多开发者写出来的搜索功能只用了防抖，却忽视了竞态条件。
2025-11-29 20:53:12
670
原创 搜索框为什么会显示“旧数据“？彻底理解JavaScript竞态条件的那些坑
想象你在做一个"瀑布流加载"的无限滚动列表（像微博的信息流），如果不节流scroll事件，可能每秒就要检查100+次是否需要加载更多数据。现实世界里，我们可以看看淘宝搜索框当你快速输入时，之前的搜索请求确实被中止了（在Chrome DevTools的Network标签里能看到一堆"取消"的请求）。你有没有遇到过这种诡异的现象：在一个搜索框里快速输入"React"，然后立刻删除几个字变成"Re"，结果屏幕闪了闪，突然又显示出"React"的搜索结果？很多开发者写出来的搜索功能只用了防抖，却忽视了竞态条件。
2025-11-29 20:53:12
721
原创 搜索框为什么会显示“旧数据“？彻底理解JavaScript竞态条件的那些坑
想象你在做一个"瀑布流加载"的无限滚动列表（像微博的信息流），如果不节流scroll事件，可能每秒就要检查100+次是否需要加载更多数据。现实世界里，我们可以看看淘宝搜索框当你快速输入时，之前的搜索请求确实被中止了（在Chrome DevTools的Network标签里能看到一堆"取消"的请求）。你有没有遇到过这种诡异的现象：在一个搜索框里快速输入"React"，然后立刻删除几个字变成"Re"，结果屏幕闪了闪，突然又显示出"React"的搜索结果？很多开发者写出来的搜索功能只用了防抖，却忽视了竞态条件。
2025-11-29 20:53:12
1000
原创 搜索框为什么会显示“旧数据“？彻底理解JavaScript竞态条件的那些坑
想象你在做一个"瀑布流加载"的无限滚动列表（像微博的信息流），如果不节流scroll事件，可能每秒就要检查100+次是否需要加载更多数据。现实世界里，我们可以看看淘宝搜索框当你快速输入时，之前的搜索请求确实被中止了（在Chrome DevTools的Network标签里能看到一堆"取消"的请求）。你有没有遇到过这种诡异的现象：在一个搜索框里快速输入"React"，然后立刻删除几个字变成"Re"，结果屏幕闪了闪，突然又显示出"React"的搜索结果？很多开发者写出来的搜索功能只用了防抖，却忽视了竞态条件。
2025-11-29 20:53:12
899
原创 搜索框为什么会显示“旧数据“？彻底理解JavaScript竞态条件的那些坑
想象你在做一个"瀑布流加载"的无限滚动列表（像微博的信息流），如果不节流scroll事件，可能每秒就要检查100+次是否需要加载更多数据。现实世界里，我们可以看看淘宝搜索框当你快速输入时，之前的搜索请求确实被中止了（在Chrome DevTools的Network标签里能看到一堆"取消"的请求）。你有没有遇到过这种诡异的现象：在一个搜索框里快速输入"React"，然后立刻删除几个字变成"Re"，结果屏幕闪了闪，突然又显示出"React"的搜索结果？很多开发者写出来的搜索功能只用了防抖，却忽视了竞态条件。
2025-11-29 20:53:12
881
原创 搜索框为什么会显示“旧数据“？彻底理解JavaScript竞态条件的那些坑
想象你在做一个"瀑布流加载"的无限滚动列表（像微博的信息流），如果不节流scroll事件，可能每秒就要检查100+次是否需要加载更多数据。现实世界里，我们可以看看淘宝搜索框当你快速输入时，之前的搜索请求确实被中止了（在Chrome DevTools的Network标签里能看到一堆"取消"的请求）。你有没有遇到过这种诡异的现象：在一个搜索框里快速输入"React"，然后立刻删除几个字变成"Re"，结果屏幕闪了闪，突然又显示出"React"的搜索结果？很多开发者写出来的搜索功能只用了防抖，却忽视了竞态条件。
2025-11-29 20:53:12
583
原创 搜索框为什么会显示“旧数据“？彻底理解JavaScript竞态条件的那些坑
想象你在做一个"瀑布流加载"的无限滚动列表（像微博的信息流），如果不节流scroll事件，可能每秒就要检查100+次是否需要加载更多数据。现实世界里，我们可以看看淘宝搜索框当你快速输入时，之前的搜索请求确实被中止了（在Chrome DevTools的Network标签里能看到一堆"取消"的请求）。你有没有遇到过这种诡异的现象：在一个搜索框里快速输入"React"，然后立刻删除几个字变成"Re"，结果屏幕闪了闪，突然又显示出"React"的搜索结果？很多开发者写出来的搜索功能只用了防抖，却忽视了竞态条件。
2025-11-29 20:53:12
607
原创 React 19真的快了吗？我同事改出来的性能真相
改一个filter的值，store告诉所有subscribe的组件"我变了"。在他们的项目中，React 19的优化效果比React 18好了不少。memoization是在补救——你已经触发了重新渲染，memo阻止了一部分。这一步花了差不多一个礼拜，整个项目扫一遍，找出所有在render时创建的函数，都加上useCallback。用户改搜索框，输入"张三"：之前重新渲染整个20多个组件，现在只重新渲染FilterPanel这一个。我的同事打开Profiler，一行行追踪重新渲染的来源。
2025-11-28 21:04:49
435
原创 你的App消息推送为什么石沉大海？看Service Worker源码我终于懂了
这篇文章，我们会从源码级别剖析Service Worker、Push API和Notification API的协作原理，以及大厂（字节、阿里云）推荐的实现思路。Web Push通知看似简单的"发送一条消息"，实际上涉及浏览器、Service Worker、推送服务、加密、权限管理等多个复杂层面。大多数开发者对Push通知的实现停留在"Copy-Paste代码"阶段，从未理解它在浏览器层面的真实工作机制。大多数开发者对Push通知的理解，停留在"调用API发送消息"的表面。这是大多数开发者的薄弱环节。
2025-11-27 19:42:31
377
原创 你真的理解「高级前端」在做什么吗？一份从业10年的工程师视角剖析
但问题是，大多数人连中级和高级的本质区别都没搞明白，就急着去学那些表面上"高级"的技术。这篇文章的目标不是教你怎么速成，而是让你明白，高级开发者为什么能拿更高的薪水——因为他们解决的问题类型完全不同。所以，与其问「怎样成为高级开发者」，不如问「我准备好用高级的方式思考问题吗？中级时，错了就是个小bug，高级时，一个错误的架构决策影响整个团队的效率。不是「我应该用什么技术」，而是「我的场景和约束是什么，什么技术最适合」。如果你真的想升级，这不是一个「学习计划」问题，而是一个「工作选择」问题。
2025-11-26 21:01:12
299
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
272
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
363
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
403
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
418
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
857
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
557
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
777
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
700
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
933
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
801
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
658
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
292
原创 React性能优化的真相：为什么你的优化可能是在“自欺欺人“？
他们优化的是"感觉"，而不是"实际"。：在 Render Phase，React 仅仅是执行函数和对比虚拟 DOM。：大多数 React 性能问题根本不是 React 的问题，而是架构设计的问题。React 很聪明，它不会因为你传入的函数引用变了就重排网页。很多人还在用 React 16 时代的优化思维。很多开发者优化的其实是"虚拟 DOM 对比"这一步，但如果最后 DOM 没有变化，这个优化。因为它从根本上减少了 DOM 节点数量，而 DOM 操作是最昂贵的。这是最被误解的地方。这才是真正有价值的优化。
2025-11-26 00:06:40
455
原创 不想重构整个项目？先搞懂什么是DAL才是关键
他看到一个React项目里，开发者直接在useEffect里写SQL query，然后在组件里JOIN三张表，当时只是皱了皱眉。分层的好处：测试OrderService时，只需Mock OrderRepository，而不需要关心OrderRepository的实现。UI层问业务需求，业务层问DAL"我要什么数据"，DAL负责"怎么去拿"。区别看起来不大，但这就是为什么有些工程师写的代码能用5年不改，而有些代码3个月就需要大重构。如果你现在的代码是"在React里直接写SQL"的风格，别着急改。
2025-11-25 08:02:13
258
原创 useState vs useRef：一个错误的选择能让你的React应用慢10倍？
半年前，我在做一个内部电商项目的性能优化。当你有一个快速变化的值（比如用户输入的搜索词），但你想在异步操作中访问它时，常常会踩到"旧值"的坑。假设你在做淘宝商品详情页的某个功能：用户切换不同的规格时，需要查询价格。这样做，即使用户在 1 秒内切换 5 次规格，缓存存进去 5 次，组件就重渲染 5 次。useRef 给你一个"夹层空间"，可以存储任何 JavaScript 对象，这些对象的变化不会触发组件重新渲染。[ ] Profiler 显示"黄色"或"红色"帧（> 16ms，影响 60fps）
2025-11-24 20:25:01
1011
原创 Canvas vs WebGL：你真的搞懂浏览器图形渲染了吗？
DOM元素，浏览器按照CSS盒模型渲染，层层嵌套，相互影响。ByteDance的数据大屏、Alibaba的OceanBase可视化管理员，都是Canvas 2D。：DOM方案 100ms+，Canvas方案 <5ms。每周深度解析React、性能优化、浏览器原理，从源码到实战，陪你成为真正的前端高手。：你直接在像素层操作，浏览器无需参与，纯粹的JavaScript与GPU对话。，一旦你在上面画了东西，浏览器就不管了，它变成了一张"静态图片"。用Canvas 2D画图表，100个点也卡顿的（因为没优化）
2025-11-23 21:23:20
807
原创 React应用明明数据快，为什么用户还是觉得慢？Suspense在React 19回答了这个问题
这就像一个餐厅的流程：厨房在做一份复杂的菜（内容区的数据），结果前台的服务员（导航和菜单）就被告知"等着吧，我们在忙"。你查了一圈网络瀑布图，数据一次次请求下来，但有一种诡异的现象在重复：每当一个深层组件的数据开始加载，整个页面就陷入了"假死"状态——不是真的卡顿，而是一种让人难以名状的"被冻结感"。**加载过程变得"可见"和"可控"**——骨架屏清楚地表明"我在加载数据"，而不是"应用卡住了"这两者的区别说起来简单，但从用户的视角，这是从"应用假死了"到"应用在聪明地加载"的根本转变。
2025-11-23 11:03:26
669
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人