-
useMemo的核心思想是通过缓存计算结果并在依赖项未变化时直接返回缓存值来避免重复计算，其关键在于依赖项数组的正确使用，它决定了何时重新执行计算；该机制解决了因不必要的重复计算和引用变化导致的性能瓶颈问题；useMemo用于缓存值，而useCallback用于缓存函数引用，两者共同优化React组件的渲染性能。
-
text-align用于块级元素内行内内容的水平对齐，如left、center、justify；vertical-align用于行内或表格元素的垂直对齐，如middle、top，二者不可混用，常配合display:table-cell或line-height实现居中效果。
-
答案：集成Stylelint可规范Tailwind类名顺序、避免重复冲突并统一命名风格。通过stylelint-config-tailwindcss强制类名按布局→装饰→文本→状态等顺序排列，防止如text-red-500写在flex前；利用no-duplicate-selectors检测重复类，结合自定义规则识别absolutestatic、flexgrid等冲突组合，提升代码可读性与维护性。
-
最基础可靠的获取HTML页面方式是直接用浏览器打开HTML文件或通过本地服务器访问。file://协议适合静态页但禁用fetch等特性；Python内置服务器可模拟真实环境；curl/fetch适用于远程获取但受同源和JS渲染限制；关键在确保路径正确与脚本执行。
-
IE8及以下用filter:alpha(opacity=XX)会导致子元素强制继承透明度，唯一有效解法是给关键子元素设置纯色background-color（如#fff）抵消灰度，禁用rgba()和opacity因IE6–IE8不支持。
-
PWA必须包含start_url、display、icons（192x192和512x512PNG）、name、short_name字段，且serviceworker需在HTTPS下注册并处理fetch事件。
-
当使用text-indent:-20px配合margin-left:20px实现悬挂缩进时，若前有左浮动元素（如广告栏），文本可能异常覆盖其上；根本解法是通过clear:both强制段落从浮动元素下方开始流式布局。
-
真正稳的轮播方案是requestAnimationFrame+时间戳控制，它与屏幕刷新同步且切后台自动暂停；CSS轮播需用transform+opacity、will-change优化，避免重排闪动；按钮交互要防冒泡、双事件监听；图片加载失败须用onerror处理并校验naturalWidth等字段。
-
图片不居中是因浏览器默认inline样式导致，需设display:block;margin:0auto;或父容器display:flex;justify-content:center;，denoserve不干预样式与响应头。
-
clientX相对于视口左上角，不随滚动变化，适用于悬浮提示、菜单定位；pageX相对于文档左上角，随滚动变化，适用于绘图、锚点记录；需注意IE8兼容性及screenX等坐标差异。
-
答案：通过transition属性实现按钮悬停时背景色和文字颜色的平滑过渡。首先设置基础样式，包括背景色、文字色、边框等；然后添加transition控制background-color和color在0.3秒内缓动变化；接着定义:hover状态下的颜色值，触发渐变动画；最后建议明确指定过渡属性以避免性能问题。
-
sticky元素不生效的三大主因：一是父容器或祖先设置了非visible的overflow（如hidden、scroll），切断滚动参考；二是父容器高度为0或未定义，导致无滚动上下文；三是sticky元素自身应用了transform/filter等触发新层叠上下文的属性。
-
requestAnimationFrame是浏览器原生动画API，按屏幕刷新节奏自动调度回调，60Hz下约每16.7ms执行一次，后台自动暂停，合并DOM更新以减少重排重绘，并智能降频保帧率稳定。
-
外边距塌陷是CSS规范定义的垂直相邻块级元素margin合并行为，发生在父子或兄弟块间；行内、浮动、绝对定位元素不参与；可用BFC（如display:flow-root）或border/padding/flex等轻量方式解决。
-
fillRect()和strokeRect()可直接绘制矩形，无需路径操作；画圆必须用arc()配合beginPath()、fill()/stroke()；自定义图形需moveTo()+lineTo()+closePath()组合，并注意路径状态管理。
