-
Base64嵌入仅在消除路径依赖、生成单HTML文件时有效，非性能优化；会使HTML体积增33%，无法缓存，且大图（>10KBPNG/>5KBJPEG）导致主线程阻塞。
-
直接写padding:16px会埋下维护雷，因随意数值导致设计系统脱节、重构漏改；应通过Sassmap统一管理间距值并封装容错函数spacing()确保可维护性。
-
TDD通过“红-绿-重构”循环提升代码质量：先写失败测试，再写最简实现，最后优化结构；配合Jest等工具搭建环境，编写纯函数与模块化代码，确保可测性；以add函数为例，从测试出发逐步实现功能，验证逻辑正确性，增强项目稳定性与维护性。
-
顶层await允许在ES模块顶层直接使用await，无需包裹在async函数中。它使模块能暂停执行直至异步操作完成，适用于动态配置加载、条件导入和资源预初始化。需使用.mjs文件或设置"type":"module"，并在支持的环境（如Node.js14.8+、现代浏览器）中运行。模块变为异步后会阻塞导入者，应避免滥用以防影响性能。主流浏览器和Node.js已广泛支持该特性。
-
无法用Proxy+Reflect完美转发包含私有字段（#field）的类实例，因为私有字段在语法解析阶段即报错，Proxytrap和ReflectAPI均无法触达其访问逻辑。
-
要用String.prototype.match()提取版本号，需用非捕获分组(?:...)忽略上下文，将目标版本号置于普通捕获组()中，再通过result?.[1]安全获取；多匹配时用matchAll()配合g标志并过滤。
-
使用CSS计数器创建步骤进度条需三步：1.在父元素用counter-reset初始化计数器；2.在每个步骤元素上用counter-increment递增计数；3.通过::before伪元素的content:counter()显示序号，并结合Flexbox布局、伪元素连接线及类名控制完成/活跃状态样式，最后通过CSS变量和响应式设计优化可维护性与兼容性，该方法语义清晰、无需JavaScript、性能高效且易于维护。
-
浮动使页脚上移是因为浮动元素脱离文档流导致父容器高度塌陷，footer误判上方无内容而提前渲染；clear:both需作用于紧邻浮动后的块级元素才有效，伪元素clearfix更可靠，而Flex/Grid布局可彻底规避该问题。
-
实现响应式侧边栏菜单需通过CSS媒体查询和定位控制显示状态。1.HTML结构包含侧边栏与主内容区；2.移动端默认隐藏侧边栏（left:-250px），hover时滑出；3.屏幕≥768px时，侧边栏固定显示，position设为static；4.可选JS添加汉堡按钮控制显隐，提升交互体验。
-
滑动窗口限流不能直接用setTimeout模拟，因其执行时机不可控且无法感知请求真实完成时间；必须基于实际完成请求动态更新计数，推荐用performance.now()记录起止时间、数组+双指针维护窗口、AbortController实现熔断，并完全兼容fetch参数以支持重试与缓存。
-
required、type、pattern需组合使用且依赖submit触发：required仅校验空值（非格式），必须置于form内并用type="submit"按钮或回车提交；type="email"校验宽松，精准格式须用pattern；pattern不作用于number类型，且需配合title和setCustomValidity("")清空错误状态。
-
focus()不会自动滚动到可视区域，需手动调用scrollIntoView；应按tabindex或语义顺序聚焦首个非法项，跳过disabled/readonly元素；Vue中需nextTick后聚焦；移动端Safari要求focus必须在用户手势同步链内执行。
-
垂直轮播需JS驱动+克隆项兜底，核心解决循环断裂、悬停失灵、移动端错位；@keyframes须严格闭环计算，容器需overflow:hidden，子项高度须一致且显式声明。
-
懒加载能提升首屏速度，但仅适用于非首屏资源；对首屏主图误用会导致CLS或空白占位符。loading="lazy"最简但兼容性有限，IntersectionObserver更可控，关键资源应优先使用preload或fetchpriority。
-
conic-gradient画环形进度条的核心原理是以元素中心为原点、按角度顺时针旋转绘制颜色过渡，通过设定双色标同角度实现“硬切”进度弧，并配合border-radius:50%、固定宽高及遮罩/裁剪形成空心环状视觉。
