-
侧边栏折叠时文字消失但图标保留的常见实现方式是用overflow:hidden、max-width:0和opacity:0组合控制文字可见性，配合transition实现平滑动画，并通过.sidebar-collapsed类和matchMedia精准切换状态，兼顾可访问性与响应式体验。
-
JavaScript路由通过监听URL变化动态切换视图而不刷新页面，核心是pushState/replaceState修改地址栏+popstate/hashchange监听导航，Hash模式兼容性好，HTML5模式需服务端fallback配置。
-
WebPushpayload必须使用AES-128-GCM加密，由客户端提供的auth和p256dh派生密钥，浏览器强制要求content-encoding、encryption、crypto-key三头部齐全且格式正确，否则推送失败。
-
CanvasRenderingContext2D实现像素级绘制需四步：适配设备像素比、全量或脏矩形清除、确保资源加载完成、用requestAnimationFrame驱动动画，缺一不可。
-
尾调用优化（TCO）是复用栈帧避免栈溢出的机制，但主流浏览器默认未启用；尾调用指函数末尾直接返回另一函数调用结果，无后续操作。
-
navigator.storage.estimate()是现代浏览器提供的异步API，用于估算当前源的存储已用空间（usage）和配额上限（quota），返回Promise，结果为{usage,quota}对象，二者均为动态估算值，不可精确计算剩余空间。
-
scroll-snap-stop:always仅Safari≥15.4在触控板/触摸屏滑动时真正生效；Chrome/Edge≤120、Firefox全系静默忽略；旧版浏览器直接丢弃该属性，需结合@supports和JS校准实现兼容。
-
ARIA属性必须在HTML原生语义无法表达组件行为或状态时精准补位；如自定义下拉需role="listbox"+aria-expanded+aria-activedescendant，模态框需role="dialog"+aria-modal="true"+aria-labelledby，动态内容区用aria-live="polite"，且须JS同步更新状态。
-
JavaScript事件委托是将子元素事件绑定到父元素，利用事件冒泡和event.target识别目标，可减少监听器数量、节省内存、支持动态元素、降低DOM访问开销、简化逻辑维护。
-
结论：别用calc()+float封装三栏布局Mixin——兼容性假象大，维护成本真高，现代项目里纯属倒退。因calc()在旧版Safari等浏览器中存在解析异常，float布局本身已过时，且现代项目应优先采用Flexbox或Grid。
-
Symbol属性不可枚举，需Object.getOwnPropertySymbols()获取；作为原型属性时既隐式又可被继承访问，适合定义唯一协议方法（如serializable），避免命名冲突，支持跨模块共享、自动委托、运行时检测及多协议组合。
-
<p>JavaScript本身不支持注解语法，但可通过JSDoc注释为变量添加类型和说明，如/*@type{string}/constuserName="Alice";，配合工具实现类似功能。</p>
-
grid-auto-flow:column实现的是列优先填充而非单行横排，需配合grid-auto-columns、overflow-x和尺寸约束才能实现可滚动水平列表。
-
clamp()三个参数需验证生效区间：最小值16px在375px屏下对应2.5vw=9.375px＜16px，故取16px；最大值24px在960px屏下2.5vw=24px，超此宽度即锁死24px；真正线性缩放仅发生在约640px–960px之间。
-
JavaScript语音识别主要依靠WebSpeechAPI的SpeechRecognition接口，需检测兼容性、处理权限与事件，适合网页实时转文字；不支持Safari，复杂需求需接入云服务或WebAssembly模型。
