-
ServiceWorker是运行在浏览器后台的独立脚本，可拦截请求、缓存资源、实现离线访问和消息推送，是PWA的核心；需HTTPS（localhost除外）、同源注册、无DOM访问权限，通过postMessage与页面通信。
-
微博H5页面不提供头像上传功能，仅支持查看、点赞等轻交互；头像修改须通过官方App或PC网页版完成，且需满足200px最小边长、1080×1080推荐尺寸、JPEG/PNG/GIF格式及4MB大小限制。
-
JavaScript同步循环会阻塞浏览器渲染，导致进度条无法及时刷新；本文介绍使用async/await+自定义sleep函数将密集计算“切片”执行，让出主线程控制权，实现平滑、可响应的UI更新。
-
本文详解为何直接JSON.stringify()无法上传文件，以及如何使用FormData构建符合multipart/form-data规范的请求，确保头像、姓名、邮箱三者均能成功更新。
-
flex-grow本身无法直接被transition动画化，因其数值变化不触发连续视觉属性改变。需通过width、transform等可动画属性间接实现过渡效果。设置display:flex的容器中，子元素应避免固定宽度，配合transition:width0.3sease等属性，当flex-grow改变（如通过class切换）时，浏览器重新计算布局，视觉上呈现平滑伸缩动画。推荐使用JavaScript或hover等交互触发class变化，以驱动状态转换。注意避免频繁重排，优先用transform提升性能
-
JavaScript解构赋值是ES6引入的按模式从数组或对象提取值并赋给变量的语法，核心为简洁与清晰：数组按位置、对象按属性名匹配，支持默认值、重命名、嵌套及剩余运算符。
-
应使用PostCSS解析AST提取颜色声明并统计频次，合并语义相同颜色、保留状态色差异，通过语义化变量安全替换，避免误伤非样式内容，并兼顾兼容性与压缩收益。
-
浏览器渲染HTML元素与执行<script>中的alert()并非按源码顺序“逐行渲染”，而是受解析、执行、渲染三阶段异步机制影响：alert()作为原生API会立即阻塞UI，导致DOM渲染滞后。
-
HTML5使用<img>标签嵌入图片，需设src和alt属性；支持srcset/sizes实现响应式；可用<figure><figcaption>增强语义；loading="lazy"实现懒加载；onerror处理图片缺失。
-
当使用display:inline-block布局图文并排内容时，图片尺寸变化会意外推动相邻元素下移——根本原因在于inline-block元素默认按基线（baseline）对齐，而非顶部对齐。
-
编写可测试的JavaScript代码需在设计时注重高内聚、低耦合。1.优先使用纯函数处理逻辑，将副作用操作隔离；2.避免全局状态，通过参数注入依赖如时间或随机值；3.采用依赖注入解耦服务，便于模拟API等外部依赖；4.模块化拆分职责单一的函数和模块，提升测试专注度；5.异步代码应返回Promise并支持可控延迟，方便测试跳过时间依赖；6.使用Jest等现代测试工具，结合mock和jsdom模拟环境。核心是确保代码行为可预测、依赖可替换、逻辑可分割，从而实现高效可靠的单元测试。
-
Foundation是需主动约束的复杂定制工具集，并非更适专业开发；其xy-grid需手动启用并配置断点缩放，Orbit依赖严格加载顺序，颜色系统需同步重定义$foundation-palette才生效。
-
CSS不支持完整正则表达式，但提供类正则属性选择器实现模式匹配：如[attr^="value"]、[attr$="value"]、[attr*="value"]等，用于开头、结尾、包含等场景；因性能与维护考虑，完整正则未被纳入标准，复杂需求可由JavaScript替代，结合属性选择器可高效满足多数样式控制场景。
-
应在主CSS入口文件中，于@tailwindbase之后、@tailwindcomponents之前用@layerbase写全局Reset；禁用preflight后需手动补box-sizing和表单重置；避免@apply在base中使用响应式/状态类，推荐直接写CSS声明。
-
AdobeXD导出的CSS代码不准确，主要表现为布局僵化、单位混用、类名无语义、样式冗余等问题；其根源在于工具无法理解组件化与响应式逻辑；解决方法是在设计阶段采用组件化思维、规范图层命名、统一设计资产；导出后需通过预处理器重构、提取变量、合并样式，并结合现代CSS框架与代码工具进行优化；最终依赖开发者对语义化与响应式的深入理解完成人工重构。
