-
需遵循由浅入深的学习路径：一、分阶段夯实HTML/CSS/JS基础与HTML5新API；二、通过待办列表、Canvas画板等微型项目整合技能；三、参与开源或复刻经典界面提升工程素养；四、用Vite等工具实践构建流程；五、打造可展示的全栈作品集。
-
Proxy能全面监听对象操作，通过get、set、deleteProperty等陷阱捕获读取、赋值和删除行为，结合Reflect实现默认行为并确保this正确；利用递归与缓存机制可深度监听嵌套对象，动态属性与新增属性自动被拦截，无需额外处理，从而构建精确高效的响应式系统。
-
:focus-visible不能直接替代:focus，因其仅在键盘导航（如Tab）时触发，而:focus在鼠标、触摸、Tab时均触发；若替换会导致鼠标操作无焦点样式，影响可用性。
-
Setter不拦截网络请求，只拦截对象属性赋值；它在请求体解析为对象后、业务使用前校验字段，不处理HTTP层信息，需与拦截器等协同防御。
-
:focus-visible未生效主因是被后续同权:focus规则覆盖；应将其声明置于:focus之后，用:focus:not(:focus-visible)精准排除键盘用户，并确保outline不被粗暴设为none而影响可访问性。
-
频繁在循环中使用instanceof会因原型链/继承链遍历导致显著性能开销，10,000次循环×3类型判断×平均5层链长≈150,000次指针跳转；应改用字段标识、专用API或提前分类等更高效方式。
-
sticky定位失效时，首要排查父容器overflow属性；若祖先元素设overflow:hidden/auto/scroll，会截断粘性行为；需检查模态框、卡片等组件外层是否误加该样式，并可用clip-path替代。
-
导航菜单问题多因HTML结构不合规或CSS优先级冲突所致，需严格遵循框架的类名层级、父容器要求及显隐控制方式。
-
Cropper.js是证件照裁剪最优解，因其原生支持比例锁定、旋转缩放且纯前端处理保障隐私；手写Canvas易出坐标偏差、旋转偏移等问题；初始化需设准aspectRatio、viewMode、dragMode三参数；导出需双倍画布+scale提升DPI；自定义尺寸须重建实例而非仅调setAspectRatio。
-
Checkbox控制抽屉显隐更轻量，因无需事件监听、不触发重排、无运行时依赖，纯CSS通过:checked伪类联动实现；需input与抽屉同DOM上下文，用~或+选择器；推荐transform替代margin实现滑入；移动端须用label显式关联并保障点击区域；抽屉滚动需设overflow-y:auto、明确高度及-webkit-overflow-scrolling:touch。
-
aria-valuetext是aria-valuenow的补充性文本描述，用于提升无障碍体验。当数值本身不足以传达含义时，它提供更直观的文本解释。正确使用时需与aria-valuemin、aria-valuemax等属性配合，并保持与视觉状态一致。错误使用如冗余、误导、遗漏信息等会损害用户体验。适用场景包括滑块、进度条、评分组件、颜色选择器、数字输入框及复杂表单状态等。
-
能。sessionStorage在页面刷新后仍保留数据，只要不关闭浏览器标签页；应监听input事件实时存入，并在DOMContentLoaded时恢复草稿。
-
微任务不会直接阻塞渲染，但会延迟渲染时机。因为微任务在当前宏任务执行后、渲染前执行，若微任务队列过长或执行复杂计算，将占用主线程，推迟浏览器更新屏幕的机会，导致页面卡顿。事件循环中，主线程执行完同步代码后优先处理所有微任务，之后才进行渲染和执行下一个宏任务。若微任务链过长，会持续推迟渲染，造成视觉上的不流畅。优化方式包括：1.拆分任务，使用setTimeout或requestAnimationFrame分批执行；2.合理使用Promise，避免嵌套与同步计算；3.将耗时任务移至WebWorkers中执行，
-
闭包是内部函数捕获并持久化外部词法环境变量的机制，核心条件是内嵌函数且引用外部变量；常用于防抖节流、私有变量封装及ReactHook等场景，但需警惕大对象导致的内存泄漏。
-
ChromeDevTools断点调试最直接有效，需结合debugger语句、行号断点与条件断点；善用console.group、table、格式化及标签过滤；错误须用console.error输出完整对象；VSCode调试需正确配置sourceMaps和webRoot。
