前端开发

关注按钮的核心是管理“已关注”与“未关注”状态，应使用`data-following`属性作为状态信标。交互流程需遵循“先请求，后响应，再更新UI”的原则，并以服务端返回数据为准进行状态更新。同时需注意错误处理、防重复点击、无障碍访问与视觉反馈，确保体验可靠一致。

HTML布局的核心是CSS控制，而非标签堆砌。语义化标签仅提供结构意义，不能替代CSS实现视觉排列。现代布局应使用flex或grid，前者擅长一维排列，后者适合二维网格，二者常嵌套使用。实施时需注意视口设置、语言声明和容器高度等关键属性，并处理好盒模型细节，以避免布局失效。

pre标签在HTML解析时保留空白字符，需设置等宽字体确保对齐。动态内容应使用textContent避免解析问题，且pre内仅适合内联元素，嵌套块级元素会破坏格式。初始空白保护在后续JS或CSS修改后可能失效。

无限滚动加载推荐使用IntersectionObserver监听底部占位元素，因其性能好且兼容性佳。需设置rootMargin提前触发，并通过isIntersecting判断加载时机，及时进行unobserve与observe操作以复用元素。同时应确保列表项高度固定，采用合适的DOM插入方法避免页面跳动，并与服务端约定明确的数据结束标识。

使用Animate css时，必须同时添加animate__animated基础类和具体动画类（如animate__fadeIn）才能生效。v4+版本强制使用双下划线前缀，且默认禁用自动播放，需借助IntersectionObserver等JavaScript手动触发动画。常见入场动画包括淡入、滑入等，选择时需考虑性能与场景。若动画无效，应检查样式表引入、版

CDN加速主要针对HTML引用的外部资源，而非HTML文件本身。需通过浏览器开发者工具检查资源请求域名是否为CDN地址，以确认加速生效。引入CDN链接时，需注意JS库的依赖顺序、CSS置于顶部、字体文件添加crossorigin属性，并避免使用协议相对路径。公共CDN资源建议添加integrity和crossorigin属性以确保安全与兼容。若资源显示来自本

ResizeObserver监听容器尺寸变化时，直接修改子元素样式可能导致循环触发或布局抖动。应使用requestAnimationFrame延迟更新、设置像素变化阈值防抖，并避免读取强制同步布局的属性。对于等比缩放场景，可利用contentRect获取尺寸，结合设备像素比调整canvas分辨率，再通过CSS缩放回容器物理尺寸。多个子元素响应时，建议仅监听父

实现图片自动轮播的核心在于有序切换。使用setInterval方法需管理图片数组与索引，确保加载完成再切换并处理边界。CSS动画适用于固定数量且尺寸一致的图片，通过关键帧控制显隐。开发中需避免事件重复绑定，监听加载错误，并利用visibilitychange事件管理页面不可见时的轮播暂停，以提升性能与体验。

如何理解闭包在“事件循环 (Event Loop)”不同阶段对外部变量引用的实时性 闭包对外部变量的引用机制，与事件循环的当前阶段并无直接关联。其核心在于变量绑定是否被共享，以及该绑定在函数被调用时所存储的具体数值。 闭包读取的是“变量绑定”，而非“定义时的快照” 一个普遍的误解是认为闭包会“冻结”

enterkeyhint属性用于建议虚拟键盘回车键的显示文案，但非强制命令，其效果受浏览器、输入法和操作系统影响，兼容性不一。该属性仅对移动端虚拟键盘有效，需配合type、inputmode等语义化属性以提升成功率。常见标准值包括 "enter "、 "done "、 "search "、 "send "等，但实际显示因设备和场景而异。若需稳定控制，可结合视觉提示、按键事件

内联样式属性适用于临时调试或必须由JavaScript动态计算的场景，如实时数据驱动的样式。其语法严格，需使用短横线命名并用分号分隔。内联样式优先级极高，易导致维护困难与样式冲突。多数静态样式应优先使用CSS类管理，动态场景如精确像素控制或实时坐标才是其合理应用范围。

使用history replaceState可在不重载页面的情况下，静默清理URL中过时的推广参数。应通过URLSearchParams安全过滤参数，避免手动处理。清理操作需在页面加载完成后执行，以防被服务端重定向覆盖。注意popstate事件兼容性，并理解此操作仅影响客户端URL，服务端仍需处理原始参数。

实现平滑回到顶部，推荐直接调用`window scrollTo({top:0,behavior: smooth })`，该方法稳定可靠且现代浏览器已全面支持。传统锚点跳转会干扰前端路由，而`scrollIntoView()`存在兼容性与行为不可控问题。滚动监听需使用`window scrollY`获取位置并配合`requestAnimationFrame`优

为文字装饰线自定义颜色时，必须同时指定装饰线类型，否则`text-decoration-color`不会生效。推荐使用简写属性`text-decoration:underlinesolidred;`，颜色需放在最后。旧版浏览器不支持此属性，可考虑用伪元素绘制下划线作为替代方案。注意不同字体的下划线位置存在差异，手动调整时需对齐基线。

SCSS编译后CSS文件缺少有效SourceMap，常因生成的 map文件内容为空或映射关系缺失。需在命令行中显式添加`--source-map`参数，或在Webpack中确保sass-loader与css-loader均开启sourceMap选项，并检查devtool配置。使用VSCode插件时需确认设置中启用sourceMap，并注意路径解析。最后应检查