-
减小JavaScript包体积可提升加载速度与用户体验，核心方法包括精简代码、按需加载和优化传输。首先检查依赖，移除未使用包，选用轻量库如dayjs替代moment.js，并利用TreeShaking只引入必要代码。其次通过动态import实现路由级懒加载，将第三方库单独分包，结合splitChunks提取公共模块以提升缓存利用率。构建时启用Terser压缩代码，支持Gzip或Brotli压缩可减少60%以上体积，使用source-map-explorer分析大文件模块。现代工具链如Vite提升构建效率，
-
fr是CSSGrid的分数单位，表示剩余可用空间的一份，不同于固定像素（px）和相对父容器的百分比（%），仅在grid-template-columns/rows中生效，且受内容尺寸、minmax()等限制影响。
-
Flex布局实现按钮组对齐需设容器display:flex，用justify-content控制主轴分布（如center、flex-end等），推荐用gap代替margin，配合align-items可垂直居中。
-
应保留原生checkbox/radio元素，用CSS视觉隐藏（如opacity:0+absolute定位）而非display:none；通过label包裹或for属性关联自定义外观；确保键盘聚焦、Space切换、屏幕阅读器正确播报状态。
-
JavaScript事件监听器不手动移除几乎必然导致内存泄漏，尤其在单页应用中；闭包引用使DOM节点和JS对象无法被GC回收；推荐用AbortController.signal自动解绑，手动移除需确保函数引用一致。
-
transition不生效的根本原因是width无明确初始值或transition未写在非:hover规则中；须设width:0、overflow:hidden、transition在常态下声明，并避免display切换及IE11兼容问题。
-
:last-child选中父容器最后一个直接子元素且匹配选择器，非同类元素末项；应优先用相邻兄弟选择器控制间距，注意Flex/Grid布局和display:contents对伪类的影响。
-
padding百分比基于父容器宽度，所有方向的padding百分比均以包含块的宽度为基准计算，避免与高度相关的循环依赖问题，常用于响应式等比例布局设计。
-
absolute子项在flex容器中不认top/left，是因为flex容器默认position:static，absolute需最近已定位祖先作为参考系；必须显式设position:relative等才能使其以flex容器为定位上下文。
-
Vue单文件组件中<style>默认全局生效，需加scoped属性实现局部作用域；::v-deep()可穿透一级子组件样式，多<style>标签可混用但行为不同，lang属性和原子化CSS工具会影响其行为。
-
flex-direction决定主轴方向并影响对齐属性作用轴，row为默认水平左→右，row-reverse、column、column-reverse分别反转或垂直排列；flex-wrap控制换行，nowrap强制单行，wrap/wrap-reverse允许折行且justify-content仅作用于当前行；align-content用于多行在交叉轴的对齐；order按数值升序调整渲染顺序但不改变DOM结构及无障碍访问；flex-flow是direction与wrap的简写，建议初学者显式声明以避免调试
-
多行文字省略号不能只用text-overflow:ellipsis，因其仅支持单行且需white-space:nowrap和overflow:hidden，会阻止换行；多行截断应使用display:-webkit-box、-webkit-box-orient:vertical和-webkit-line-clamp组合方案。
-
ref适用于基础类型和模板解构，reactive专用于对象/数组；toRefs解构保持响应性，readonly创建只读代理，shallow系列减少深度监听开销；computed声明派生状态，watch响应明确来源，watchEffect自动追踪依赖；markRaw避免对第三方实例响应式污染。
-
使用outline而非border可避免布局变化，结合CSS动画实现无干扰的视觉反馈。通过@keyframes控制outline-width、offset和opacity，创建按钮悬停脉冲与输入框焦点高亮动画，提升键盘导航体验与可访问性。需注意旧浏览器兼容性、避免过度闪烁，并确保颜色对比度达标，以兼顾性能与用户体验。
-
absolute元素的top:10%相对于其最近的非static定位祖先（position为relative/absolute/fixed）的contentbox+padding高度（clientHeight），若无此类祖先则相对于初始包含块（如body或视口）；该参照物必须有可计算高度，否则百分比归零。
