-
HTML返回顶部功能失效主因是scrollTo或锚点跳转未触发平滑滚动、目标元素不可见或ID缺失；需确保scroll-behavior:smooth声明、目标元素有可见id且位于body开头、事件在DOM挂载后绑定。
-
真正可持续的分离是HTML只管结构、CSS只管表现、JS只管行为，三者物理隔离；style标签和内联style属性虽非错误，但会严重削弱维护性、缓存效率与协作效率，仅允许极少量关键首屏CSS内嵌且须显式声明media属性。
-
通过设置:hover伪类和transition属性可提升按钮交互效果。1.为按钮悬停状态设置更明显的背景色与文字色对比；2.添加transition使颜色变化平滑；3.结合边框、阴影和缩放增强反馈，确保视觉差异清晰且过渡自然，提升用户体验。
-
JavaScript模块加载器本质是解决浏览器端无法原生按需、异步、有依赖地加载代码的问题；require.js作为AMD代表填补了ES6前的空白，而ES6模块是语言级标准，已被现代浏览器和Node.js原生支持，静态分析、实时绑定、动态import等特性使其取代require.js成为主流。
-
Webpack是一个静态模块打包器，从入口文件递归解析import/require等模块依赖，输出浏览器可运行的bundle；需通过loader（如css-loader、style-loader）和plugin扩展能力，不直接编译或压缩资源。
-
CSSStyleSheet构造函数是用于创建可复用样式表对象的API，但截至2024年底仍属实验性功能，仅Chromium系浏览器在开启实验标志后部分支持，Safari和Firefox完全不支持，直接调用newCSSStyleSheet()会抛出TypeError，生产环境应使用style元素的sheet属性安全获取真实CSSStyleSheet实例。
-
onkeydown是在用户按下任意物理按键的瞬间触发的事件，此时input.value尚未更新，也不等输入法上屏，因此不适合做内容校验或字数统计，而适合拦截功能键。
-
top:50%移动的是元素左上角到父容器垂直中线，导致整体偏下；需配合left:50%和transform:translate(-50%,-50%)才真正居中，且父容器须设position:relative。
-
预渲染需服务端生成含真实数据的HTML或构建时静态生成，而非linkpreload；验证标准是HTML响应体直接包含真实内容而非空容器。
-
Tailwind阴影不明显主因是预设值在特定上下文（如白底卡片）中对比度不足；应优先调整透明度而非仅增大模糊值，配合深色模式适配、移动端限制模糊半径、正确使用@layerutilities及DevTools验证渲染。
-
IntersectionObserver实现懒加载与无限滚动的核心是提前适量加载：图片通过rootMargin预留缓冲区预加载，无限滚动用sentinel元素在临界点触发；需合理配置阈值、及时销毁监听、降级兼容并协调二者触发时机。
-
使用::placeholder伪元素可自定义输入框占位符样式，支持color、font-size、opacity等属性，需添加-webkit-、-moz-、-ms-前缀以兼容旧浏览器，可针对input、textarea等元素单独设置样式，提升界面美观与用户体验。
-
scroll-behavior:smooth不能直接实现全屏切屏，因为它仅平滑锚点跳转和scrollTo，不接管滚动事件、不强制对齐section边界、不阻止中间停顿；真正可行的是scroll-snap-type+smooth声明式方案，辅以JS处理兼容性与手动控制。
-
核心是通过抽象接口、运行时注入和工厂模式实现跨平台：定义Toast/Storage/Router等平台无关接口，各平台提供具体实现并由工厂注册，启动时注入全局上下文，组件无感调用，支持动态切换与灰度验证。
-
响应式卡片页应使用max-width+padding居中容器，grid布局配auto-fill与minmax实现自适应列数，卡片内用flex-column+flex-shrink/flex:1统一高度，hover需will-change和精准transition优化性能。
