🧠 为什么 H5 在 iOS 上特别容易“翻车”？
一句话总结：WKWebView 不是 Safari。
它只是“内核 + 最少必要功能”的 Web 容器，
而 Safari 是“完整浏览器生态系统”。
因此两者虽然都用 WebKit，却完全不是一个级别的东西。
🚫 1. WebView 是“假浏览器”，不是 Safari
很多前端误以为：
“WKWebView 用的就是 Safari 的内核，表现应该一样。”
这是 错误认知。
❌ WKWebView ≠ Safari
Safari = 内核 + 网络栈 + JS 引擎调度策略 + 缓存体系 + 生命周期管理 + 事件模型 + 安全策略
WebView = 只给你引擎 + 超少量功能，其他统统没有
所以差得不是一点点。
🔐 2. JS 引擎在 WebView 中被“沙箱化”
虽然 Safari 和 WebView 都用 JSCore，但 WebView 的 JSCore 被严重限制：
✔ 不能访问系统资源
- 无法读写本地文件系统
- 无法获取通讯录 / 短信 / 电话 / 设备 ID
- 无法访问 CPU、磁盘序列号等硬件信息
这些都被沙箱隔离掉了。
✔ JS 执行能力变弱
WebView 中：
- 内存限制更严格
- 大计算容易被 throttle
- 后台 JS 直接被暂停
setTimeout、requestAnimationFrame想停就停
Safari 中则不会这么激进。
📌 这会导致：
- H5 游戏：Safari 正常 → WebView 明显掉帧
- 微信/手Q/抖音小程序：WebView 明显慢
- H5 页面切后台容易白屏 / 被系统回收
- WebSocket 在 WebView 里更容易掉线
- H5 永远无法获取设备唯一标识（IMEI / UDID）
🔁 3. 生命周期完全不同
Safari 是一个完整的浏览器，有：
- Tab 后台保活
- 多进程调度
- bfcache
- 完整 session 生命周期
而 WebView 是：你开了就有，关了就没了。
WebView 的痛点：
- 切后台很容易被 iOS 杀掉
- JS 线程被挂起
- 网络被系统冻结
- 页面回到前台可能白屏或重载
WebView 天然不适合长连接、复杂业务、大型 SPA、重计算场景。
👆 4. UI 事件模型完全不同
Safari 有完整、成熟的事件链，而 WebView 的事件路径是：
Native UI → WebKit → DOM
中间经过大量适配层。
导致 iOS WebView 常见问题：
- click 延迟
- touchstart 有时不触发
- passive events 表现不同
- input 的 focus/blur 混乱
- 键盘弹出导致页面被顶飞
- fixed 元素抖动、错位
这就是为什么 H5 在 iOS 中经常出现奇怪的交互行为。
👆 5. 真实踩坑
1. 输入框被键盘遮挡（Keyboard 弹起不触发 resize）
原因：iOS 在 WKWebView 中：
- ❌ 不触发
window.resize - ❌
innerHeight不变化 - ❌ focus 不会自动 scroll 到输入框
- ❌ 键盘弹起不会影响布局
- ❌ fixed bottom 会被键盘遮挡
解决：手动监听 focus/blur + window.visualViewport（目前自己项目中确实可以解决被遮住的问题，但是在一个输入框中马上切换另外一个输入框，页面会滚动再回到原来的位置）
2. input 在 iOS 中无法自动聚焦
原因：👉 Apple 官方明确限制，原因是防止恶意网页自动弹出键盘骚扰用户
解决：必须在用户手势后触发（点击触发键盘）
3. 滚动穿透（modal 滚动底部页面）
原因：因为 iOS 的触摸事件穿透机制和浏览器不同（不止内嵌，使用RN写app也会造成一些触摸穿透机制）
解决：禁止 touchmove + 阻断 overscroll
4. Safari 内嵌返回上一页闪屏
但是 WebView 里由于权限不足，bfcache 经常失败：
- 不能恢复 snapshot → 页面从 0 开始渲染
- WKWebView 会先显示一个空白层
- 用时 20~200ms，所以用户看到“闪一下白屏”
解决：页面缓存策略要关闭 bfcache、或者h5增加页面缓存
5. iOS 点击事件延迟/偶发不生效
原因：为了判断用户是不是双击缩放，iOS Safari/WKWebView 如果检测页面 允许缩放，就触发 300ms 延迟。
解决：移除 click，改为 touchstart/touchend
6. 不能下载图片
原因：WKWebView 不支持 download 行为、没有下载文件权限、iOS 不允许跨域资源以 blob 形式直接保存
解决：H5 把图片 URL 传给 App
7. 为什么 WebSocket 容易掉线
原因：手机会自动断网 / 切换网络模式、WKWebView 在后台后 JS 会冻结，心跳发不出去 → 服务端认为你挂掉 → 直接断线、网络波动（3G/4G/5G 本身就不稳定）
解决：
- 加“心跳机制”防掉线、
- 加“自动重连机制”、检测网络恢复后立即重连
- iOS 后台冻结 → 前台回来自动重连
