jsbridge通信不能依赖dom ready，因为native侧在webview js上下文可用时即注入代理对象，早于dom构建；若js端等到dom就绪再调用，会因代理未就绪而报错。
JSBridge 通信为什么不能依赖 DOM ready？
在混合开发中，很多前端开发者习惯等 document.readyState === 'complete' 或 DOMContentLoaded 再初始化 JSBridge，但这是危险的。Native 侧可能在 WebView 完全加载前就已注入代理对象（如 window.myObj），而 JS 端若等到 DOM 就绪才尝试调用，会错过 Native 初始化窗口期，导致 TypeError: Cannot read property 'callNative' of undefined。
真实场景下，WebView 加载 HTML 的同时，Native 侧已在执行 this.controller.registerJavaScriptProxy(...) —— 这个过程不依赖 DOM，只依赖 JS 执行上下文可用。因此通信结构的同步必须早于 DOM 构建。
- 推荐做法：在
最顶部立即执行桥接检测逻辑，不挂载任何事件监听器 - 避免使用
setTimeout(..., 0)或Promise.resolve().then(...)模拟“微任务队列”，这无法保证 Native 代理已就绪 - 鸿蒙 ArkTS 侧注册代理后，会同步向 JS 上下文注入
window.myObj，但该对象可能短暂为null或undefined，需主动轮询或监听onPageStarted后再确认
如何判断 JSBridge 是否真正可调用？
光检测 window.myObj 存在还不够。某些平台（如旧版 Android WebView）在代理对象被注入后，其方法仍可能未完成绑定，直接调用 window.myObj.func() 会静默失败或抛出 NotSupportedError。
关键判断点是代理对象的 [[IsCallable]] 属性是否生效，以及底层 IPC 通道是否已建立。最稳妥的方式是结合平台特性做轻量探测：
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
- 对鸿蒙 Web 组件：检查
window.myObj?.constructor?.name === 'Proxy'，再调用一个无副作用的 ping 方法（如window.myObj.ping({})）并设 300ms 超时 - 对 Android
addJavascriptInterface：需额外验证方法是否可枚举（typeof window.myObj.func === 'function'且Object.prototype.hasOwnProperty.call(window.myObj, 'func')） - 禁止依赖
try/catch包裹首次调用——部分 Native 实现不抛异常，而是丢弃消息
Native 主动触发 JS 时，回调函数为何常丢失？
当 Native 通过 onInterceptRequest 或事件广播调用 window.__native_callback 时，如果 JS 端的回调函数是闭包内联定义（如 bridge.on('login', (data) => {...})），极易因页面重载、SPA 路由切换或内存回收而失效。
根本原因是 Native 侧持有的是 JS 函数引用地址，而 V8/ArkTS 引擎在 GC 时会清理不可达函数。这不是跨进程序列化问题，而是 JS 执行上下文生命周期管理缺失。
- 解决方案：所有注册给 Native 的回调必须挂载到全局对象（如
window.__cb_login_123 = function(data){...}），且避免使用箭头函数（无法被delete） - 鸿蒙环境下，建议用
WeakMap缓存回调映射，但 Native 侧需配合使用字符串键（如callbackId）而非函数引用 - Android 中若使用
addJavascriptInterface，务必在 Activity 销毁前调用removeJavascriptInterface，否则可能触发 Use-After-Free
同层渲染下，JSBridge 与手势事件的竞态怎么破？
HarmonyOS 的同层渲染让 Web 组件能嵌套在 Text、Button 中，但也带来新问题：当用户点击一个覆盖在 Web 区域上的原生 Button 时，click 事件可能先被 Web 内核捕获，再经 onInterceptRequest 转发，导致 Native 侧收到两次事件（一次来自原生控件，一次来自 JSBridge）。
这不是 bug，而是渲染树与事件分发树未完全对齐的表现。ArkUI 的 RenderNode 虽共享纹理，但事件路径仍分属两套系统。
- 规避方式：在 Web 侧禁用
pointer-events: none的穿透区域，或对关键按钮设置zIndex显式声明层级优先级 - 鸿蒙推荐方案：用
webComponent.addEventListener('touchstart', e => e.stopPropagation(), { capture: true })截断冒泡，但仅限需要 JS 响应的区域 - 切勿在 Native 侧对同一事件源重复注册监听（如既监听 ArkTS 的
onClick，又监听 JSBridge 的onTap）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
