-
z-index没效果最常见原因是父容器创建了层叠上下文，导致子元素z-index只在该上下文中生效；它仅对position为relative、absolute、fixed或sticky的元素有效，且比较基于层叠上下文而非全局数值。
-
CSS属性选择器通过[属性="值"]语法精确匹配元素，如input[type="submit"]；还可使用~=、|=、^=、$=、*=实现包含、前缀、后缀、子串等匹配方式，用于文件类型图标、数据属性等场景。
-
beforeUnmount是Vue3组件卸载前最后一个可操作DOM和访问实例的时机，适合清理定时器、事件监听、第三方插件资源等，此时DOM存在、实例可用，但不可修改响应式状态。
-
当使用opacity:0隐藏<inputtype="file">时，其原生焦点环不可见；可通过:focus-within伪类在父容器上添加自定义焦点样式，实现无障碍友好的视觉反馈。当使用`opacity:0`隐藏``时，其原生焦点环不可见；可通过`:focus-within`伪类在父容器上添加自定义焦点样式，实现无障碍友好的视觉反馈。在构建可访问的头像上传组件时，常将<inputtype="file"&g
-
现代浏览器强制阻止HTTPS页面加载HTTP资源，称混合内容：主动型（脚本/iframe等）直接拦截，被动型（图片/视频等）Chrome94+/Firefox100+也默认阻止；CSP无法绕过，修复须改用HTTPS或协议相对路径，第三方不支持HTTPS时需代理。
-
优化懒加载白屏的核心是让白屏“不可见”或“可接受”，关键靠骨架屏过渡、轻量动效、预加载策略及明确的错误反馈。
-
PKCE是移动端/SPA中替代client_secret的唯一合规方案，需用加密安全随机源生成43–128字符的code_verifier，经SHA-256哈希和Base64URL编码得code_challenge，授权请求带code_challenge与S256方法，换token时原样提交code_verifier。
-
懒加载是按需触发资源请求，非渲染完统一加载；loading="lazy"有兼容性差、无法监听状态等缺陷，推荐用IntersectionObserver实现，需注意保存引用、设置rootMargin、加载后取消观察及错误处理。
-
纯前端即可实现实时BMI计算：监听input事件，用parseFloat清洗输入，按中国标准分类并toFixed(1)显示，校验非正数防止NaN，textContent更新结果。
-
推荐使用EventSource（SSE）或WebSocket实现实时物流消息推送，禁用轮询；优先选EventSource（轻量、兼容好、单向），需后端支持text/event-stream；WebSocket适用于需双向通信的场景。
-
Object.assign仅浅拷贝，多级对象会覆盖而非递归合并；需手写deepAssign实现深层合并，注意过滤null、数组、日期及__proto__等危险键；现代环境可用structuredClone+递归提升安全性。
-
shape-outside仅作用于已浮动的块级替换元素，必须同时满足float显式声明、尺寸固定、CORS合法三条件；否则浏览器忽略该声明。
-
用IntersectionObserver实现滚动触发动画时间线最稳定：设threshold为[0,0.1]提前触发，配合transition而非animation实现进退双向动画，用data-position替代nth-child避免布局错位，移动端加rootMargin适配Safari惯性。
-
JavaScript性能优化核心是减少主线程负担、降低资源加载压力、提升执行效率，关键策略包括代码压缩（用Terser等工具精简语法、TreeShaking、图片字体优化）和懒加载（路由级、组件级、图片、第三方SDK按需加载），辅以减少长任务、避免强制同步布局、缓存计算结果及使用现代API。
-
canvas.toDataURL()导出失败主因是跨域污染，即drawImage跨域图片后canvas被标记为污染状态，导致返回空白或黑图；需用HTTP服务、设置crossOrigin且服务器支持CORS，同时注意DPR适配、格式兼容及Blob内存管理。
