-
虚拟滚动处理树形菜单的核心是将树拍平为带层级信息的线性列表，保留展开状态与父子关系，实现高效渲染与交互。通过预处理生成含level、isExpanded等字段的扁平数组，增量更新索引，CSS缩进+状态驱动渲染，并支持键盘导航与滚动锚定，同时确保扁平化可逆以支撑搜索、拖拽等场景。
-
Grid更适合主容器布局，因其二维可控性强、无需脱离文档流、响应式健壮；float易致塌陷、清除困难、维护成本高，且无法精准控制区域宽高与对齐。
-
user-select:none能阻止移动端长按选中，因它跳过文本选择流程；但滥用会损害可访问性，仅适用于装饰性元素等非文本操作目标，且需配合-webkit-touch-callout:none并注意继承问题。
-
keydown事件无法直接绑定到非可聚焦元素（如普通div）上，因为浏览器只将键盘输入路由给当前获得焦点的元素；必须监听window或为元素添加tabindex才能接收键盘事件。
-
SourceMaps是混淆后精准定位原始代码的关键工具，通过.map文件将压缩代码映射回源码位置；需在构建工具中正确配置生成与加载，兼顾生产环境的安全与调试需求。
-
HTML5的<mark>标签无响应式属性，需用CSS实现：通过clamp()控制字号、em单位设置内边距、显式定义颜色、包裹容器扩展点击区域、调整line-height防裁切，并坚持语义化使用。
-
应区分HTML属性与DOM属性：getAttribute/setAttribute操作HTML属性（如data-、disabled字符串值），而value、checked等状态属性应直接读写DOM属性，class/style/data-推荐用classList/dataset/style.cssText。
-
JavaScript轮播图核心是用setInterval驱动切换并配合DOM与CSS过渡，需保存timerID以支持暂停/重启，推荐3000–5000ms间隔；通过currentIndex统一管理显隐或位移切换、用户交互及无缝循环逻辑。
-
用::before或::after替换原生单选按钮需两步：先设appearance:none清空默认样式并隐藏input（display:none），再用label::before绘制自定义圆圈；因input是替换元素，伪元素不生效，故推荐:checked+label::before方案，确保兼容性。
-
直接设tr或td的height不推荐，因其会强制截断内容、与line-height冲突导致垂直错位，且老版IE兼容性差；首选方案是用--table-cell-line-height变量配合line-height和vertical-align控制对齐。
-
window.getSelection()获取选区并验证有效性是实现网页内联评论的基础，需检查rangeCount、过滤空白文本、排除contenteditable等区域，再通过Range定位节点路径与偏移量锚定上下文，包裹高亮标记并绑定交互行为。
-
HTMLPWA对原生APP无技术要求，但三类场景易致误解：企业用WebView壳加载、绕过应用商店时遇iOS限制、需原生桥接调用受限API；WebView加载PWA需满足JS启用、ServiceWorker配置、manifest正确引入等硬性条件。
-
用::before或::after替换原生单选按钮需两步：先设appearance:none清空默认样式并隐藏input（display:none），再用label::before绘制自定义圆圈；因input是替换元素，伪元素不生效，故推荐:checked+label::before方案，确保兼容性。
-
flex:1更可靠，因其不依赖父容器显式高度，而是按剩余空间动态分配；height:100%则需整条祖先链均有明确高度，否则失效。
-
video默认display:inline导致右侧幽灵空白，根本解法是设display:block；flex中需加flex-shrink:0或flex:00auto；务必移除width/heightHTML属性，改用CSS的max-width:100%+height:auto。
