-
应内联关键CSS并异步加载非关键CSS：用critical或critters提取首屏必需样式（≤14KB），通过rel="preload"onload注入非关键CSS，禁用预处理器抽象和低效选择器，避免弱网检测延迟。
-
CSS变量不能在@keyframes中直接动画化，因其不参与级联；需绑定到可动画的原生属性（如transform），或用--progress+calc()/hsl()间接实现颜色过渡，且变量与动画目标须同元素或动态更新。
-
在移动端浏览器中，MediaTrackConstraints.aspectRatio常被忽略或不生效，因其仅为建议性约束；实际需结合width/height范围限定、设备方向适配及结果校验，才能可靠实现目标宽高比（如9:16竖屏）。
-
<canvas>不适合做布局容器，因其是替换元素、无DOM子树、不参与文档流、无法用CSS布局或选择内部内容，仅能通过JavaScript绘图并手动实现交互逻辑。
-
需声明transition:transform0.2sease才能触发缩放动画；:active仅瞬态生效，无法保持缩放状态，持久化需JS切换class；移动端需cursor:pointer或touchstart激活。
-
合理断点应基于内容溢出位置而非固定设备尺寸，优先使用min-width递进覆盖，控制在3–4个关键值（如480px、768px、1024px），避免max-width与min-width边界不齐导致的响应间隙。
-
掌握排查思路与工具是快速定位修复HTML错误的关键，首先检查语法和标签闭合，确保结构正确；接着利用浏览器开发者工具实时调试，通过Elements面板查看DOM结构、右键检查元素定位问题；结合W3C验证工具检测标准合规性，发现隐藏错误；最后借助Console和Network面板排除脚本干扰与资源加载失败等问题。养成边写边查习惯，可高效解决90%以上问题。
-
推荐按像素值或语义分层命名如rounded-sm（2px）、rounded-md（4px）、rounded-lg（8px）、rounded-full（50%）；单个class即可统一四角，无需拆分；常见不圆原因包括缺少overflow:hidden、被重置样式覆盖、UA默认样式干扰或Safari渲染异常；响应式推荐用clamp()动态计算圆角。
-
前端日志系统需采集错误、行为、性能和自定义日志，通过全局监听与手动触发结合，结构化存储并批量上报，利用sendBeacon保障可靠性，避免重复与敏感信息泄露。
-
-webkit-text-stroke是唯一被主流浏览器支持的文字描边方式，因原生text-stroke未标准化且未被任何引擎实现；Chrome、Edge、Safari支持该前缀属性，Firefox完全不支持，需搭配-webkit-text-fill-color:transparent使用，参数为widthcolor且顺序不可颠倒。
-
navigator.connection.effectiveType提供基于RTT和吞吐量的网速类型（slow-2g/2g/3g/4g），需HTTPS/localhost环境且兼容性有限，应配合onchange监听与class切换实现资源分级加载。
-
Wasm负责计算密集型任务，JavaScript处理DOM和异步逻辑，通过TypedArray共享内存、预分配内存、避免频繁序列化优化数据交互，结合WebWorker提升性能，实现接近原生的执行效率。
-
能，box-shadow通过逗号分隔多组阴影模拟四边不同颜色：上边0-2px4px-2px#f00、右边2px04px-2px#00f、下边02px4px-2px#0f0、左边-2px04px-2px#ff0；负spread-radius（如-2px）可收紧阴影、避免混色与溢出，提升边界清晰度。
-
应使用本地HTTP服务器（如LiveServer或http-server）而非双击打开HTML文件，因file://协议会因安全限制导致fetch、JSON加载、模块导入等功能失效，而http://localhost可正常执行所有WebAPI。
-
box-shadow中直接使用rgba()颜色值（如rgba(0,0,0,0.3)）即可控制阴影透明度，无需wrapper或opacity；alpha范围为0–1，语法错误、父级opacity、过小模糊值、CSS优先级或Safariinset兼容性可能导致失效；多层阴影用逗号分隔，filter:drop-shadow()可避免transform缩放影响但不支持inset。
