定位发烫耗电主因是未关闭enablehighaccuracygps及未清理watchposition监听,且常误用requestanimationframe;应按场景选择定位精度、设timeout与maximumage、手势触发权限、监听页面可见性并及时clearwatch。

定位一开手机就发烫?先关掉 enableHighAccuracy
GPS 硬件启动是耗电大户,enableHighAccuracy: true 会强制唤醒 GPS 模块,尤其在冷启动或信号弱时,设备可能持续搜星 10–30 秒,CPU 和射频全速运转。多数 Web 场景(比如附近商家列表、天气定位)根本不需要米级精度,用默认的 Wi-Fi + IP 定位(误差 100–500 米)完全够用。
- 只在导航类场景(如步行指引、轨迹记录)才考虑开启
enableHighAccuracy - 开启时务必配
timeout: 10000防止卡死,maximumAge: 30000允许复用 30 秒内缓存位置,避免重复触发硬件 - iOS 上即使开了高精度,Safari 仍可能降级为网络定位——别依赖它一定出 GPS 坐标
watchPosition 不手动 clearWatch,等于后台偷偷跑脚本
很多人以为调用一次 watchPosition 就完事了,其实它会持续监听位置变化,哪怕页面切到后台、用户锁屏,只要没显式清除,监听就一直挂着。实测某外卖页未清理 watch,待机 2 小时掉电 8%,比常驻音乐 App 还狠。
-
watchPosition返回的是数字 ID(如5),必须存下来,后续用clearWatch(watchId)主动终止 - 组件卸载、路由跳转、弹窗关闭等时机,就是
clearWatch的最佳触发点 - 别写
clearWatch(null)或clearWatch(undefined),浏览器静默忽略,毫无提示
HTTP 或本地文件直接跪?检查协议和触发上下文
现代浏览器(Chrome 89+、Edge 90+、Safari 16.4+)对 getCurrentPosition 施加了双重硬性限制:必须 HTTPS/localhost 协议 + 用户手势触发。缺一不可,否则连权限弹窗都不会出现,控制台也无报错,只剩白屏或静默失败。
- 开发时用
https://localhost:3000或https://127.0.0.1:3000可行,但http://localhost或file:///index.html直接被禁 - 不能在
DOMContentLoaded或load事件里自动调用,得绑定到按钮点击、触摸、键盘回车等真实用户操作上 - 用户点“拒绝”后,JS 无法再次唤起权限面板,需引导其点击地址栏锁形图标手动重置
页面不可见时还在狂刷 requestAnimationFrame?那不是定位问题,是动画在烧电
很多定位类页面(比如实时地图、运动轨迹)滥用 requestAnimationFrame,即使用户切走标签页、锁屏、甚至最小化窗口,仍在每秒执行 60 次渲染逻辑。这不是 Geolocation API 的锅,而是前端自己没做可见性判断。
立即学习“前端免费学习笔记(深入)”;
- 用
document.hidden或visibilitychange事件暂停动画循环 - 定位数据更新频率远低于渲染帧率(实际位置变化可能几秒一次),没必要每帧都重绘地图
- Chrome 地址栏输入
chrome://flags/#disable-gpu-rasterization关闭 GPU 光栅化可小幅省电,但仅对纯静态页有效,动态地图慎用
watchPosition 和 requestAnimationFrame 这两个组合,不动声色就把电量吸走一半。











