SPA 挂一整天不刷新,内存从一百多 MB 涨到一个多 GB,页面卡到点不动——这类泄漏光看代码基本查不出来。整理这次用 DevTools 排查的完整路径:Performance 面板确认泄漏趋势、堆快照三连拍与 Comparison 视图的读法、Detached DOM 树、闭包持有和定时器未清理各自在快照里长什么样。
选择器权重看起来更高,样式却没生效——问题几乎都出在优先级计算规则没吃透。梳理 id/class/标签的权重演算、`!important` 和内联样式的边界,以及 Vue scoped、`::v-deep` 对权重的影响。
Composition API 不是给所有组件用的新写法,它解决的是逻辑跨选项分散的组织问题。这篇整理我们判断“要不要重写”的标准,以及一个真实组件的重写过程。
同样是往列表里塞一千条数据,直接循环 append 和先用 DocumentFragment 离线拼装再一次性插入,流畅度差得很明显。这篇讲清楚这个差异背后的重排重绘原理,以及和 innerHTML 拼接、事件委托、虚拟滚动这几个相邻方案的取舍。
Vite 开发环境跳过打包直接用浏览器原生 ES 模块,冷启动和热更新为什么比 Webpack 明显快;同时记录 1.x 版本生态尚浅、只适合小范围尝鲜的真实局限。
重置按钮点下去只有一半字段回到了初始值——顺着这个现象拆开看,是 Vue 2 Mixins 的选项合并策略在两个同名方法之间做了取舍。梳理合并规则、命名冲突的隐蔽性,以及普通函数、组件组合、Composition API 三种替代方案各自的适用边界。
flex-grow、flex-shrink、flex-basis 的计算规则,align-items 与 align-content 的区别,gap 属性在 flex 容器上的兼容现状和 IE11 的几个已知 bug——一个不定数量标签的自适应工具栏需求把这几个属性的实际行为全部逼了出来。
Vue 2 用 Object.defineProperty 逐个劫持属性,新增字段视图不更新,得靠 $set;Vue 3 换成 Proxy 整体拦截,这个动作差异背后是响应式机制的重写。这篇顺着这个差异往下拆,从 get/set 拦截讲到 ref/reactive 怎么选、解构为什么会断连接。
新项目起步该选 Vue CLI 还是 Vite,不该按新旧来判断,而要从生态成熟度、团队熟悉度、生产验证程度、插件完整性这几条核心维度起步,逐一对照再下结论。
中后台巨石应用要不要拆成微前端,光看社区文章下不了结论。拿内部一个报表子系统对 qiankun 2.0 做了两周试点:主/子应用的最小接入改造、样式冲突和全局变量的第一印象、公共依赖的现实困境,以及为什么最后的评估结论是小范围试点、不急于全面推开。
`new Array(3)` 和 `[undefined, undefined, undefined]` 看起来一样,`map` 一遍却截然不同;`arguments` 长得像数组却调不了 `.map`。这篇整理数组底层结构、稀疏数组、类数组转换和扩展运算符在数组上的实际边界。
梳理把 Vue 项目从 Vue CLI 迁到 Vite 的实际迁移代价:自定义 Webpack 配置、别名、环境变量、代理规则要怎么对应过去,以及为什么这个阶段只适合迁一个边界清楚的小项目。
JWT 到底放 HttpOnly Cookie 还是 localStorage,判断标准其实是两个问题:这份凭证谁需要读、被偷走的代价是什么。结合 Chrome 80 把 SameSite 默认改为 Lax 的新背景,梳理 token 的存储位置、刷新续期、多标签页同步和退出登录的完整生命周期。
骨架屏不是所有页面的标配:什么页面值得上骨架屏、什么页面转圈就够,判断标准比实现更重要。手写 CSS 骨架的实现细节、page-skeleton-webpack-plugin 这类构建期自动生成方案的取舍、SSR 场景的直出骨架、骨架和真实内容布局不一致导致的跳动怎么治,都在这次四个页面的落地里过了一遍。
前端联调被后端进度卡住,本质是缺一层可控的接口供应层。用 Express 搭独立 mock 服务的完整方案:中间件模型和路由组织、http-proxy-middleware 做未 mock 接口的透传、mock 数据热更新、延迟与异常模拟,以及它和 devServer.proxy 的分工、要不要往 BFF 方向演进的边界判断。
label 关联、input type 选择、原生校验 API 和自定义校验的边界、submit 事件与按钮 type、提交防重复——这些表单里最容易被随手糊弄过去的细节,在一个多字段资料编辑表单里全部暴露了出来。
用 Canvas 2D 在前端合成营销分享海报,要跨过的坑比想象中多:drawImage 的图片加载时序、measureText 手动实现文本换行、clip 裁圆角头像、跨域图片污染画布导致 toDataURL 报错、devicePixelRatio 不处理导出图就是糊的,还有自定义字体没加载完就绘制的时序问题,逐个记录踩坑和解法。
HappyPack 已经停止维护,webpack 4 官方更推荐 thread-loader、cache-loader 这条路,但项目里的历史配置到底要不要换、什么时候该换,值得掰开讲清楚。
同一份筛选条件,换个存储方式行为就完全不一样:请求体积莫名变大、多标签页数据不同步、刷新后该丢的没丢、不该丢的却丢了。从这几个具体的行为差异,拆开 Cookie、sessionStorage、localStorage 和 IndexedDB 的机制本质,梳理清楚各自该用在什么地方。
线上 JS 报错没人知道、用户截图报障才发现白屏,暴露的是前端错误监控的缺位。window.onerror 和 unhandledrejection 各自能捕获什么、资源加载错误为什么要用捕获阶段监听、跨域脚本的 Script error 怎么破,加上错误聚合去重和 Sentry 接入的取舍,一套采集上报层的完整落地记录。
单文件组件写起来舒服,但没有天然的分寸感——请求、状态、模板、样式全放一个 .vue 文件里也能跑。这篇讲清楚组件该按什么标准拆、请求逻辑该不该下沉到服务层、样式该归到哪一层,用一个从几十行长到七百多行的用户资料页组件贯穿说明。
同样是判断'元素进入视口',scroll 事件加 getBoundingClientRect 和 IntersectionObserver 的差别不只是性能,语义上前者是'我不停地问'、后者是'浏览器主动告诉我'。整理列表曝光埋点和触底加载两个场景下 IO 的 threshold/rootMargin 用法、曝光去重与可见时长统计,以及 root、iframe 相关的几个坑。