-
生成器通过yield和next()实现异步流程控制，其核心在于1.使用function*定义生成器函数；2.在函数内部用yield暂停执行并产出Promise；3.通过外部执行器捕获Promise结果并用next()传回生成器恢复执行；4.以线性方式处理异步操作从而避免回调地狱。生成器结合Promise为async/await奠定基础，但实际应用中需依赖执行器、调试复杂且普及度不如async/await，因此已被更简洁的async/await取代。
-
SourceMap是前端调试的基石，它将压缩混淆后的代码映射回原始源码，使开发者能在浏览器中直接调试TypeScript或ES6+代码；通过构建工具生成，支持错误堆栈还原，提升生产环境bug定位效率；需注意生产环境安全，避免源码泄露，常用hidden-source-map并配合Sentry等平台使用；在多框架多语言项目中需确保映射链完整，防止因配置不当导致调试失效。
-
掌握CSS工具需理解辅助类机制，配置模板路径避免动态拼接类名，使用safelist注册运行时类；通过主题、插件、变体定制样式，启用purge优化体积，结合@apply和组件抽象提升可维护性。
-
伪元素必须设置非空content属性才能渲染并触发动画；动画属性需直接作用于伪元素自身；需配合display和定位控制尺寸与上下文。
-
HMR通过WebSocket实现模块热更新，WebpackDevServer提供实时通信与内存编译，浏览器端runtime接收变更后局部替换模块，依赖accept回调控制更新边界，否则整页刷新。
-
选错transition-timing-function会导致颜色过渡生硬，因默认ease在明度/色相大跨度时易出现中间突变；推荐用自定义cubic-bezier(0.4,0.1,0.3,1)或@property实现HSL插值，并配合硬件加速优化渲染。
-
图文环绕错位的主因是浮动未清除或方向不当，解决需用clear属性（如clear:both）、触发BFC（如overflow:hidden）或改用grid/flex布局。
-
重排比重绘更昂贵，因重排需重新计算几何属性并影响渲染树；重绘仅更新像素颜色等不改变布局的样式；强制同步布局和频繁DOM操作是主要性能瓶颈。
-
普通函数直接调用时，this指向全局对象（非严格模式）或undefined（严格模式），与“调用者”无关；箭头函数不绑定this，继承外层词法作用域的this值；call、apply立即执行并指定this，bind返回预设this的新函数。
-
::before和::after仅用于在元素内容前后插入装饰性、非语义的生成内容，必须配合content属性（如""、"→"、url()或attr()）才能生效；适用于轻量装饰与视觉反馈，不可替代真实DOM节点。
-
AudioContext创建失败主因是未在用户交互后调用resume()，初始状态为"suspended"；须在点击等事件中调用resume()并检查state为"running"，复用实例、避免重复创建。
-
align-items:baseline可使flex子项按文本基线对齐，适用于标题与副标题、标签与数值等场景。通过将不同字号或行高的文字沿基线对齐，避免视觉参差，提升排版协调性。使用时需确保子项包含文本内容，纯图标建议包裹文字或添加伪元素提供基线参考，且仅在flex-direction:row时生效，跨字体可能需微调。
-
Promise.all的核心优势在于并行执行多个独立异步任务，显著提升效率；1.它允许同时触发多个Promise，总耗时取决于最慢任务；2.结果按输入顺序返回，确保数据一致性；3.适用于无依赖的数据聚合场景，如页面初始化加载用户信息、订单和通知；4.支持批量操作，如文件上传和数据迁移；5.可通过包装Promise或使用Promise.allSettled管理错误，获取所有结果状态；6.可结合Promise.race设置超时机制，避免无限等待。
-
ServiceWorker是运行在浏览器后台、独立于主线程的JavaScript脚本，用于拦截请求、管理缓存、推送通知并实现离线体验；它不是普通页面脚本（无法操作DOM），也不是服务器端Node.js服务。
-
Intl是JavaScript国际化的事实标准，负责日期、数字、货币、排序等本地化格式，不处理文案翻译；需显式创建实例并传入标准locale和options，避免toLocaleString()的系统依赖问题。
