前端性能优化

为什么我开始用AVIF？效果真的香 说实话，最初我对AVIF这种新格式是持观望态度的。毕竟webp刚普及没多久，又来一个新玩意儿，谁愿意折腾啊。但最近几个项目实在被图片体积压得喘不过气，尤其是那些高清...

Fetch上传的几种姿势，我更喜欢用这个 最近在做文件上传的功能，刚好涉及到用Fetch API实现上传。这东西说简单也简单，但真要玩出点花样来还挺有意思。今天就聊聊几种常见的Fetch上传方案，我个...

先看效果，再看代码 最近在折腾 Fresh，Denoland 推出的全栈框架。说实话，这玩意儿刚上手时真让我头疼了一阵子，但用熟了之后感觉还挺香的。如果你也在找一个轻量、快速、不依赖太多复杂配置的框架...

又踩坑了，动画卡顿问题折腾了一天 昨天做移动端页面的时候，遇到一个特别烦人的动画性能问题。用CSS做的一个卡片滑动效果，在低端安卓机上卡得不行，掉帧严重。这里我踩了个坑，一开始以为是样式写得不够精简，...

先说结论：Lighthouse vs WebPageTest，我更偏向这个 最近在优化一个电商项目的时候，性能测试成了日常。说实话，搞前端这么多年，每次提到性能测试，总感觉像在拆盲盒——你永远不知道下...

为什么我要对比这几个方案？ 最近在做一个移动端项目，需求里有大量表单、弹窗和交互组件的需求。我比较喜欢用现成的UI库来快速搭建界面，但这次有点纠结——Cube UI 和 Vant 都是基于 Vue 的...

又踩坑了，Jotai 的异步状态管理让我头大 最近在用 Jotai 做一个项目的状态管理，本来觉得这东西简单好用，结果在处理异步数据的时候踩了个大坑。折腾了半天才发现问题出在哪。 场景是这样的：我需要...

先说结论：我更喜欢用localStorage+手动缓存 最近在重构一个老项目，涉及到磁盘缓存（Disk Cache）的选型问题。说实话，这个问题困扰了我好一阵子，试了好几种方案，踩了不少坑。最后我发现...

为什么我要对比这些方案？ 最近手头一个项目需要用到小程序容器技术，主要是为了在App里嵌入一些动态化的小程序页面。FinClip算是这个领域比较火的一个玩家了，但我个人习惯是：别急着上手，先看看还有哪...

我为什么对比页面切换的方案？ 说实话，页面切换这事儿，看似简单，但实际开发中坑还挺多。尤其是现在前端框架五花八门，选型的时候总让人纠结。最近我在一个项目里，需要频繁在多个页面间切换，既要保证用户体验流...

优化前：卡得不行 最近做的一个项目，首页加载慢到离谱。用户进来后白屏时间太长，优化前足足有5秒多的白屏，尤其是低网速环境下，简直让人崩溃。我试了几个工具测了一下，Lighthouse 给出的性能评分只...

我的写法，亲测靠谱 先说说我用 TailwindCSS 的核心思路吧。我一般不会直接在 HTML 里堆一堆类名，而是会结合组件化开发的方式，把常用的样式封装成 React 或 Vue 组件。这样既能复...

我的写法，亲测靠谱 我搞前端这几年，样式这块真是踩过太多坑。最早的时候啥都用全局CSS，组件一多，改个按钮颜色能牵出一堆bug，最后干脆把整个样式表重写了两遍。后来试了Sass、Less，觉得好一点，...

又双叒叕翻车了，Lynx下touch事件完全不响应 今天上线前最后测一遍移动端，好家伙，直接傻眼——页面在Lynx浏览器里滑都滑不动。不是卡顿，是压根没反应。touchstart能打console，但...

又翻车了，预加载把页面卡成幻灯片 今天上线前最后测一把性能，好家伙，Lighthouse直接给我干到40多分，首屏加载时间快3秒。明明昨天还是80+的，我寻思也没加啥大资源啊。打开Network面板一...

我的写法，亲测靠谱 我一般写 throttle 都用这个版本，简洁、稳定、边界情况处理得也干净。直接上代码： function throttle(func, delay) { let timerId ...

我为什么非得搞懂Renderer进程这堆事？ 说白了，是因为项目里开始上Electron了。我们团队最近在做一个桌面端的编辑器工具，基于Electron + Vue，结果一上来就被Renderer进程...

优化前：卡得不行 项目上线半年，用户反馈越来越多：首页加载慢、点击按钮半天没反应、手机上直接卡死。我自己用低端安卓机试了下，点个菜单要等两秒才弹出来，瀑布流页面一滚动就掉帧，简直没法用。首屏时间测了下...

又踩坑了，Brick Next 的 SSR 数据脱水失败 今天上线前最后测一把，发现页面首屏数据全空，Loading 转了半天才出来内容。本地开发环境好好的，一上预发就抽风。排查半小时，定位到是 Br...

优化前：卡得不行 上周上线了一个新功能，页面里要加载几百个动态卡片，每个都带图片、标签和交互。本以为用 Vue 做响应式更新挺稳的，结果一上测试环境，首屏加载直接 5 秒起步，滚动也卡得像 PPT。用...