-
Block通过编译期静态分析识别动态节点并打patchFlag，运行时借助openBlock/createBlock协同维护blockStack与currentBlock，将所有动态子代（含后代）扁平化收集至dynamicChildren数组，更新时仅遍历该数组实现精准patch，跳过全部静态节点。
-
:empty仅匹配DOM中无任何子节点（含文本节点）的元素，换行、空格、注释均使其失效；它探测结构为空而非视觉为空，适用兜底样式或隐藏真正空容器，但不支持替换元素、contenteditable元素及:blank伪类。
-
HTML不是编程语言，它没有逻辑、不处理数据、也不控制流程，仅定义网页结构和内容语义；必须以<!DOCTYPEhtml>和<html>开头确保浏览器正确解析，标签使用需遵循语义规则。
-
@layer优先级由源码中声明顺序决定，第三方样式未包装则落入隐式顶层并高于所有显式层；必须用@importurl()layer()显式导入框架到指定层，且@layer声明须在顶层、不可嵌套。
-
content-visibility:auto适用于跳过离屏渲染但保留占位与无障碍，IntersectionObserver专用于触发非渲染副作用；二者分工明确，混用需避免破坏缓存与高度失真。
-
SCSS的nth()和append()函数需严格遵循编译期语义：nth()索引从1开始且不支持负数，越界即报错；append()默认空格分隔，逗号需显式声明comma，多值拼接优先用join()并预检长度。
-
[class~="item"]能匹配class="itemlist"但不匹配class="item-list"，因它按ASCII空格分词后全词严格匹配，连字符非分隔符；仅class、rel、lang等规范定义的多值属性支持~=，data-等需用=/^=/|=替代。
-
caption-side:bottom有时无效，主因是caption未作为table的第一个子元素、旧版IE及PDF生成器兼容性差、CSS权重或继承干扰导致标题未被正确识别或错位。
-
优化Canvas动画性能需减少重绘区域，使用ctx.clearRect(x,y,width,height)仅清除变化部分，避免全屏清空，降低绘制开销。
-
Object.getPrototypeOf可绕过被篡改的constructor，沿原型链查找首个非Object.prototype的原型并读取其constructor，从而识别混淆后的原始构造函数；结合toStringTag、function.name和原型链指纹可批量检测伪造继承与类型伪装。
-
Map.prototype.set()返回undefined，故原生不支持链式调用；需继承Map并重写set等方法使其返回this，再扩展状态机语义如transition、exec，结合WeakMap可实现实例级隔离的状态映射。
-
用display:grid实现九宫格更高效稳定，核心是grid-template-columns:repeat(3,1fr)定义三等分列，配合gap控制间距、aspect-ratio保持正方形、justify-items/align-items统一居中，避免Flex的margin计算与换行问题。
-
auto-fill在小屏下多出空白列，本质是按minmax()最小值硬算轨道数并保留所有空轨道；而auto-fit会收缩空轨道使内容撑满容器，更适合响应式卡片布局。
-
ShadowDOM通过创建独立的DOM子树实现组件样式封装，解决了全局CSS带来的命名冲突和样式污染问题。其核心机制是为宿主元素创建ShadowRoot，形成隔离的渲染作用域，内部样式仅作用于该子树。1.它防止样式泄露与渗透，确保组件外观稳定；2.提供两种模式：open（便于调试）与closed（更强封装性但调试困难）；3.注意继承属性穿透、变量可共享、伪元素定制等特性；4.虽非完美，但为组件化开发提供了原生可靠的样式管理方案。
-
Flexbox是现代导航菜单布局的首选方案，因其通过display:flex;等简洁属性实现元素的水平/垂直排列、对齐（justify-content、align-items）、空间分配及响应式换行（flex-wrap），大幅简化了传统浮动或inline-block带来的复杂性。结合gap设置间距、媒体查询适配移动端，并利用flex-direction切换方向，可轻松构建响应式导航；面对文本溢出、多行对齐、旧浏览器兼容等问题，可通过text-overflow省略、内部嵌套Flex容器、Autoprefix
