-
虚拟DOM通过JavaScript对象模拟DOM结构，结合diff算法高效比对变化并批量更新真实DOM。1.虚拟DOM是轻量的JS对象，描述真实DOM结构；2.diff算法采用分层对比、类型不同则替换整树、列表依赖key识别节点复用等策略；3.有key时能精准识别节点移动而非重建；4.简易实现包括创建vnode、render生成真实DOM、patch对比更新；5.实际框架在此基础上加入调度与批处理机制；6.理解原理有助于优化组件性能，如合理使用key避免不必要渲染。
-
JavaScript操作日期时间主要依靠Date对象，支持创建（当前时间、字符串、数值、时间戳）、获取（本地/UTC各部分值）、格式化（toString/isISOString/toLocaleString）及计算（毫秒差、加减、比较）。
-
在移动端浏览器中，MediaTrackConstraints.aspectRatio常被忽略或不生效，因其仅为建议性约束；实际需结合width/height范围限定、设备方向适配及结果校验，才能可靠实现目标宽高比（如9:16竖屏）。
-
模板字符串是ES6引入的原生多行字符串方案，用反引号`包裹，支持换行、变量插值${}、表达式求值且保留空格缩进；${}内需避免语句和未定义值，推荐显式转换；标签函数是其高阶用法。
-
暗黑模式下:root变量未生效，主因是CSS加载顺序错误或作用域覆盖；应确保:root声明在末尾、避免局部重定义、用“Computed”面板排查继承链；主题切换需统一由setTheme()控制，以data-theme为唯一权威源；变量命名须语义化（如--color-text-primary），禁用表现式命名；闪动问题可通过临时禁用transition和确保可动画属性解决。
-
最常用方式是设置cursor:pointer实现小手图标，推荐用于hover状态以避免误判；还可根据交互意图选用move、grab、not-allowed等值增强语义表达，并注意移动端兼容性与误用风险。
-
本文讲解如何使用jQuery精准定位并操作iframe文档中首个<img>标签，避免影响其他图片，适用于无法修改源HTML但需前端动态干预的场景。
-
text-shadow动画常失效是因为必须显式声明x、y、blur、color四个值，缺一则退化为离散切换；需统一单位、全用rgba、保持层数一致，且Safari旧版仅支持@keyframes。
-
opacity作用于整个元素及其子元素，无法单独恢复子元素不透明度；rgba()仅控制颜色通道透明度，不影响子元素，适用于背景、边框、文字等单属性透明设置。
-
按钮用百分比宽度在小屏上溢出，是因为width:100%基于未约束的父容器计算，且未考虑box-sizing、padding、border等盒模型增量；需配合box-sizing:border-box、父容器max-width:100%及合理min-width/max-width使用。
-
原生title属性可实现基础工具提示，但样式和体验受限；通过data-title结合CSS可自定义外观与动画，支持动态内容展示；引入JavaScript能实现延迟显示、精准定位及异步加载等高级功能，提升交互体验。
-
useMemo的核心思想是通过缓存计算结果并在依赖项未变化时直接返回缓存值来避免重复计算，其关键在于依赖项数组的正确使用，它决定了何时重新执行计算；该机制解决了因不必要的重复计算和引用变化导致的性能瓶颈问题；useMemo用于缓存值，而useCallback用于缓存函数引用，两者共同优化React组件的渲染性能。
-
真正可行的方案是用offset-path+offset-distance，CSS原生支持沿贝塞尔曲线、圆弧等任意路径移动，配合offset-rotate:auto可自动朝向路径切线，兼容Chrome79+、Edge79+、Safari15.4+。
-
::backdrop仅在Element.requestFullscreen()触发的系统级全屏下生效，普通弹窗无效；需确保background使用rgba()设透明度，避免opacity混用，并注意浏览器前缀兼容性。
-
语义化标签是使用具有明确含义的HTML元素（如<header>、<nav>、<main>等）来构建页面结构，提升可读性、可访问性和SEO。结合@media查询，可根据设备特性动态调整布局，例如在小屏将<nav>设为垂直堆叠，在大屏显示横向导航。通过语义结构与响应式样式的协同，既能保持代码清晰，又确保多设备下的良好体验，是现代前端开发的最佳实践。
