微信小程序 Skyline 渲染引擎实战：worklet 动画从原理到落地

小程序 WebView 渲染的固有瓶颈：长列表滚动掉帧、复杂动画卡顿、手势跟手性差。Skyline 渲染引擎就是为了解决这些问题而生——单线程渲染模型、worklet 在渲染线程直接跑动画逻辑、组件粒度的滚动容器。这篇讲清楚 Skyline 的核心概念和 worklet 动画的实战写法。

一、Skyline 和 WebView 的本质区别

WebView 渲染模式下，小程序的渲染层跑在 WebView 里，逻辑层跑在独立的 JsCore 线程，两层之间靠 Native 桥通信。一个简单的 setData 动画要经历：

逻辑层执行 → 序列化 → Native 转发 → 反序列化 → WebView 渲染 → 帧绘制

一次跨线程通信的耗时在低端机上轻松超过 16ms，这就是动画卡顿的根源。

Skyline 的三个关键改变：

1. 渲染线程直接执行动画逻辑（worklet 机制），数据不过逻辑层的桥
2. 组件级滚动：scroll-view 自己就是滚动容器，不依赖页面整体滚动
3. 禁用树摇不友好的 CSS 特性，布局引擎自研，性能可预期

二、开启 Skyline

2.1 全局配置

// app.json
{
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "defaultContentBox": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "lazyCodeLoading": "requiredComponents",
  "renderer": "skyline"
}

三个配置项的含义：

• defaultDisplayBlock: true：view 默认块级布局（对齐 Web 习惯）
• defaultContentBox: true：box-sizing 默认 content-box（保持和 WebView 一致）
• sdkVersionBegin/End：基础库版本区间，区间外的版本自动回退 WebView

2.2 按页面混合开启

不必全量切换，可以页面粒度渐进迁移：

// pages/skyline-demo/skyline-demo.json
{
  "renderer": "skyline",
  "componentFramework": "glass-easel",
  "navigationStyle": "custom",
  "disableScroll": true
}

硬性要求：Skyline 页面必须 navigationStyle: custom（自绘导航栏），且不支持页面全局滚动——滚动必须放在 scroll-view 里。

三、worklet：跑在渲染线程的函数

worklet 是 Skyline 的灵魂。被标记为 worklet 的函数会被编译后发送到渲染线程执行，动画逻辑不再经过逻辑层。

3.1 基本用法

// pages/gesture/index.js
Page({
  onReady() {
    this.applyAnimatedStyle(
      '.target',   // 选择器
      () => {
        'worklet'
        return {
          transform: `translate(${sharedX.value}px, ${sharedY.value}px)`
        }
      }
    )
  }
})

注意 'worklet' 这个字符串指令——它标记函数体在渲染线程执行。

3.2 共享变量 shared value

逻辑层和渲染线程之间传"活的值"，靠 wx.worklet.shared：

const { shared, timing } = wx.worklet

Page({
  onLoad() {
    // 创建共享变量，逻辑层和渲染线程都能访问
    this.progress = shared(0)
    this.offsetX = shared(0)
  },
  onTap() {
    // 逻辑层修改 → 渲染线程立即感知，无需 setData
    this.progress.value = 1
  },
  onReady() {
    this.applyAnimatedStyle('.circle', () => {
      'worklet'
      return {
        opacity: this.progress.value,
        transform: `scale(${1 + this.progress.value})`
      }
    })
  }
})

关键点：shared 变量的读写不走 setData，改 .value 的瞬间渲染线程同步更新——这就是 60fps 动画的基础。

3.3 手势系统：跟手拖拽

经典案例：拖拽小球，松手回弹。

const { shared, timing } = wx.worklet

Page({
  onLoad() {
    this.x = shared(0)
    this.y = shared(0)
  },
  onReady() {
    this.applyAnimatedStyle('.ball', () => {
      'worklet'
      return {
        transform: `translate(${this.x.value}px, ${this.y.value}px)`
      }
    })
  },

  // 手势处理：pan-gesture-handler 组件回调
  handlePan(evt) {
    'worklet'
    if (evt.state === 1) {
      // 手势开始，记录当前位置
      this._startX = this.x.value
      this._startY = this.y.value
    } else if (evt.state === 2) {
      // 手势进行中，直接更新共享变量——完全在渲染线程，不掉帧
      this.x.value = this._startX + evt.deltaX
      this.y.value = this._startY + evt.deltaY
    } else if (evt.state === 3) {
      // 手势结束，松手回弹到原点
      this.x.value = timing(0, { duration: 300 })
      this.y.value = timing(0, { duration: 300 })
    }
  }
})

<!-- WXML：手势节点包裹目标元素 -->
<pan-gesture-handler worklet:ongesture="handlePan">
  <view class="ball"></view>
</pan-gesture-handler>

对比 WebView 时代的实现：bindtouchmove 里 setData → 跨线程 → 渲染，帧率靠运气。Skyline 版本的拖拽全程在渲染线程闭环，即使低端机也稳 60fps。

四、scroll-view 的变化

Skyline 下 scroll-view 是强化重点：

4.1 worklet 滚动联动

头部图片跟随滚动缩放（经典视差效果）：

Page({
  onLoad() {
    this.scrollY = shared(0)
  },
  onScrollWorklet(evt) {
    'worklet'
    this.scrollY.value = evt.detail.scrollTop
  },
  onReady() {
    this.applyAnimatedStyle('.header-img', () => {
      'worklet'
      const scale = Math.max(1 - this.scrollY.value / 300, 0.6)
      return {
        transform: `scale(${scale})`,
        transformOrigin: 'center top'
      }
    })
  }
})

<scroll-view scroll-y type="list" worklet:onscroll="onScrollWorklet">
  <image class="header-img" src="/images/banner.jpg" mode="aspectFill" />
  <view class="content">...</view>
</scroll-view>

4.2 sticky 吸顶直接支持

<scroll-view type="list">
  <sticky-section>
    <view slot="sticky" class="section-title">分组 A</view>
    <view class="item">1</view>
    <view class="item">2</view>
  </sticky-section>
</scroll-view>

不再需要 IntersectionObserver 自己算吸顶，性能还更好。

4.3 列表虚拟化：grid-view / list-view

<scroll-view type="custom">
  <grid-view type="grid" cross-axis-count="2" gap="16">
    <view wx:for="{{items}}" wx:key="id" class="card">...</view>
  </grid-view>
</scroll-view>

grid-view/list-view 是 Skyline 专属的虚拟化容器，自动按需渲染可视区节点，十万级数据量也不会内存爆炸——这是长列表场景切换 Skyline 的最大理由。

五、迁移成本与兼容性

Skyline 不是免费的午餐，迁移前评估这些点：

推荐迁移策略：新页面直接 Skyline，老页面按性能痛点排序渐进迁移。列表页、动画重的运营页优先，表单页留在 WebView 性价比不高。

六、调试技巧

1. 确认当前页面渲染引擎：

console.log(this.renderer)  // 'webview' 或 'skyline'

2. 开发者工具开启 Skyline 调试：详情 → 本地设置 → 启用 Skyline 渲染调试。真机性能对比用性能面板的 FPS 曲线。
3. worklet 里不能 console.log 逻辑层对象：worklet 函数体内访问的变量必须是 shared 值或 worklet 函数，访问普通 JS 变量会静默失败，注意排查。

七、避坑清单

写在最后

Skyline 的价值判断很简单：你的页面有没有"高频通信 + 动画 + 长列表"的组合拳需求。有，迁移收益巨大；没有，WebView 继续用。worklet 的编程范式（shared value + 渲染线程函数）和 Flutter/RN 的思路殊途同归，掌握它对理解跨端渲染架构也有帮助。