一个上传组件里出现五个布尔标志不算稀奇：isLoading、isError、isSuccess、isPaused、isValidating。每个标志单独看都合理，合在一起就埋下了隐患。 布尔标志的组合爆炸 $n$ 个独立的布尔标志，理论上能表示 $2^n$ 种组合。五个标志就是 32 种，而真正合法…
1.4k
0
5
林见川 发布于 · 2026-10-17
大前端
7AA7 技术博客 · 大前端 下的全部文章。
页面上的一个像素要出现在屏幕上，中间要穿过解析、样式计算、布局、绘制、栅格化、合成这几道工序。搞清楚每道工序的输入输出，才能解释为什么改 width 卡而改 transform 不卡。 解析：字节流变成两棵树 HTML 解析器拿到的是字节流，先按编码（<meta cha…
712
4
2
白露 最后回复于 · 2026-10-01
把界面上的中文换成英文，只是国际化里最容易被看见、也最不麻烦的一块。真正消耗工期的，是那些换了语言之后行为会跟着变的东西。 翻译之外还有什么 一个看似简单的"订单已提交"提示，在不同地区要处理：金额用什么货币、小数点和小数位是否一致、日期是月/…
1.6k
0
12
林见川 发布于 · 2026-09-29
布局能力的几次升级，方向是把"由 JS 计算尺寸"这件事逐步还给 CSS。掌握每种能力的适用边界，比记住语法重要。 一维与二维：Flex 与 Grid 的分工 Flex 是一维布局模型：沿主轴排列项目，能控制分布、对齐、伸缩，但不关心行与列是否对齐。Grid 是二维模型：…
1.8k
2
14
Moon 槐 最后回复于 · 2026-09-30
构建工具的迭代方向很清晰：开发时尽可能少做工作，生产时尽可能多做优化。理解这条主线，就能看懂冷启动速度差异的来源。 bundle 与 no-bundle：dev server 的本质差异 传统打包式 dev server（Webpack Dev Server）的工作方式：启动时从入口开始遍历整个模…
1.6k
3
4
NullRef 最后回复于 · 2026-09-29
Vue 3 把响应式底层从 Object.defineProperty 换成了 Proxy。这个替换不只是换个 API，它顺带解决了一批历史遗留问题，也引入了新的边界情况。 Proxy 相比 defineProperty 强在哪 defineProperty 要拦截属性读写，就必须对每个已知属性逐个定义 getter/sette…
2.5k
2
10
码同客 最后回复于 · 2026-09-27
测试金字塔给的经典配比是 70/20/10，但直接套到前端项目上会失真。理解失真在哪里，比记住一个数字重要。 金字塔在前端的现实形态 经典金字塔的两个前提在前端都不完全成立。 E2E 比后端的集成测试贵得多。后端集成测试通常在进程内跑，而前端 E2E 要启动真…
670
0
2
Vector 陈 发布于 · 2026-09-23
WebAssembly 常被误解成"让网页变快的银弹"。它在特定场景确实有用，但用错地方反而更慢。搞清楚它是什么、代价在哪，判断力就有了。 WASM 是什么 WebAssembly 是一种低层的、可移植的二进制指令格式，设计目标是作为高级语言的编译目标。它跑在一个基于栈的…
1.9k
4
8
VectorQ 最后回复于 · 2026-09-19
状态管理方案的更替，主线其实只有一条：订阅粒度从粗到细。每一次范式变化都在解决"一个状态变化，到底要重渲染多少个组件"。 单向数据流与可预测性 React 的基本模型是 UI = f(state)。状态存在组件树里，自上而下流动；用户事件从下往上触发状态更新，再…
1.9k
4
10
Vector 陈 最后回复于 · 2026-09-14
微前端是把后端微服务的组织思路搬到前端。它解决的是组织问题，不是技术问题——这个定位决定了什么时候该用、什么时候不该用。 它真正解决什么 三个真实诉求： 独立部署：A 团队改了订单页，不需要等 B 团队的发布窗口，也不需要整站回归； 技术栈异构：老…
1.5k
4
16
Schema 李 最后回复于 · 2026-09-12
自己搭一套监控，难点不在"怎么发请求"，而在采集口径是否稳定、数据能否还原现场、上报是否影响性能本身。这三件事决定了数据是资产还是噪音。 PerformanceObserver 采集要点 核心指标都通过 PerformanceObserver 拿，而不是 performance.timing（后者已被…
1.6k
3
7
许清欢 最后回复于 · 2026-09-07
类型体操不是炫技。它真正的价值在于：把运行时的约束前移到编译期，让一批错误在写代码时就暴露。代价是可读性和编译时间，所以要懂得在哪里停手。 泛型约束与默认值 裸泛型 <T> 意味着"任何类型"，等于放弃检查。约束让泛型带上前提： function getK…
810
0
3
苏黎 发布于 · 2026-09-06
三个指标其实在回答三个不同问题：内容多久能看到（LCP）、操作多久有响应（INP）、页面视觉稳不稳（CLS）。它们各自的成因几乎不重叠，优化手段也必须分开谈。 三个指标各自衡量什么 LCP（Largest Contentful Paint）：视口内最大内容元素（图片、视频封面…
1.2k
2
3
温言 最后回复于 · 2026-09-05