-
HTML本身不参与SourceMap配置，因其无编译转换过程；真正需配置的是构建工具（如Vite、Webpack）对JS/CSS生成的SourceMap，HTML仅作为资源容器被动引用。
-
直接让对象实现handleEvent方法可省去removeEventListener时重复传函数引用的麻烦；用class封装支持状态共享与复用，配合AbortController.signal能自动批量清理监听器。
-
transition-behavior:allow-discrete是transition简写的第五个参数，用于在Chrome117+中启用display等离散属性的“50%翻转式”伪过渡，需显式声明属性、含display:none且不兼容Firefox/Safari。
-
小项目用根目录+css/js/images/pages四文件夹，够用零配置；中大型项目必须分src/dist，否则路径混乱、协作困难。小项目指单人维护、页面≤5个、无构建需求的静态站，核心是路径稳定、一眼可定位：index.html放根目录，css/只放main.css和reset.css，js/仅存main.js和utils.js，images/按icons/banner分但不超过两层，多页面统一放pages/about.html等。
-
place-items:center是专用于Grid容器的居中简写，等价于justify-items:center和align-items:center，仅在display:grid下可靠生效；失效主因包括父容器未设grid、子元素绝对定位或容器高度塌陷。
-
真正符合Promises/A+规范的Promise必须严格遵循四条铁律：三态单向流转（pending→fulfilled/rejected不可逆）、微任务调度（queueMicrotask优先）、then返回新实例、错误穿透（try/catch+reject传递）。
-
仅当确定几秒内必从某第三方域名加载关键资源时才加rel="preconnect"，如首屏所需的Google字体、CDN的CSS/JS或强依赖的API；同源、HTTP域名及旧版Safari不适用。
-
使用transform+translate更流畅，因为其通过GPU加速将元素提升至独立图层，避免触发重排与重绘。正确做法是用translateX/Y替代left/top/margin，配合transition实现平滑动画，并可辅以will-change和合理缓动曲线优化性能。
-
表单重置不能仅依赖<inputtype="reset">，因其只恢复HTML初始属性值；需用defaultValue/defaultChecked等设置JS动态默认值，或手动实现重置逻辑。
-
长列表滚动中节点复用不当易致OOM，关键在守住三道防线：视图生命周期可控、数据绑定轻量、资源加载受控；须确保ViewHolder完全复用、图片加载带尺寸约束与内存复用、及时切断强引用链，并辅以监控兜底。
-
HTML5<video>标签无法提升硬件解码能力，仅触发浏览器调用底层解码器；硬解依赖浏览器内核、系统驱动与硬件协同，需用MediaCapabilities.decodingInfo()实测而非canPlayType()判断。
-
WeakRef不能直接构成LRU缓存，必须手动维护元数据结构实现访问排序、容量控制和淘汰逻辑；@lru_cache使用强引用且不支持弱引用清理，WeakValueDictionary无访问顺序，真正可行的是Map+WeakRef+FinalizationRegistry协同方案。
-
EyeDropperAPI必须由用户手势（如click）直接同步调用，返回Promise：成功时resolve{sRGBHex}，取消时rejectAbortError；仅Chromium111+支持，需检测存在性并降级。
-
优先用XLSX.writeFile或加BOM头的Blob导出CSV，避免手动拼接导致中文乱码、错列等问题；关键点包括添加\uFEFFBOM头、正确转义双引号、过滤隐藏行列、处理iOS降级等。
-
Tailwind4.0+原生支持bg-[url(...)]任意值语法，无需配置即可添加背景图，但路径须相对于CSS入口文件，需注意编码、引号及配套bg-cover/bg-center等修饰类。
