如何评价微信新推出的WXS语言?

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。WXS 脚本语言公测 | 微信公众平台 开发者社区 。号称 『wxs 目前在 iOS 设备的效率,会比JS快 2~20倍。在 Android 则无差异。』
关注者
503
被浏览
60,802

快?Yes and no,是也不是。

=====

微信小程序的架构

微信小程序的架构分为 app-service 和 page-frame,分别运行于不同的线程。

你在开发时写的所有 JS 都是运行在 app-service 线程里的,而每个页面各自的 WXML/WXSS 则运行在 page-frame 中。app-service 与 page-frame 之间通过桥协议通信(包括 setData 调用、canvas指令和各种DOM事件),涉及消息序列化、跨线程通信与evaluateJavascript()。

这个架构的好处是:

  1. 分开了业务主线程和显示界面,即便业务主线程非常繁忙,也不会阻塞用户在 page-frame 上的交互。
  2. 一个小程序可以有多个 page-frame (webview),页面间切换动画比SPA更流畅。

坏处是:

  1. 在 page-frame 上无法调用业务 JS。
  2. 跨线程通信的成本很高,不适合需要频繁通信的场景。
  3. 业务 JS 无法直接控制 DOM。

=====

引入WXS

针对微信小程序架构的缺点,微信团队推出了 WXS。

WXS 就是在 page-frame 中运行的 JS,可以对 view 数据做一些变换。

WXS 对性能的贡献就只有一点:与 WXML 是在同一个线程运行的,避免了跨线程通信的开销

别的性能上的提升?完全没有。

一个例子:

编译前的代码

var getMax = function(array) {
  var max = undefined;
  for (var i = 0; i < array.length; ++i) {
    max = max === undefined ?
      array[i] :
      (max >= array[i] ? max : array[i]);
  }
  return max;
}

module.exports.getMax = getMax;

编译后的代码

function np_0() {
  var nv_module = {
    nv_exports: {}
  };
  var nv_getMax = (function (nv_array) {
    var nv_max = undefined;
    for (var nv_i = 0; nv_i < nv_array.nv_length; ++nv_i) {
      nv_max = nv_max === undefined ?
        nv_array[((nt_2 = (nv_i), 'Number' === nt_2.nv_constructor ?
          nt_2 :
          "nv_" + nt_2))] :
        (
          nv_max >= nv_array[
            (
              (nt_0 = (nv_i),
                'Number' === nt_0.nv_constructor ?
                nt_0 :
                "nv_" + nt_0)
            )] ?
          nv_max :
          nv_array[(
            (
              nt_1 = (nv_i), 'Number' === nt_1.nv_constructor ?
              nt_1 :
              "nv_" + nt_1
            )
          )]
        )
    };
    return (nv_max)
  });
  nv_module.nv_exports.nv_getMax = nv_getMax;
  return nv_module.nv_exports;
}

可以看到,基本没有什么变化,循环还是那个循环,性能在哪里?

实测也是比原始代码慢 75%

wxs vs js · jsPerf

======

结论

WXS 是在微信小程序 page-frame 上运行的,在性能上的优化是在一定程度上缓解了微信小程序架构中跨线程通信的开销。脱离这个场景与 JS 相比则没有任何性能优势。


相关:鲁小夫:人民日报微信小程序报纸的展示是如何实现的?