-
识别隐藏性能退化需建立带基线的自动化流水线：LighthouseCI通过多次采样、历史对比、业务阈值断言及CI集成，将偶然检测变为持续守门，精准定位LCP、CLS等指标恶化并驱动团队响应。
-
CSS变量不继承，var()沿DOM向上查找最近生效定义；应将变量定义在组件根元素（如.user-card）实现局部作用域，避免:root全局污染；all:unset仅适用于不可控第三方内容兜底，非解决变量冲突方案。
-
box-sizing:border-box和line-height是解决input与button高度不一致最稳定方案；需统一设置并加浏览器前缀，同时重置outline、border，button需type="submit"并处理移动端touch-action与缩放。
-
安全引入第三方CSS库需确保来源可信、校验完整性和实施策略限制，具体包括：使用HTTPS协议从知名CDN（如jsDelivr、unpkg）引入并指定版本号；添加SRI完整性校验防止资源被篡改；配置CSP策略限制样式源仅限于自身和可信CDN；对高安全性要求项目建议本地托管以降低依赖风险。
-
accept属性仅前端提示，不校验文件真实类型；必须结合文件名后缀与后端magicbytes双重校验，且multiple上传时无法自动过滤混合类型。
-
必须用display:none才能让元素彻底消失、不占位、不影响布局；visibility:hidden仅透明化但保留盒模型参与布局，opacity:0仍可交互且性能开销最大。
-
SCSS中应基于基础单位$spacing-unit派生语义化spacingmap，并封装spacing()函数支持方向参数与fallback，配合命名空间utilityclass和ESLint约束，实现可维护、可扩展的间距管理。
-
因为.container的width始终为100%，但实际渲染宽度由断点媒体查询中的max-width决定；例如在≥1200px视口下，computedwidth显示1140px，正是@media(min-width:1200px){.container{max-width:1140px}}生效所致。
-
BOM是浏览器厂商实践形成的事实接口，核心为window对象，它映射浏览器窗口、承载全局作用域，并提供弹窗、窗口管理、尺寸控制及事件监听等功能，协同location、history等子对象工作，但受安全策略限制。
-
Array.prototype.with是ES2023新增的不可变数组方法，用于安全替换单个索引元素；它不修改原数组，仅接受数字索引和新值两个参数，越界或负数索引会抛出RangeError。
-
quoted()和unquoted()仅作用于字符串字面量，不支持运行时计算结果；动态拼接应优先使用插值（@{...}），真正字符串操作需依赖Less4.0+的JS函数。
-
可直接将URLSearchParams实例传给fetch的url参数，无需手动拼接；它自动编码（如中文转%E5%BC%A0%E4%B8%89），支持动态增删参数，服务端可原生解析。
-
TextEncoder和TextDecoder仅支持UTF-8编码转换，不处理HTML实体、GBK等其他编码；encode()返回UTF-8字节而非码点；需复用实例、注意流式解码与浏览器兼容性。
-
Array.from是NodeList转数组最稳妥的方式，因其专为可迭代对象设计，兼容IE11+、语义清晰、支持映射且避免扩展运算符潜在陷阱；错误包括传入null或连写未赋值，空NodeList无问题但querySelector返回null不可直接转换。
-
原生<inputtype="time">能用但限制多：兼容性差（Safari旧版退化为文本框）、不支持分钟步进（如15分钟）、无清空按钮、无法隐藏秒；推荐flatpickr（轻量、支持minuteIncrement/清空/格式控制）或手写select方案。
