-
使用transform:translate结合CSS动画是实现高性能位移的首选方案，因其不触发重排重绘，仅由GPU处理合成层变化，确保动画流畅。通过transition可实现简单状态过渡，如悬停位移；而@keyframes适合复杂多阶段动画，如滑入、弹跳效果。相比top/left等属性，translate不影响文档流，性能更优。实际使用中需注意transform-origin对复合变换的影响，避免堆叠上下文错乱，并留意子像素渲染可能导致的模糊问题。同时，应合理搭配position定位，保持动画元素数量适中
-
浏览器开发者工具是可交互的调试环境，核心在于理解断点、作用域和调用栈如何协同定位问题：debugger依赖执行路径，行断点更稳定；console.log易受闭包影响，断点下Console查值更准；Network需看Response而非仅Headers；移动端调试需正确配置USB调试或SafariWebInspector。
-
应缓存数组长度避免重复计算：for(leti=0,len=arr.length;i<len;i++)，防止每次迭代重新读取arr.length造成性能开销。
-
现代浏览器默认禁止有声视频自动播放，需静音或用户交互后触发；preload应设为metadata；视频编码需用H.264Baseline/Main、Level≤3.1、GOP1–2秒，MP4格式优先。
-
最稳妥的HTML版权声明写法是用全局<footer>包裹<p>，年份动态生成，©用©实体，多语言页需匹配lang属性并分版本书写。
-
<p>在tailwind.config.js中添加自定义颜色需写入theme.extend.colors下，如'brand-red':'#e53e3e'；若需色阶变体，必须定义为对象并指定'50'、'100'等字符串键；覆盖theme.colors.gray会影响所有gray-类，建议新增命名避免破坏；暗色模式需手动定义或配合CSS变量实现。</p>
-
本文介绍如何通过Chrome的远程调试功能，在Windows电脑上实时调试Android手机浏览器中运行的触摸屏（TouchScreen）事件代码，无需物理触控设备，也无需依赖手机端DevTools。
-
表格CSS选择器需谨慎使用：应为表格添加唯一class限定作用域，优先用tbodytr而非tr，:nth-of-type()比:nth-child()更可靠，tr:hovertd实现整行悬停，旧IE需JS或服务端兼容方案。
-
负margin易导致错位，因其侵占相邻元素空间却不改变文档流位置基准，引发父容器塌陷、兄弟元素错位、响应式异常及可访问性问题；推荐用transform或Flexbox/Grid替代。
-
async/await是Promise的语法封装，不改变异步本质但降低回调嵌套与错误处理复杂度；async函数必返回Promise，抛错即Promise.reject()；await仅限async函数内使用，循环串行需用for...of，并发用Promise.all，错误须显式try/catch。
-
:active伪类主要用于元素被激活时的状态变化。1)它适用于任何可点击元素，如按钮和链接。2):active的优先级需在:hover和:focus之后定义。3)可与transform属性结合，增强交互效果。4)移动设备上需用JavaScript模拟:active状态。5)使用时应注意性能优化和样式一致性，以提升用户体验。
-
Flex布局通过align-items:stretch默认拉伸子项实现等高，但换行后失效；Grid用grid-auto-rows:1fr更可控；内容截断需line-clamp统一，min-height应按最小信息量设定，图片用aspect-ratio保障比例。
-
本文提供一种无需JavaScript的纯CSS解决方案：通过引入包裹容器并调整定位与布局模型，使动态宽度的固定侧边导航栏与主内容自动协同响应，彻底避免小屏幕下的重叠问题。
-
按钮动画闪烁可通过will-change配合transform/opacity属性优化：仅在动画前动态启用will-change:transform，动画后设为auto，并用transform替代left/top等触发布局的属性，避免长期开启。
-
推荐用[class^="icon-"]精确匹配以"icon-"开头的class属性值，但需注意它匹配整个class字符串开头；更稳妥的是添加统一前缀如btn-icon，再用.btn-icon.icon-search等组合选择器。
