-
关键CSS是提取首屏必需样式，排除媒体查询、伪类等；推荐critters（构建时）、penthouse（服务端）或cheerio（静态HTML），正则匹配不可靠。
-
关键在于状态与DOM严格同步：初始化用JSON.parse(localStorage.getItem('todos')||'[]')避免null报错，增删改后立即JSON.stringify存入localStorage；用data-id而非索引映射数据与DOM，checkbox通过.checked属性双向绑定，渲染时显式设置checked值，change事件中更新数据并持久化。
-
grid-template是CSSGrid布局的核心复合属性，它通过一行代码同时定义网格的行、列结构和命名区域。1.使用时需先设置容器为display:grid或inline-grid；2.它是grid-template-rows、grid-template-columns和grid-template-areas的简写形式；3.语法上，/前定义行结构与区域名称，/后定义列结构；4.支持fr单位实现弹性空间分配，minmax()函数设定轨道尺寸范围，从而提升响应式设计能力；5.可结合媒体查询实现不同屏幕尺寸
-
现代浏览器自定义滚动条需分WebKit（Chrome/Edge/Safari）和Firefox两套方案：前者用::-webkit-scrollbar伪元素，仅对overflow溢出的块级容器生效；后者用scrollbar-width和scrollbar-color，且color仅在width为auto或thin时生效。
-
移动端垂直布局应使用flex容器+column方向+flex-grow实现弹性拉伸，而非height:100vh；因100vh在iOSSafari等浏览器中会包含地址栏高度且软键盘弹出时不重算，导致截断或错位。
-
event.persisted===true是页面状态需抢救的唯一可信信号；它在pagehide中标识bfcache或冻结，pageshow中需校验该值及localStorage存在性才恢复，且仅同步可序列化字段。
-
ShadowDOM是WebComponents的核心技术，用于实现DOM封装与样式隔离。通过attachShadow()方法可在元素内部创建独立的DOM环境，其结构和样式对外不可见且互不影响。支持open和closed两种模式，分别控制外部是否可访问ShadowRoot。具备样式隔离、结构隐藏和事件重定向特性，确保组件内聚性。利用:host和::slotted()可实现宿主与插槽的样式控制，CSS变量支持穿透传递。广泛应用于自定义UI组件、第三方嵌入工具及设计系统中，结合CustomElements构建高
-
Vue组件中emit不捕获原生DOM事件，子组件需监听DOM事件后调用emit抛出语义化业务事件；父组件应监听业务事件而非DOM事件，避免传递原生event对象、滥用.native修饰符，并采用kebab-case命名。
-
role属性是显式覆盖元素默认语义的开关，仅在无障碍树中生效；必须用于动态渲染、旧浏览器兜底、非标准容器及按钮化非按钮元素等场景，禁用与原生语义冲突的混用。
-
clear属性不能清除浮动本身，而是让当前元素避开前面浮动元素的干扰区域，强制下移至浮动元素下方以恢复布局流；它只对块级元素生效，且必须写在浮动元素之后的兄弟元素上。
-
z-index不生效主因是父元素创建了独立堆叠上下文，使子元素z-index仅在内部生效；需检查opacity<1、transform非none等触发属性，并提升父容器z-index或用Portal脱离上下文。
-
HTML5不支持直接设置边框实线，需用CSS的border属性实现；最简写法为border:2pxsolid#333；自适应靠rem、vw或容器响应式控制；移动端失效主因是缺失viewport、Retina屏1px发虚或overflow截断。
-
HTML中应优先用CSS（margin、padding、gap）实现视觉留白，仅当空格属内容本身（如“100px”）时才用 实体；全角空格和普通空格不可靠，响应式异常实为字体、换行或布局容器所致。
-
原生语义标签比ARIA更可靠；<divrole="button">缺乏键盘支持和表单行为，应优先用<button>；有可见文本用aria-labelledby，纯图标用aria-label；aria-live="polite"用于状态提示，assertive用于关键错误；FontAwesome装饰性图标自动aria-hidden="true"，功能性图标需显式声明语义。
-
JavaScript通过事件循环实现异步并发，利用WebWorkers进行多线程计算，避免主线程阻塞，结合rAF、IntersectionObserver、requestIdleCallback等技术优化渲染性能，提升页面响应性。
