仅强制显示元素，不激活模态行为；真正模态需调用showmodal()，否则无esc响应、无焦点锁定、无遮罩交互，且open属性不参与模态生命周期。
dialog 元素是目前最干净、语义正确且开箱即用的方案，但必须配合 showModal() 调用，否则不触发模态行为；微信环境需降级为 position: fixed 弹层，且不能依赖 navigator.share()。
用 dialog 实现图片弹窗，为什么不能只写 open 属性？
写了 <dialog open><img src="big.jpg"></dialog> 页面一加载就显示，但用户无法按 Esc 关闭，焦点不会锁定在弹窗内，点击遮罩也不关闭——因为原生 dialog 的模态逻辑（焦点捕获、Esc 响应、dialog::backdrop 交互）只在调用 showModal() 时激活。
- 必须用 JS 控制：
dialogEl.showModal()显式打开，dialogEl.close()关闭 - 首次挂载要确保元素已在 DOM 中：
document.body.appendChild(dialogEl)（如果动态创建） -
open属性只是“快照”，不参与模态生命周期；设open = false不会移除 backdrop，也不派发close事件
图片地址怎么传？别把高清图塞进缩略图 src
常见错误是缩略图直接写 <img src="big-2000x1500.jpg">，导致首屏加载巨图、LCP 拖慢、带宽浪费。正确做法是分离加载路径：
- 缩略图用小图：
<img src="thumb-300x200.jpg" class="preview-trigger"> - 监听父容器（避免动态插入失效）：
gallery.addEventListener('click', e => { if (e.target.matches('img.preview-trigger')) showPreview(e.target.dataset.src); }) - 检查
e.target.dataset.src是否存在，空值或相对路径（如./images/a.jpg）在弹窗中容易 404
弹窗里的 <img> 能加 loading="lazy" 吗？
不能。弹窗默认隐藏（display: none 或 visibility: hidden），而 loading="lazy" 依赖 Intersection Observer，隐藏元素永远不进入视口，结果就是图片一直空白或卡在占位符。
- 正确做法：弹窗显示后再设置
modalImg.src = url，或显式移除该属性：modalImg.removeAttribute('loading') - 旧版 Safari 对
loading="lazy"支持不稳定，不写更安全 - 绝对不要用
background-image替代<img>：失去max-width响应、无法右键保存、打印时可能不渲染
移动端双指缩放失效？检查 touch-action
很多弹窗库默认设 touch-action: none 来“接管”手势，但这会禁用浏览器原生双指缩放，尤其在 Safari 和 Chrome for iOS 上。
- 给弹窗内图片加：
style="touch-action: pinch-zoom;" - 同时确保缩放操作作用于
<img>本身（不是外层 wrapper），否则 transform 不生效 - 拖拽/缩放高频更新时，必须用
transform: translate(x, y) scale(s)+will-change: transform触发 GPU 加速，否则中低端设备明显卡顿
ua.includes('MicroMessenger') 并降级，且降级后不能再用 transform 动画（X5 内核渲染异常），得切回 top/left + scale 组合；另外，缩放重置后建议清空 transform 并设 will-change: auto，防止内存占用累积。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
