-
最轻量可控的动态换肤方案是用CSS自定义属性配合JS切换document.documentElement的class；主题变量统一定义在:root，各皮肤通过.theme-dark等class覆盖；优先用classList切换class而非style.setProperty；localStorage持久化需在DOM加载早期执行以防闪屏；IE不支持则降级为class方案或特性检测。
-
根本原因是编码不一致：CSS文件为UTF-8（无BOM）而HTML未声明charset，或服务器响应头charset与文件编码不符；需统一为UTF-8并确保meta、HTTP头、构建工具读取均正确。
-
最直接方案是父容器设display:flex，图片设display:block和max-width:100%防基线留白与宽高比崩坏，并用gap控制间距、flex-wrap:wrap防溢出。
-
用margin控制段落上下间距最可靠，因其直接修改浏览器默认的margin-top和margin-bottom，通用性强、不影响行高与字体渲染，且可单独设置；line-height仅影响段内行距，gap适用于Flex/Grid容器但不兼容IE，而<br>或空<p>则破坏语义且不可控。
-
ServiceWorker是运行在浏览器后台的独立JavaScript线程，作为事件驱动的代理层拦截并响应网络请求，需HTTPS注册、生命周期由浏览器控制；注册后需两次刷新才能完全激活，配合cacheAPI与fetch事件实现离线能力，缓存更新需手动清理旧版本。
-
Vue2中watch默认监听不到数组索引赋值（如arr[0]=newValue）和修改length的变化，因Object.defineProperty无法拦截；响应式操作有push、pop、shift、unshift、splice、sort、reverse；非响应式操作包括索引赋值、length修改及直接替换引用（除非deep:true）。
-
dataset通过element.dataset.userId取值，自动转换连字符为驼峰，但不处理下划线；兼容性上IE11+支持，动态key或含下划线时需用getAttribute；其值恒为字符串，需手动类型转换，SSR或框架中推荐getAttribute以确保可靠性。
-
index.html是前端文件，但非“运行时前端”，因其仅为静态HTML文本，由浏览器直接解析渲染，不执行服务端逻辑；仅当使用Thymeleaf等模板引擎或SSR框架时，才被后端动态干预。
-
闭包是JavaScript中函数与其词法作用域的组合，内部函数能持续访问外部函数变量，因作用域链在创建时固化且变量不被回收。
-
inset-inline-start是逻辑定位属性，值取决于direction和writing-mode：LTR下等价left，RTL下等价right；仅对absolute/fixed元素生效，不可与left/right混用，需配合inset-block-start等使用，依赖父元素direction，非body或系统设置。
-
动态import()返回Promise，实现运行时异步加载模块，区别于静态import的预加载；当执行到import('./module.js')时才发起请求，结合Webpack或Vite可自动代码分割，生成独立chunk，用于路由级分割、功能懒加载或条件加载，首屏仅加载核心代码，降低初始体积，提升性能，且支持浏览器缓存复用。
-
prefers-color-scheme是纯CSS媒体查询，用于检测系统主题偏好，仅支持light、dark、no-preference三值，需用@media(prefers-color-scheme:dark)语法，不响应运行时切换但现代浏览器支持动态重绘。
-
用:not(.target)最安全，但括号内仅限单个简单选择器；语法错误（如:not(.a.b)）会导致整条规则被浏览器丢弃；排除多个类需链式写:not():not()，且:not()仅作用于目标元素自身，不涉及祖先或后代。
-
:invalid抖动动画需确保输入框参与原生验证（如加required），配合animation-fill-mode:both和animation:none重置，兼容Safari及移动端，并响应prefers-reduced-motion降级为静态提示。
-
使用border-radius:50%可将正方形图片变为圆形头像，需设置等宽高、用object-fit或background-size优化显示效果，并注意图片比例与分辨率。
