-
关键不是压低CSS体积，而是减少浏览器“找元素”耗时；后代选择器（如tabletrtd.cell-value）从右向左匹配，数据量大时回溯深、耗时非线性增长，2000行表格中stylerecalc可高达8–12ms，改用平级类名可降至0.3ms。
-
本文讲解如何正确使用AngularMaterial的MatExpansionPanel组件实现展开/折叠状态的响应式控制，重点解决仅用单向绑定[expanded]无法动态更新面板状态的问题，并说明为何必须改用双向绑定[(expanded)]。
-
Canvas文字不显示主因是fillStyle或font未设置；fillText和strokeText需手动配齐样式，y为基线位置，textBaseline默认alphabetic易致裁剪，中文字体须显式声明，WebFont需等待加载完成。
-
最可靠的方式是直接在回调外保存requestAnimationFrame返回的ID。ID是取消动画的唯一凭证，需显式存储以支持暂停、恢复等帧控操作；多个动画须各自持有独立ID，避免误杀；推荐用变量显式管理，闭包仅在多实例隔离时必要。
-
Flex布局结合transition可实现流畅UI动画，通过justify-content、align-items与transition协同控制对齐与动效，如hover时居中滑动或卡片伸缩，需注意属性可动画化、浏览器支持及使用will-change优化性能。
-
HTML原生不支持onclack等自定义事件属性，必须用CustomEvent创建、dispatchEvent触发、addEventListener监听；detail字段传结构化数据，bubbles和cancelable控制冒泡与取消；事件名须全小写连字符。
-
<p>计算属性不能直接传参，因其依赖响应式缓存机制；可通过返回函数利用闭包捕获最新响应式数据，实现带参调用，如computed(()=>(x)=>x*count.value)，注意避免修改源数据和闭包变量共享问题。</p>
-
使用相对单位和媒体查询实现按钮响应式，通过rem、em、%或vw设置尺寸，并结合@media调整不同屏幕下的字体与间距，确保适配各类设备。
-
navigator.locks不能用于同步权限，仅限同源标签页互斥；必须将资格判断、资源获取与使用全链路纳入锁中，锁名须与资源粒度严格对齐且URL-safe，mode和ifAvailable需显式设置，回调须返回Promise，锁内逻辑须轻量原子，Safari不支持需降级，服务端幂等是底线。
-
要解决placeholder文字颜色被覆盖问题，需用更具体选择器（如.form-control::placeholder）提升权重，并补充浏览器前缀及显式设置opacity:1和font-size等属性。
-
justify-content只对flex容器生效，必须在父元素设置display:flex；子元素不能直接设该属性；需配合align-items实现垂直居中，且父容器需有明确高度；IE兼容可降级为text-align:center+inline-block。
-
HTML无相对颜色语法，CSS中通过currentColor继承父元素color值、hsl()手动调lightness、CSS变量配合calc()实现近似相对控制。
-
Vue3Diff算法采用分层策略：先双端比对复用首尾相同节点；再批量处理新增/删除；最后用key映射+LIS优化乱序移动，将时间复杂度降至O(nlogn)。
-
getBoundingClientRect()返回元素在视口中的实际像素占据量（含transform、高DPI小数等），包含content+padding+border，不含margin；而style.width或getComputedStyle().width仅反映CSS声明值，不体现最终渲染结果。
-
最干净的现代解法是aspect-ratio:1/1，需确保浏览器支持且不与height同时声明；它原生约束内容盒宽高比，比paddinghack更直观可靠。
