-
状态机通过定义状态、事件和转移规则来管理对象行为变化。在JavaScript中可用对象实现，如电灯开关有'off'和'on'状态，响应'push'事件切换；进一步可封装为工厂函数createStateMachine，支持初始化、转移和回调，用于订单流程等场景；还可扩展钩子函数onEnter/onExit，实现登录流程中的提示与副作用处理，提升可维护性与扩展性。
-
浮动导致父容器高度塌陷，使背景图视觉错位；需用clearfix清除浮动、设background-origin为content-box或padding-box并配box-sizing:border-box。
-
SVG图标颜色应使用currentColor实现自动继承父元素color值，需内联SVG并设置fill="currentColor"，配合CSS类、自定义属性及prefers-color-scheme可统一控制、适配主题与深色模式。
-
现代浏览器对相同URL的CSS文件有强缓存机制，只要Cache-Control或ETag配置合理，重复引入不会触发多次HTTP请求；但URL需完全一致，且CSS规则重复声明会因源顺序导致后引入者覆盖先引入者。
-
最推荐使用CSS的text-decoration属性为HTML文本添加下划线，因为它遵循结构与样式分离的原则，提供更强的语义化、灵活性和可维护性，而<u>标签仅应在表示非文本注释（如拼写错误）时考虑使用，且CSS还支持overline、line-through等其他文本装饰及颜色、样式、粗细等精细化控制，因此现代Web开发中应优先采用CSS方案以提升可访问性与设计自由度。
-
Next.jsSSR优化需从渲染路径、资源加载、缓存与构建入手。1.减少阻塞：避免同步数据请求，用Promise.all并行获取，非首屏数据延迟加载，启用React18流式渲染提升首屏速度。2.结合SSG与ISR：静态页面预渲染+CDN缓存，动态内容用增量再生，减少服务器压力。3.压缩与分割：开启Brotli压缩，动态导入组件，优化Webpack配置缩小包体积。4.精细化缓存：CDN缓存HTML，服务端缓存数据（如Redis），静态资源带哈希长期缓存。通过合理组合这些策略，持续优化“更快首屏、更少请求、更
-
GeolocationAPI可通过navigator.geolocation获取用户位置，需HTTPS环境和用户授权；调用getCurrentPosition()获取当前位置，coords提供经纬度及精度等信息，accuracy值越小越精确；使用watchPosition()持续监听位置变化并可配置高精度、超时等参数，通过clearWatch()停止监听；应妥善处理权限请求与误差提示，保障用户隐私与使用体验。
-
可采用forEach、for、for...of、map、while五种原生JavaScript方法遍历数组；forEach执行回调无返回值，for灵活可控，for...of语法简洁，map生成新数组，while适合动态条件。
-
使用::first-letter和::first-line可实现首字下沉与首行加粗效果，通过字体、颜色、浮动等样式提升段落可读性与视觉层次，需注意仅用于块级元素且避免inherit，现代浏览器广泛支持双冒号语法。
-
JavaScript事件内存泄漏本质是闭包引用未释放：监听器未解绑或函数引用不一致导致DOM节点及关联数据无法回收，AbortController可统一管理生命周期。
-
三星旧机型（Android4.4以下）需动态注入target-densitydpi=device-dpi且width=640的viewport，rem布局应延时设置font-size并用screen.width×dpr计算，SPen需同时监听touchstart和click，canvas与图片须按dpr缩放适配。
-
在JavaScript中获取数组除第一个元素外的所有元素，最常用的方法是使用slice(1)，它返回从索引1开始到末尾的新数组，不改变原数组；2.另一种方法是利用ES6的数组解构赋值，通过const[,...rest]=array语法跳过第一个元素并将其余元素收集到新数组中；3.两种方法均不会修改原数组，符合函数式编程原则，且在空数组或单元素数组等边界情况下表现良好，slice(1)和解构中的rest均会返回空数组，确保逻辑稳定；4.选择哪种方式取决于具体需求：若只需“尾部”且不关心“头部”，slice(
-
1.实现视差滚动的核心方法是使用CSS的background-attachment:fixed属性，通过将背景图固定在视口上，而内容正常滚动，形成视觉深度感。2.具体步骤包括：为容器设置背景图并应用background-attachment:fixed、background-size:cover和background-position:center以确保适配性。3.该方法存在局限，如不支持多层不同速度滚动、移动端兼容性问题、图片加载性能影响以及可能引发用户不适。4.优化措施包括图片压缩与格式选择、使用媒体
-
ES6模块是静态解析的，import/export必须在顶层作用域，支持Tree-shaking；CommonJS是运行时执行，require可动态加载但不支持Tree-shaking；两者默认导出机制不同，互操作需注意default包装；Node.js中需通过文件后缀或type字段区分模块类型。
-
边框遮挡背景图的解决方法是设置background-clip:padding-box，使背景仅绘制在内边距区域而不覆盖边框；建议同步设置background-origin:padding-box以确保定位准确，两者配合使用逻辑一致且兼容性良好。
