JavaScript移动端开发需聚焦触摸交互、性能优化、设备适配与兼容性，核心是保障小屏、弱网、低性能设备下的流畅可用性。

JavaScript移动端开发要注意触摸交互、性能优化、设备适配和兼容性问题，核心是让页面在小屏、弱网、低性能设备上依然流畅可用。

触摸事件替代鼠标事件

移动端没有 hover、click 延迟 300ms、不支持 mouseover/mousedown 等原生鼠标行为。应优先使用 touchstart、touchmove、touchend，并注意 preventDefault 防止默认滚动或缩放干扰。

• 用 touchstart 替代 click，避免 300ms 延迟；可配合 FastClick 库或设置 关闭双击缩放
• 滑动操作（如轮播、下拉刷新）监听 touchmove 时及时调用 event.preventDefault()，但需判断方向，避免误禁垂直滚动
• 避免同时绑定 touch 和 click，否则可能触发两次回调；推荐统一用 touch 系列，或用 Pointer Events（需检查兼容性）

内存与渲染性能要精打细算

中低端安卓机内存小、GPU 弱，频繁 DOM 操作、大图加载、未清理的定时器都容易引发卡顿甚至崩溃。

• 减少重排重绘：批量修改样式、用 transform/opacity 做动画、避免读写交替（如 for 循环里先 getComputedStyle 再改 class）
• 图片懒加载 + webp 格式 + 合理尺寸：用 loading="lazy" 或 IntersectionObserver 判断可视区域，服务端按 devicePixelRatio 返回适配分辨率
• 节流防抖要到位：scroll、resize、touchmove 这类高频事件必须加 throttle（如 Lodash.throttle）或 requestAnimationFrame 包裹

设备差异和屏幕适配不能只靠 CSS

JS 需主动感知设备能力，比如是否支持 touch、是否为 iOS、状态栏高度、安全区域（iPhone X+）、横竖屏切换等。

• 检测触摸能力用 'ontouchstart' in window 或 navigator.maxTouchPoints > 0，别只靠 UA 判断 iOS/Android
• 获取安全区域：通过 env(safe-area-inset-top) 的 CSS 变量需 JS 配合读取，或用 window.visualViewport 监听缩放变化
• 横竖屏处理：监听 screen.orientation 或 resize 事件，但注意 Android Chrome 对 orientationchange 支持不稳定，建议以 width/height 比值为主判断

兼容性与错误监控要前置

微信内置浏览器、QQ 浏览器、各厂商定制 WebView 差异大，ES6+ 语法、Promise、async/await、IntersectionObserver 等特性并非全量支持。

• 构建时用 Babel 转译 + core-js 补丁，重点兼容 Android 4.4+ 和 iOS 9+，微信 SDK 版本可通过 weixinJSBridge 或 typeof WeixinJSBridge 判断
• 全局捕获 JS 错误：window.addEventListener('error') 和 window.addEventListener('unhandledrejection') 都要设，上报字段至少含 URL、userAgent、错误堆栈、设备信息
• 接口异常需降级：网络请求失败时显示缓存内容、提供手动重试按钮，避免白屏；localStorage 满时 try-catch 并清理旧数据

不复杂但容易忽略。写 JS 时多想想真机上手指划得顺不顺、切后台再回来会不会丢状态、弱网下首屏有没有骨架、低端机点十次会不会卡死——这些才是移动端落地的关键。