-
必须用<article>包裹商品卡片，因其语义表征独立可复用内容单元；标题用<h3>，价格用<strong>或带aria-label的<span>，图片必设alt，规格参数用<dl>，交互按钮用<buttontype="button">，图片懒加载统一加loading="lazy"。
-
使用@keyframes定义0%→359deg旋转动画，配合animation:spin1slinearinfinite、will-change:transform及rem尺寸，确保移动端平滑无限加载。
-
纯函数的核心特征是相同输入永远返回相同输出且无副作用。它只依赖参数、不读取修改外部状态，如add=(a,b)=>a+b；避免Date.now()、++count、arr.push等破坏确定性或产生副作用的操作。
-
for循环比forEach和map快，因其是原生语句、无函数调用开销、可缓存长度、支持break/continue；而forEach/map有回调开销、闭包、上下文绑定及新数组分配等成本。
-
z-index在媒体查询中不起作用的直接原因是它只对定位元素生效，若未同时设置position（如relative），则被忽略；需检查层叠上下文、合理使用display/visibility控制显隐，并注意移动端兼容性问题。
-
HTML5不支持嵌套表单，因规范禁止form嵌套，浏览器会自动修复DOM导致外层闭合；应使用novalidate、formnovalidate、动态属性控制或JavaScript自定义验证实现分层校验需求。
-
仅靠:target可实现点击弹出层，但需满足硬性前提：弹出层元素必须有唯一id，链接href必须为#id格式；浏览器通过URL哈希变化触发匹配，而非监听点击事件。
-
前端路由通过Hash或History模式实现SPA页面切换。Hash模式兼容性好但URL不美观；History模式URL简洁利于SEO，但需服务器配置支持。
-
应优先使用onMounted进行挂载后初始化，watchEffect适用于依赖响应式数据且需在数据就绪或变化时立即执行的初始化场景，二者职责不同、可共存。
-
掌握DevTools高级功能可显著提升前端调试效率。1.断点调试支持行断点、条件断点、DOM断点和事件监听断点，精准定位代码执行问题。2.Performance面板分析长任务、重排重绘及JS执行热点，结合UserTimingAPI识别性能瓶颈。3.Memory面板通过堆快照和内存分配时间线排查内存泄漏，查找未释放引用或detachedDOMtrees。4.Network面板支持禁用缓存、网络限速、XHR/fetch断点及请求拦截，模拟真实场景并调试异步逻辑。熟练运用这些功能可大幅提升开发效率。
-
customRef更适合防抖是因为它能手动控制track和trigger时机：输入时只track不trigger，防抖结束才trigger更新，避免中间值触发响应式副作用。
-
button标签比input按钮更推荐，因为它支持嵌套图片、图标和富文本内容，提供更强的样式灵活性、更好的可访问性和语义化，适用于现代网页中复杂UI和无障碍需求，而input按钮仅能显示纯文本且样式控制受限，因此在绝大多数场景下应优先选择button标签。
-
闭包是函数与其词法环境的组合，天然支持数据隐藏和完整性校验；通过封装私有状态、内聚校验逻辑、配合WeakMap模拟私有字段，提升前端代码健壮性与意图清晰度。
-
移动端:active触发时机因浏览器而异：Chrome在touchstart后立即触发，Safari等待touchend且禁止滚动/缩放，Firefox更保守；依赖它做核心交互不可靠，应改用JavaScript手动控制.is-pressed类。
-
五角星需用canvas通过极坐标转直角坐标计算5个顶点，按0→2→4→1→3→0顺序连线；先设中心(cx,cy)和半径r，角度从-π/2开始，用cos/sin算坐标，再moveTo+lineTo绘制并stroke/fill。
