知识要点

  1. 线程与进程 进程：进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程，是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体。 线程：线程是程序执行流的最小单元，是处理器调度和分派的基本单位。一个进程可以有一个或多个线程，各个线程之间共享程序的内存空间(也就是所在进程的内存空间)。
  2. 浏览器的线程与进程 浏览器有4种基本进程，如下 Browser进程：浏览器的主进程，只有一个。负责浏览器界面显示，与用户交互。负责各个页面的管理，创建和销毁其他进程 GPU进程：主要是与图形渲染有关。 浏览器渲染进程：也被称为浏览器内核。负责页面的渲染，脚本执行，时间处理，网络请求等功能。每个标签页开启了一个独立的渲染进程 其他插件的进程：比如你给你浏览器装了一个插件，那么这一个插件就是一个进程。 渲染进程中有5种基本线程，如下 GUI渲染线程： 解析html文档，生成DOM树与CSS树，再生成render树，然后将这个render树渲染到界面上。当页面触发回流或者重绘的时候，会再次执行此次操作。 JS线程：用来执行JS代码。 定时器线程：用来处理定时器线程，当定时器到期的时候，将回调放到任务队列里面，等待JS线程的执行。 事件触发线程。用来管理事件的触发，例如：点击事件，鼠标移动事件。当这些个事件被触发的时候，就会将这些事件的回调添加到任务队列里，等待JS执行。 异步HTTP请求线程。网络请求在连接后会新启动一个线程，线程如果检测到请求的状态变更，如果设置有回调函数，该线程会把回调函数添加到事件队列，等待JS执行。
  3. 浏览器GUI渲染线程与JS线程互斥原因 JS线程拥有修改DOM的能力，在GUI线程渲染未生成render树时，修改DOM无疑会报错 GUI线程在渲染完成后，JS线程存在使GUI线程重新渲染的可能，使得渲染效率低下 综上两点，为提升渲染效率和减少脚本错误的产生，浏览器的JS线程与GUI线程互斥，当一个执行时另一个被挂起。这样就会导致一个问题，当JS执行一个时间复杂度非常高的算法的时候，因为迟迟不能执行完毕，导致GUI渲染线程被挂起太久，就会导致页面看起来卡顿，事件响应变慢。此时可以通过web worker解决
  4. 小程序渲染层与逻辑层相互独立原因 小程序的宿主是微信，但是小程序版本的迭代是独立的，升级更新不依赖宿主，这一点跟 Web 网站是相同的。也就是说，小程序沿袭了 Web 的某些优势，但它并不是 Web，小程序不需要所有的web能力，在微信APP的基础上，需要实现 安全 版本可随时迭代 调用系统级别API及原生组件 实现上述要求，可以将代码注入iframe中运行，但由于安全问题注入前必须对代码进行过滤，编译。所以还要引入额外的javascript编译器和web worker保证线程安全，Worker 线程负责计算，将结果通过 postMessage 传递给主线程，主线程负责渲染。 这样以来就大大拉低了小程序的性能。在考虑两个必要因素的情况下，小程序采用了双线程模型。 渲染线程使用 Webview 进行 UI 的渲染呈现。Webview 是一个完整的类浏览器运行环境，本身具备运行 JavaScript 的能力，但是小程序并不是将逻辑脚本放到 Webview 中运行，而是将逻辑层独立为一个与 Webview 平行的线程，使用客户端提供的 JavaScript 引擎运行代码，iOS 的JavaScriptCore、安卓是腾讯 X5 内核提供的 JsCore 环境以及 IDE 工具的 nwjs 。 逻辑线程是一个只能够运行 JavaScript 的沙箱环境，不提供 DOM 操作相关的 API，所以不能直接操作 UI，只能够通过 setData 更新数据的方式异步更新 UI。 摘自：理解微信小程序的双线程模型 - JunpengZ - 博客园
  5. JsBridge实现的两种方式 JsBridge在小程序中扮演逻辑层中js与native沟通的桥梁，是一种native与逻辑层双向通信的一种机制，js通过JsBridge调用native提供的功能，小程序API中wx就是客户端暴露给小程序逻辑层的JsBridge接口，其中封装了大量的系统级能力，比如发起请求，缓存操作，蓝牙，屏幕亮度，摄像头等等。 实现JsBridge的方式有两种： 注入API 拦截 URL Schema URL schema 是类URL的请求格式，如：:///? // 向native端发起请求function showNativeDialog(text) { window.alert('jsbridge://showToast?text=' + text);}// native端监听并响应webView.setWebChromeClient(new WebChromeClient() { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { if (!message.startsWith("jsbridge://")) { return super.onJsAlert(view, url, message, result); } UrlSchema urlschema = new UrlSchema(message); if ("showToast".equals(urlchema.getMethodName())) { String text = urlschema.getParams("text"); Toast.makeText(mContext, text, Toast.LENGTH_LONG).show(); } result.confirm(); return true; }}

补充

补充：JSBridge 是「Web 端 JavaScript」与「Native 原生层」双向通信的桥梁，是 Hybrid / 小程序 / React Native 等跨端方案的关键基础设施。

两种主流实现方式：

  • 注入 API：Native 在 WebView 加载时往 window 上注入对象或方法，JS 直接调用。例如微信 JSSDK、window.WVJSCallback。
  • 拦截 URL Scheme：JS 跳转或创建 iframe 到 jsbridge://method?params 伪协议，Native 拦截后解析并调用对应方法。

补充要点：

  • 双线程小程序的特殊性：微信小程序逻辑层跑在独立线程（JSCore / V8），不能直接操作 DOM，必须通过 setData 把数据传回渲染层（WebView）才能更新视图。
  • JsBridge 在小程序中：相当于 wx 系列 API（wx.request、wx.setStorage 等），封装了网络、缓存、设备、定位等 Native 能力。
  • 双向通信：Native → JS 常用 evaluateJavaScript（WKWebView）或事件回调。

补充：现代跨端框架（如 React Native、Taro、uni-app）已经封装好 JsBridge，开发者不必直接写底层通信逻辑。