-
CacheAPI是现代缓存管理的核心，取代已废弃的AppCache，结合ServiceWorker实现离线访问与动态缓存。通过install事件预缓存资源、activate事件清理旧缓存、fetch事件实现网络优先策略，并采用版本化缓存名称确保更新。最佳实践包括使用内容哈希命名静态资源、合理设置动态内容缓存策略、借助DevTools调试及处理CORS限制，以平衡性能与数据新鲜度。
-
应避免循环中反复查询DOM，优先用document.querySelectorAll批量获取后处理；遍历子节点时用children而非childNodes；事件委托推荐用closest+matches。
-
Flexbox通过flex-wrap:wrap配合子项width或flex-basis控制列数，而非容器设列；推荐用flex:00+calc()和gap实现响应式布局，避免flex:1和margin混用。
-
ESM模块语法需用import语句、带.js后缀、区分default与named导出；不可混用CommonJS；import.meta.url替代__dirname；循环引用导致未初始化变量为undefined。
-
答案：CSS中position属性的常见取值有static、relative、absolute、fixed和sticky。relative元素相对于原位置偏移但仍占据原始空间，不脱离文档流，常作为绝对定位子元素的参考；absolute元素脱离文档流，相对于最近的已定位祖先元素定位，用于弹窗或下拉菜单等场景；fixed元素相对于视口固定，不随滚动移动，适用于导航栏等常显组件；sticky元素在滚动到特定阈值时由相对定位转为固定定位，常用于表头或侧边栏锚定效果。掌握各定位方式的参考系及是否脱离文档流是构建复杂
-
减少回溯：避免嵌套量词如(a+)+，改用\d+等简洁模式；2.预编译正则：将RegExp实例提取到循环外；3.优化匹配逻辑：用具体字符范围替代.*以提升效率。
-
移动端导航栏文字换行需同时设置white-space:nowrap防止单项内折行，及flex-wrap:wrap允许容器内菜单项自动换行，二者缺一不可；辅以min-width、gap和flex-shrink:0等细节优化体验。
-
HTML5通过FileAPI和FormData实现文件上传，首先利用input选择文件，再用FileReader读取并预览图片，接着将文件添加到FormData对象中，最后通过XMLHttpRequest发送请求，支持进度监控与多字段提交，实现高效前端文件操作。
-
JavaScript表单验证应“提前拦截+清晰反馈”，邮箱验证需避免简单正则，推荐/^1+@2+.3+$/并限制长度。\s@↩\s@↩\s@↩
-
Proxy是JavaScript用于拦截并自定义对象基本操作的原生API，通过handler拦截get/set等行为，配合Reflect提供标准化底层操作，实现响应式数据劫持；但仅代理第一层，需手动递归处理嵌套对象。
-
迭代器是JavaScript中统一的遍历接口，要求对象实现[Symbol.iterator]方法并返回含next()的对象，next()返回{value,done}；自定义对象可通过实现该方法或使用生成器函数（yield）变为可迭代。
-
HTML5中唯一可靠支持的字符编码是UTF-8；非UTF-8编码需用<metacharset>声明且限前1024字节，但浏览器已基本不支持GBK等旧编码，混用会导致乱码或解析错误。
-
margin:auto用于块级元素水平居中，需设置宽度且左右外边距为auto；position结合transform可实现绝对居中，不依赖尺寸；两者结合可用于绝对定位容器内的完全居中，通过四向偏移0与margin:auto触发浏览器自动计算。
-
border-radius不支持直接transition，应改用四个独立半径属性（如border-top-left-radius）并统一单位；响应式场景可用CSS自定义属性+calc()配合transition；避免同时修改layout属性或未启用硬件加速导致卡顿。
-
CSS变量实现配色方案实时切换最灵活可维护，核心是将颜色定义为语义化变量（如--color-primary），通过JS动态修改:root下的值，所有引用自动更新，支持预设主题、localStorage持久化及开发者工具即时调试。
