使用gap属性、相对单位和弹性布局优化移动端Flex间距。1.用gap统一控制子元素间隔，避免多余空白；2.结合rem或vw实现响应式间距，提升适配性；3.配合媒体查询微调不同屏幕下的间距；4.使用flex-grow与min-width控制换行，保持布局整洁；5.确保点击区域有8–12px间距，提升触控体验。

首图必须同步加载，非首图用loading="lazy"+decoding="async"；用IntersectionObserver预加载下一张图；轮播动画只用transform+opacity；DOM节点应虚拟化至≤3个。

JavaScript是单线程的，通过事件循环机制处理并发。1.JavaScript引擎在任何时刻只能执行一段代码，异步操作由宿主环境（如浏览器）处理；2.异步任务完成后，其回调被放入任务队列；3.事件循环不断检查调用栈是否为空，若为空则从任务队列中取出回调执行。任务队列分为宏任务队列（如setTimeout、setInterval）和微任务队列（如Promise回调），微任务优先级更高，每次宏任务执行后，事件循环会清空微任务队列。理解事件循环有助于避免阻塞主线程、优化UI渲染、排查异步执行顺序混乱和竞态条

HTML语义化通过使用具有明确含义的标签来组织网页内容，帮助搜索引擎更好地理解页面结构和信息重点。这直接影响了网页在搜索结果中的表现。提升内容可读性与结构清晰度搜索引擎爬虫依赖代码结构判断页面主题。使用<header>、<nav>、<main>、<article>、<section>等语义化标签，能让爬虫快速识别导航、主体内容、侧边栏和页脚等区域。<h1>到<h6>标签合理嵌套，体现内容层级，突出关键词重点<time

微博HTML5版不支持直接发布商品链接生成卡片，需通过自建HTTPSH5页+OpenGraph标签+微博分享接口实现；普通用户须配置og:title等标签、服务端渲染、适配微博爬虫UA，并用t.cn短链分发。

Polyfill是填补浏览器新特性兼容性缺口的代码补丁，通过特征检测决定是否手动实现缺失功能；需按需加载，避免全局引入，并可自定义简单实现如Array.prototype.includes。

正则表达式是字符串处理的基础设施，本质是描述字符串模式的语法规则；JavaScript中通过String和RegExp对象原生支持，test()返回布尔值用于判断，match()返回数组用于提取，需注意null与空数组的真值差异。

HTML4未定义任何触摸事件，因其发布于1999年，早于触控设备普及；HTML5定义了touchstart、touchmove、touchend、touchcancel四个核心触摸事件。

HTML5无法直接生成二维码，需借助JavaScript库（如qrcode.js）将字符串转为二维码图案并渲染到canvas或img；扫码则需getUserMedia+jsQR等组合实现，且须HTTPS环境。

在React（如Next.js）项目中，importconfigfrom"@config/config.json"这类以@开头的导入语法是通过配置路径别名（PathAliases）实现的，需在jsconfig.json（开发环境）或tsconfig.json（TypeScript项目）中设置baseUrl和paths。

Maybe处理可能为空的值，Either处理可能出错的计算，IO延迟执行副作用，三者均遵循函子规范，通过map实现链式调用，提升代码安全性与可维护性。

height:100%依赖父容器高度，而默认body和html高度未显式定义，导致百分比高度失效；通过设置html,body{height:100vh}或使用position:fixed（脱离文档流后相对视口计算），可使侧边栏撑满全屏高度。

没有“最适合”的JS框架，只有最匹配项目需求、团队能力与维护预期的那一个：React生态广但需自组织，Vue上手快且TS支持稳，Svelte包小但生态弱；选型看开发效率、性能、生态；简单场景用原生JS更优。

Grid嵌套高度塌陷主因是子级未继承父行高或内容脱离文档流，导致父容器无法正确计算高度；使用grid-template-rows:auto时，若子Grid无明确高度且内部布局异常，易触发塌陷；解决方法为结合clearfix创建BFC防止高度丢失，并设置子Gridheight:100%、min-height:fit-content及align-self:stretch，确保父行能感知子内容实际尺寸，双重保障避免塌陷。

答案是利用HTML5拖放API实现拖拽排序，通过设置draggable属性和监听dragstart、dragover、drop事件控制元素移动，结合CSS提升交互反馈。