优化JsBridge通信性能，让你的页面飞起来
2023-11-15 02:17:44
JSBridge通信时间测试
每一次想要表达一些观点，却又觉得有太多的花样和点子，手速根本跟不上脑子的运转速度，经常超时被举报。那么今天就整理一下我最近的笔记吧，从JsBridge 通信耗时测试开始，后面统称JsB。
在之前的hybrid项目中，遇到过一个卡顿的问题，主要是当JsB传递的数据越大时，页面就越容易出现卡顿。一时之间，没有找到合适的解决方案，只好通过一些曲线救国的办法来规避。后来经过一段时间的摸索和分析，终于找到了问题所在，今天就来和大家分享一下。
现象复现
为了便于理解，我们先复现一下这个现象。在项目中，我们使用了一个第三方库来实现JsB通信，代码如下：
// js 调用原生方法
window.WebViewJavascriptBridge.callHandler(
'functionName',
{ param: 'test' },
function(response) {
// 原生方法回调
}
);
// 原生调用 js 方法
WebViewJavascriptBridge.registerHandler(
'functionName',
function(data, responseCallback) {
// js 方法
responseCallback({ param: 'ok' });
}
);
当JsB传递的数据量较小的时候，页面表现正常，不会出现卡顿。但是，当JsB传递的数据量超过一定值（比如100KB）时，页面就会出现明显的卡顿。
原因分析
经过分析，我们发现问题出在数据传递的方式上。第三方库默认使用的是同步 的方式来传递数据，即在JsB调用原生方法时，会阻塞后续代码的执行，直到原生方法返回结果。当传递的数据量较小的时候，这种方式并不会造成明显的性能问题。但是，当传递的数据量较大时，就会导致页面出现卡顿。
解决方案
为了解决这个问题，我们可以使用异步 的方式来传递数据。具体做法是，在JsB调用原生方法时，不阻塞后续代码的执行，而是通过回调函数来处理原生方法的返回结果。
修改后的代码如下：
// js 调用原生方法
window.WebViewJavascriptBridge.callHandler(
'functionName',
{ param: 'test' },
function(response) {
// 原生方法回调
}
);
// 原生调用 js 方法
WebViewJavascriptBridge.registerHandler(
'functionName',
function(data, responseCallback) {
// js 方法
setTimeout(() => {
responseCallback({ param: 'ok' });
}, 0);
}
);
通过使用异步的方式来传递数据，页面就不会出现卡顿了。这是因为，在JsB调用原生方法时，后续代码不会被阻塞，页面可以继续渲染。当原生方法返回结果时，通过回调函数来处理，不会影响页面的渲染。
总结
通过对JsB通信时间测试的分析，我们发现可以使用异步的方式来传递数据，以避免页面出现卡顿。这种方法可以有效地提高页面的性能，为用户提供更好的体验。
希望这篇文章对大家有所帮助。如果大家还有什么其他问题，欢迎随时留言交流。
