-
必须监听"first-input"类型，因为只有它能准确提供首个用户输入事件的startTime与processingStart之差即FID值；监听"event"无法识别首次输入且无处理延迟数据，"navigation"则完全无关。
-
background-origin对background-color无效，仅作用于background-image（含渐变）；其三个值border-box、padding-box（默认）、content-box分别以边框外缘、内边距内缘、内容区左上角为定位原点。
-
coords必须按图片原始尺寸手动填写像素值，shape类型决定格式：rect需4个整数（x1,y1,x2,y2），circle需3个（cx,cy,r），poly需偶数个顶点坐标；所有值以naturalWidth/naturalHeight为基准，不随CSS缩放变化。
-
PSD转HTML5有四种方法：一、Photoshop切片导出旧版HTML，兼容性差；二、用Avocode等插件智能生成语义化代码；三、通过PSD2HTML等在线平台云端转换；四、手动切图+手写HTML5/CSS3，最规范可控。
-
Flex子项默认min-width:auto导致overflow失效，因其强制子项不小于内容宽度；解决方法是显式设置min-width:0，配合flex收缩属性、overflow:hidden及text-overflow:ellipsis等生效。
-
overflow:hidden直接裁剪溢出内容且不提供滚动，适用于明确设计意图的截断场景；overflow:auto仅在内容溢出时显示滚动条，更克制，适合内容长度不确定的区域。
-
支持，但需起始和结束状态均显式声明确定的颜色值（如HEX/RGB/HSL），避免transparent、inherit或简写background覆盖导致插值失败；transition须写在初始状态规则中，时长200–400ms，推荐cubic-bezier(0.25,0.46,0.45,0.94)。
-
用background-image实现标准CSS渐变按钮需显式使用linear-gradient()，配合background-size和background-position实现平滑悬停过渡；注意兼容性前缀、移动端touch-action设置及:active反馈。
-
新版Chrome/Edge限制file://协议跨文件加载，需用HTTP服务（如LiveServer）运行；音视频问题需启用硬件加速及解码器；Canvas/WebGL异常应检查GPU加速与扩展冲突；fetch等API需安全上下文，建议本地开发使用localhost。
-
直接代理window或globalThis大概率失败，因其全局API多为不可配置、不可写的内置方法，且Proxy仅支持对象目标，而window在iframe等环境中可能非标准对象；应改为精准劫持fetch、XMLHttpRequest.prototype.send等函数入口，并逐个重定义console方法。
-
border-image不显示渐变的主因是默认border-width为0且border-style为none，需显式设置border-width和非none样式；渐变须用linear-gradient内联书写；border-image-slice应设为1fill以避免拉伸变形；Safari等浏览器存在兼容性问题。
-
用WeakRef实现图像纹理LRU缓存的关键是弱持有+强管理：WeakValueDictionary存WeakRef、双向链表维护访问序、FinalizationRegistry在对象回收时同步清理元数据，三者协同缺一不可。
-
max-width比width更适合响应式容器，因其允许窄屏收缩、宽屏限幅，配合margin:0auto实现居中；min-width防止中等屏幕下内容过挤，需与max-width合理组合并依设计断点设定。
-
role属性是显式覆盖元素默认语义的开关，仅在无障碍树中生效；必须用于动态渲染、旧浏览器兜底、非标准容器及按钮化非按钮元素等场景，禁用与原生语义冲突的混用。
-
grid-column-gap控制列间水平间距，row-gap控制行间垂直间距；前者作用于列轴，后者作用于行轴，两者均推荐用column-gap和row-gap替代以提升跨布局通用性。
