专注应用全链路优化，覆盖性能、体验、代码与资源优化，让应用更快、更稳、更易用。
-
我的写法，亲测靠谱 先说结论，SWC真的香。作为一个前端老油条，我从去年开始把几个项目的构建工具从Babel换成了SWC，性能提升肉眼可见。特别是那种动辄上千个文件的大型项目，原本要等30秒的热更新，...
-
项目初期的技术选型 这次的项目是个电商类网站，客户对性能要求特别高。说实话，一开始我也没太在意Core Web Vitals这些东西，觉得只要代码写得规范就行。但客户直接甩给我一份Lighthouse...
-
项目背景和循环引用的引入 最近做了一个数据可视化项目，主要用Vue 3开发。项目要求实现一个复杂的数据联动功能：多个图表之间需要实时同步数据更新，同时还要支持撤销/重做功能。刚开始设计的时候觉得挺简单...
-
又踩坑了，SSR渲染性能问题折腾了我两天 最近在做一个基于Next.js的项目，遇到一个头疼的问题：首屏加载速度慢得让人抓狂。用户访问页面时，明明数据量不大，但硬是要等个两三秒才能看到内容。这里我踩了...
-
优化前：卡得不行 最近做的一个项目，首页加载慢到离谱。用户进来后白屏时间太长，优化前足足有5秒多的白屏，尤其是低网速环境下，简直让人崩溃。我试了几个工具测了一下，Lighthouse 给出的性能评分只...
-
又出问题了，页面卡成PPT 今天上线前做最后的性能检查，Lighthouse一跑，直接给我整不会了——强制重排阻塞主线程 3.2 秒。啥概念？用户点个按钮，页面直接卡住三秒没反应，这谁顶得住。更离谱的...
-
又踩坑了，touchmove滚动失效 今天在搞一个 H5 活动页的时候，遇到个离谱的问题：页面里有个弹窗，弹窗出现后我给 document 绑了 touchmove 事件，想阻止底层页面滚动。结果弹窗...
-
我的写法，亲测靠谱 Retina 屏幕适配这事，我做了好几年项目了，一开始也以为就是换张高清图就完事。结果上线后 QA 一反馈：「你这图标怎么模糊？」我一看，好家伙，果然糊成一片。折腾了半天才发现问题...
-
又踩坑了，touchmove滚动失效 今天在搞一个移动端的滑动卡片组件，加了个简单的微交互：手指滑动时，卡片跟着偏移，松手后判断滑动距离决定是回弹还是滑走。逻辑不复杂对吧？结果一上手就翻车了。 问题出...
-
又踩坑了，touchmove滚动失效 今天早上上线前最后测一遍功能，发现列表页的无限滚动在 iOS 上完全不工作。安卓上好好的，PC 上也没问题，就 iPhone 微信和 Safari 里，滚到页面底...
-
我的写法，亲测靠谱 说到垃圾回收（GC），很多人觉得这是浏览器的事儿，我们前端只要写好代码就行。但我在实际项目里踩过太多次坑了——内存飙到 1G、页面卡死、频繁 GC 导致帧率暴跌。后来我开始关注 G...
-
优化前：卡得不行 项目上线半年，用户反馈越来越多：首页加载慢、点击按钮半天没反应、手机上直接卡死。我自己用低端安卓机试了下，点个菜单要等两秒才弹出来，瀑布流页面一滚动就掉帧，简直没法用。首屏时间测了下...
-
先说结论：我一般选封装函数 + AbortController 重试机制这玩意儿，说简单也简单，说复杂也能折腾你一整天。我在好几个项目里都碰过类似需求——接口偶尔抖一下，用户点个按钮没反应，刷新页面又...
-
先上效果，再讲原理 我最近给一个项目加离线访问功能，用户打开过一次页面后，哪怕断网也能继续用。这玩意儿说白了就是 Service Worker 的缓存能力。别一上来就看概念，先看怎么用。 最简单的场景...
-
优化前：卡得不行 我接手这个项目的时候，首页加载体验简直没法看。用户点开页面，白屏好几秒，啥都不显示，等接口数据回来才“唰”一下全出来。用户体验差到我自己都看不下去。 我们这项目是个内容聚合页，要拉 ...
-
优化前：卡得不行 上周上线了一个新项目，首页是几个大图轮播 + 商品展示，本来觉得设计挺清爽的，结果用户反馈加载慢，尤其是手机端，进页面要等五六秒才看到内容。我自己拿台旧 iPhone 试了下，确实卡...
-
横竖屏切换，这破事又来了 上周上线前最后一天，测试甩给我一个bug：iPhone上横屏的时候页面布局炸了。输入框被键盘顶上去之后，收起键盘页面回不来了，留了一大片空白，按钮点不了。我第一反应是“不会吧...
-
先上代码，我每次都这么写 每次做新项目，只要涉及到社交分享，第一件事就是把 Open Graph 标签给加上。不是为了多高级的功能，就是为了避免别人转发你链接的时候，封面图裂了、标题乱码、描述变成页面...
-
我的写法，亲测靠谱 我一般在项目里用 preconnect 的时候，直接写在 <head> 里，简单粗暴但有效。先上代码： <link rel="preconnect&qu...
-
项目初期的技术选型 这个项目是个内部工具库，要打包成一个轻量级的 JS SDK，供其他团队通过 npm 引入。一开始我们用 Webpack，配置写了一堆，结果打包出来的文件太大，还带了一堆 runti...
