-
构建基于全链路耗时打点的前端性能“漏斗模型”，核心不是单纯看页面加载快慢，而是把用户一次关键交互（比如点击下单、提交表单、播放视频）拆解成若干有先后依赖的技术环节，每个环节记录真实耗时与成功状态，从而定位“卡在哪一步”“为什么失败”。它和传统业务漏斗互补：业务漏斗告诉你“谁没走到最后”，性能漏斗告诉你“走到这步的人，为什么卡住或放弃”。明确关键交互路径与技术节点先锁定你要分析的用户动作，再逆向拆解其背后的技术链路。不能只写“下单成功”，要细化到可测量的原子事件：用户点击“立即购买”按钮（交互
-
HTML视频在后台暂停是浏览器主动限制策略，非bug；因隐私与性能考量，页面失焦时video.paused为true、currentTime冻结、音频静音，autoplay+muted仅解决首帧播放而非后台持续运行。
-
图片加载失败时alt文案不显示，通常不是alt写错，而是图片未用<img>标签、被CSS隐藏、或动态插入时src非法/为空导致浏览器未触发加载失败逻辑；alt必须存在于合法<img>中且非空（装饰图用alt=""），否则无法生效。
-
高阶Mixin本质是返回Mixin的Mixin，通过带括号调用实现嵌套混入配置与参数透传，专注组合逻辑而非直接输出样式，需显式传参、避免递归、慎用隐式作用域。
-
移动端横竖屏切换抖动源于视口重算、样式未同步与交互干扰叠加，需通过完善viewport设置、用matchMedia+requestAnimationFrame提前响应、重置弹性布局及禁用干扰交互样式来切断抖动链路。
-
Next.js13+app目录下CSS生效需严格遵循导入规则：仅app/layout.tsx中import'./globals.css'有效；非模块CSS不可在组件内导入；CSSModules必须用.module.css后缀并按对象使用；删除next.config.js中冗余css配置；Tailwind需配置content路径；禁用_customDocument，所有样式注入须通过layout顶层import实现。
-
cite属性与cite元素语义不同：前者是URL链接，仅用于blockquote、q等4个标签；后者仅包裹作品标题，不可含作者、年份或URL。需组合使用并辅以CSS增强可识别性。
-
多重box-shadow拖尾粒子通过同一元素多层偏移、透明度递减、模糊渐变实现，需统一偏移方向、控制模糊值防糊化，禁用drop-shadow因不支持多层独立配置，动画应预设状态并启用GPU加速。
-
overflow:auto通过触发BFC解决边框消失问题，但易引发滚动条、裁剪绝对定位元素等问题；推荐用display:flow-root或伪元素清除。
-
JavaScript继承基于[[Prototype]]链，class仅为语法糖；new操作自动设置实例的__proto__指向构造函数prototype；Object.create可手动模拟原型链，但需注意constructor修复与赋值行为。
-
Array.prototype.every()返回布尔值，天然适配“全通过才放行”的权限校验；支持短路求值、零额外开销、链式嵌套、否定校验，但需防范空数组误判及undefined异常。
-
JavaScript作用域分全局、函数和块级三种：全局作用域中var声明变量可提升且可重复，let/const不提升且不可重复；函数作用域内变量仅函数内有效，支持作用域链；块级作用域仅let/const生效，var无视{}。
-
HTML乱码主因是文件编码非UTF-8无BOM，其次为metacharset位置/写法错误、HTTP响应头覆盖及表单/AJAX传输未声明UTF-8。
-
Symbol.toPrimitive是JavaScript中用于自定义对象类型转换行为的内置symbol，其值为接收hint（"string"、"number"或"default"）参数的函数，优先于toString和valueOf被引擎调用以返回对应原始值。
-
IllegalOperationError:Channelclosed是因在已关闭的channel上调用方法所致；amqplib不自动重建，需监听channel.on('close')和channel.on('error')并手动重建，避免缓存失效channel引用。
