-
requestAnimationFrame更适合动画因其与屏幕刷新率同步、自动暂停省电、需配合时间戳防速度不均；CSStransition适合简单属性变化，而requestAnimationFrame适合复杂交互控制。
-
遮罩层必须用position:fixed或absolute；推荐fixed配100vw/100vh，避免滚动露底；z-index失效需检查祖先transform/will-change创建的层叠上下文；关闭弹窗应监听遮罩click并判断e.target===this；移动端需加touch-action:none提升触摸体验。
-
HTML5的inputtype="month"提供原生年月选择功能，格式为“YYYY-MM”，支持设置初始值、JavaScript动态赋值与创建，需兼容旧浏览器并注意表单提交时后端按字符串解析。
-
a:hover伪类用于定义鼠标悬停时链接的样式，通过设置颜色、下划线、背景色等属性提升交互体验，结合transition和transform可实现平滑动画效果，同时需注意a:link、a:visited、a:active和:focus的LVHA顺序以确保样式优先级正确，避免特异性冲突、性能损耗和无障碍问题，推荐使用transform和opacity优化动画性能，并保持效果简洁自然，以提升用户体验且符合可访问性标准。
-
事件委托的核心原理是利用事件冒泡机制，将事件监听器绑定在父元素上，通过event.target.closest()和matches()精确识别目标元素，避免为动态元素重复绑定，但不适用于focus/blur等不冒泡事件。
-
通过Flexbox布局，将容器设为display:flex并配合justify-content:center与margin-left:auto，可实现左侧导航栏绝对水平居中、右侧图标紧贴其右且不破坏居中效果。
-
Flexbox通过flex-grow、flex-shrink和flex-basis控制子元素伸缩行为，实现响应式布局：flex:1常用于均分空间，结合媒体查询可调整不同屏幕下的布局表现，如等宽分布、固定与自适应组合、移动端堆叠等；需注意父容器设display:flex，避免width与flex-basis冲突，并用min-width防止内容重叠，提升布局灵活性。
-
JSON操作核心是JSON.parse()和JSON.stringify()，需防范非字符串输入、BOM字符、循环引用、特殊值丢失等问题，replacer/reviver是安全扩展点，严格遵循JSON规范（双引号、无尾逗号）。
-
使用CSStransition实现响应式动画需优先选择transform和opacity等高性能属性，避免布局重排；结合媒体查询控制断点动画，合理设置过渡时间与缓动函数，并通过JavaScript类名切换替代:hover以提升移动端兼容性。
-
作用域链是JavaScript中变量查找时从当前执行上下文向上逐级回溯的动态引用链，由函数定义时的词法位置决定，而非调用位置；查找时沿[[Environment]]单向线性进行，找到即止，不跨层或跨兄弟作用域。
-
TreeShaking是基于ES6模块静态分析的未使用代码移除机制，需满足使用import/export、工具正确配置、无副作用干扰等前提，并通过具名导出、按需引入等方式优化代码写法以提升效果。
-
Array.prototype.flat()是现代环境首选，支持深度控制和空位处理；旧环境可用reduce+concat手写递归实现，需用Array.isArray安全判断；慎用JSON黑魔法，应明确数据建模。
-
NotificationAPI本身不支持加密，因其仅接收明文参数并在系统层直接渲染；保护通知内容需服务端过滤、前端运行时解密（如WebCryptoAES-GCM）及配套HTTPS、权限控制等措施。
-
typeof判断基础类型（含function、symbol），instanceof判断引用类型是否由某构造函数创建；二者解决不同层面问题，混用易致误判。
-
JavaScript的try...catch仅捕获同步执行异常，不处理异步错误、语法错误、资源加载失败及Promise拒绝；需在调用处包裹且await异步操作，catch参数应命名避免覆盖Error，finally中避免return或throw。
