商品详情页需按用户决策路径组织信息：先信任（主图/标题/价格），再解疑（参数/评价/服务），最后促单（按钮/库存）；须重视交互细节，如图片滑动缩放用PhotoSwipe、SKU联动用Map映射、参数表改用语义化列表或优化table响应式、控制资源加载优先级防FOUC、预留错误边界状态。
商品详情页不是“堆内容”，而是按用户决策路径组织信息：先建立信任（主图/标题/价格），再解决疑虑（参数/评价/服务），最后推动下单（按钮/库存）。直接套用模板容易忽略关键交互细节，比如图片懒加载失效、SKU选择后价格不更新、移动端折叠文案没展开逻辑。
主图区域怎么支持左右滑动+缩放
原生 <img> 不支持手势操作，必须引入轻量库或自己实现 touch 事件。推荐用 photo-swipe（仅 12KB），它能自动处理双指缩放、拖拽、点击放大，且不依赖 jQuery。
- HTML 结构要包裹在
<div class="pswp">容器里，否则初始化失败 - 每张图的
data-pswp-width和data-pswp-height必须填真实尺寸，否则缩放错位 - 移动端需加
touch-action: manipulation到图片父容器，避免浏览器默认滚动冲突 - 不要用
background-image放主图——PhotoSwipe 只识别<img src>
SKU选择器如何联动价格和库存
纯 HTML + JS 就能完成，不需要框架。核心是把 SKU 组合映射成唯一 key，查表更新 DOM。
- 后端返回的 SKU 数据结构必须含
skuId、price、stock、specs（如["黑色", "128GB"]） - 前端用
Map建立specs.join('|') → skuObj映射，比每次遍历数组快 3 倍以上 - 禁用已售罄的规格按钮时，别只加
disabled，还要加aria-disabled="true"保障读屏体验 - 价格数字用
<span class="price-num">单独包裹，方便 CSS 控制小数位样式（比如 .99 用更小字号）
商品参数表格在手机上怎么不换行挤成一团
用 <table> 写参数表很常见，但默认在窄屏下会横向溢出。不能简单加 overflow-x: auto，那会导致可访问性问题（键盘无法滚动）。
立即学习“前端免费学习笔记（深入）”；
- 给
<table>外层包一层<div class="param-table-wrap">，设overflow-x: auto和-webkit-overflow-scrolling: touch - 表格本身设
min-width: 600px（适配主流小屏宽度），并用white-space: nowrap防止文字折行 - 更优解是改用语义化列表：
<dl><dt>品牌</dt><dd>Apple</dd></dl>，配合 CSS Grid 实现两栏对齐，天然响应式 - 如果必须用 table，记得加
role="presentation"，告诉屏幕阅读器这不是数据表
页面加载慢，首屏图片和价格老是闪一下才出来
这是未做资源优先级控制的典型表现。浏览器按 HTML 顺序解析，但商品图和价格常被 JS 动态插入，导致 FOUC（Flash of Unstyled Content）。
- 主图用
<img loading="eager" decoding="async">，强制首屏立即加载 - 价格数字写死在 HTML 里（哪怕只是占位符），JS 只负责替换，别等 API 返回后再
innerHTML - SKU 选择器初始状态要预设一组默认值（如第一个颜色+最小容量），避免用户点开空白
- 所有内联 JS 放在
</body>前，且加type="module"或defer，防止阻塞渲染
最常被跳过的其实是错误边界：当 SKU 接口超时或返回空数组，选择器不能变灰失活，而要显示“暂无规格”并保留“咨询客服”入口。这类状态比美观更重要。
