-
必须用Mixin而非重复手写flex属性组合，因其能杜绝拼写错误、集中响应式逻辑、支持参数化复用；:extend()仅适用于无参静态结构共享。
-
直接改--bs-gutter-x或--bs-gutter-y最轻量推荐，因不依赖Sass编译；不能直接改.row的margin或.col的padding，否则破坏负边距与正内边距配对机制，导致内容偏移、换行错乱。
-
JavaScript引擎不对reduce做循环展开优化，因其是封装在引擎内部的原生高阶函数调用；性能关键在于回调内联性、数组结构、类型稳定性及必要时改用for循环。
-
text-transform:uppercase仅改变英文字符的视觉渲染为大写，不修改DOM原始值，对中文、数字、标点无效；适用于p、div、span等文本元素，禁用于input/textarea等需数据一致性的场景。
-
内联缓存（IC）是V8自动启用的优化机制，其效率取决于对象结构稳定性和访问模式一致性；通过预热典型对象、固定属性顺序、避免动态修改和禁用with/eval/Proxy等陷阱，可使IC快速进入高效单态；用--trace-ic和%DebugPrint可验证状态。
-
::marker{color:red}未生效，是因为部分旧版浏览器（如旧Safari/Firefox）对::marker支持有限，且::marker不继承li的color，但可能受ol的color影响；需显式为li::marker设置color并隔离文字色，兼容性差时应降级使用list-style-type:none+counter()模拟。
-
indexOf在document.body.innerHTML中搜不到中文或换行，是因为浏览器已将原始HTML解析并规范化：换行符被压缩为空格、连续空白合并、中文可能被转义为中文，且标签自动闭合，导致字符串与渲染内容不一致。
-
align-items-stretch在.row上无效是因为Bootstrap4的.row默认display:block，非Flex容器；需手动加d-flex类或升级至Bootstrap5并确保display未被覆盖。
-
Flex居中失效主因是html/body未设height:100%，需全局重置；推荐用gridplace-items:center替代flex，更稳定；模态框须避免absolute/fixed定位及bodyoverflow:hidden陷阱。
-
JavaScript迭代器是按需返回值的统一遍历机制，for...of依赖Symbol.iterator方法；该方法须返回含next()的对象，next()返回{value,done}；普通对象需手动实现Symbol.iterator才能被for...of遍历。
-
:active伪类用于定义元素被激活时的样式。当用户点击并按住按钮或链接时，触发该状态，常用于改变背景色或文字颜色以增强交互反馈。例如按钮点击时背景变深，松开即恢复；链接可设置点击瞬间变为红色。此效果仅在按下时生效，释放后消失，适合提供瞬时视觉响应。需注意其短暂性，不适用于持久状态切换，应配合JavaScript实现选中等长期效果。在移动端可能响应迟缓，建议结合:hover或触摸事件优化。同时要确保与:focus、:hover等状态协调，避免样式冲突。合理运用:active能有效提升界面响应感和用户体验。
-
访问父路由页面空白是因为未配置默认子路由，应在children中添加path:''的子路由并redirect至首个子页面，如{path:'',redirect:'overview'}，同时确保父组件含<router-view>。
-
to.matched数组是实现动态面包屑的首选方式，因其天然反映路由嵌套层级、支持刷新和直接访问、可配合meta过滤与权限控制，并能处理参数化路由和动态标题。
-
defer属性仅对外部脚本（含src属性）生效，执行于DOM构建完成之后、DOMContentLoaded事件触发之前，且按HTML顺序依次执行。
-
HTML文档必须严格遵循5个核心标签的顺序：<!DOCTYPEhtml>、<htmllang>、<head>（含<metacharset>在<title>前）、<body>；缺一不可，否则导致解析异常、SEO失败或无障碍访问失效。
