-
IndexedDB本身不是离线存储，关网白屏主因是ServiceWorker未注册或未缓存HTML；indexedDB.open()报错多因HTTPS缺失、无用户交互、隐私模式、非法库名；需结合SW缓存与状态同步机制保障离线可用性。
-
用CSSGrid实现响应式卡片组，移动端单列、768px起双列、1024px起三列；采用auto-fit+minmax保证弹性列数，gap替代margin确保间距可靠，卡片内用flexcolumn+min-height+flex:1实现等高与底部对齐，图片用picture/aspect-ratio/宽高属性防抖动和CLS，卡片整体加padding提升触控性，并添加role="list"/"listitem"保障无障碍。
-
setCustomValidity()是唯一能覆盖默认错误文案并影响提交性的方法；必须在input和blur事件中每次都先调用setCustomValidity('')再判断设错，否则错误状态持续存在。
-
:read-only和:read-write伪类仅响应HTML的readonly属性（非JS属性），仅对input/textarea原生生效，contenteditable需验证，disabled元素不匹配；:read-only元素仍可聚焦和提交，而:disabled彻底禁用交互；IE和旧Safari不支持，需@supports或属性选择器兜底。
-
表单性能测试的核心是模拟用户提交行为并测量端到端响应时间，需通过识别关键表单、定义响应时间等指标、选用浏览器开发者工具或JMeter等负载工具、模拟真实用户操作、处理动态数据与会话、分析网络与客户端耗时，并在不同并发下测试以发现瓶颈，常见挑战包括动态令牌、异步提交和第三方依赖，而工具选择应综合协议支持、脚本能力、并发规模、报告功能及团队技能，最终确保测试结果真实反映系统性能，完整覆盖从用户操作到服务器响应的全过程。
-
CSS的transition对background-image（含linear-gradient）完全无效，因规范将其列为不可动画属性；可用background-position位移模拟流动效果或伪元素opacity淡入淡出实现视觉过渡。
-
WeakMap是实现真正私有属性的可靠方式，因其键为弱引用对象且键集合完全不可见，无法被枚举、遍历或反射探测；配合模块级WeakMap实例与实例作为键，可安全封装私有数据。
-
完全可行，但只能模拟静态日历图标外观，无法实现日期渲染、交互或动态更新，因伪元素无DOM节点、不支持计数器递增、事件绑定及Grid布局。
-
使用TailwindCSS内置工具类可快速统一按钮颜色与大小：1.颜色通过bg-blue-600、text-white和hover:bg-blue-700实现蓝底白字悬停加深；2.大小用py-2px-4设定常规尺寸，小按钮用py-1px-3，大按钮用py-3px-6；3.结合rounded-lg和transition打造圆角与动画，形成可复用的类组合，确保跨组件视觉一致且维护简便。
-
WebWorker通信不直接导致事件循环抖动，真正原因在于消息传递方式、数据体积、主线程负载及Worker内部逻辑；应使用transferable、扁平化消息、节流输出、OffscreenCanvas零拷贝等策略抑制时延波动。
-
使用Flexbox实现等高列只需设置父容器display:flex，子元素会自动拉伸至相同高度。通过flex:1可让各列等宽并填满容器，配合padding、margin和背景色可直观展示等高效果。无论内容多少，列高始终一致，适用于多栏布局、卡片组和响应式设计。关键在于避免子元素设置固定高度，推荐在容器上使用min-height控制最小高度，确保布局灵活性。
-
float在flex容器的直接子元素上必然失效，这是CSS规范强制行为，浏览器会静默将float计算值设为none，且不触发BFC；flex与float属于互斥布局机制，前者由容器统一调度子项位置，后者使元素部分脱离文档流。
-
Next.js中启用ISR需在getStaticProps中返回revalidate选项，如revalidate:60，仅对导出该函数的React页面生效，且须部署于支持边缘运行时的环境（如Vercel），本地开发不触发。
-
容器查询生效的前提是显式声明container-type:inline-size，否则@container规则不触发；需设在父容器（非grid本身），命名容器避免作用域冲突，且不可通过内联style动态设置。
-
用setTimeout包裹dispatchEvent的核心目的是将事件派发推到下一个宏任务，避开同步阻塞、让浏览器有机会渲染或响应；它不改变事件语义，但使监听器异步执行，避免UI冻结。
