Skyline Overview

Skyline 渲染引擎概览

适用场景

• 初次了解 Skyline 渲染引擎
• 评估是否迁移到 Skyline
• 查看 Skyline 版本更新日志
• 了解与 WebView 的差异和兼容性
• 获取迁移步骤和最佳实践

核心概念

Skyline 是什么？

Skyline 是微信小程序的新一代渲染引擎，相比 WebView 有以下优势：

环境要求

快速开始配置

必需配置（app.json）

{
  "renderer": "skyline",
  "lazyCodeLoading": "requiredComponents",
  "componentFramework": "glass-easel",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "defaultContentBox": true,
      "tagNameStyleIsolation": "legacy",
      "enableScrollViewAutoSize": true,
      "keyframeStyleIsolation": "legacy"
    }
  }
}

页面配置（page.json）

{
  "navigationStyle": "custom",
  "disableScroll": true
}

⚠️ MUST: Skyline 不支持原生导航栏，必须设置 navigationStyle: custom 并自行实现导航栏。

文档索引

根据需求快速定位（路径相对于 references/）：

强制规则

MUST（必须遵守）

1. 配置完整：app.json 必须包含 renderer、lazyCodeLoading、componentFramework 三项 2. 自定义导航：所有 Skyline 页面必须设置 navigationStyle: custom 3. 局部滚动：使用 scroll-view 实现滚动，禁止依赖全局滚动 4. 文本组件：纯文本必须用 <text> 组件包裹 5. 预加载：跳转 Skyline 页面前调用 wx.preloadSkylineView()

NEVER（禁止行为）

1. NEVER 使用原生导航栏配置（Skyline 不支持） 2. NEVER 依赖 Page.onPageScroll 事件（使用 scroll-view 的滚动事件替代） 3. NEVER 在 Skyline 页面使用 web-view 组件 4. NEVER 假设所有 CSS 属性都支持（参考 WXSS 支持文档）

迁移检查清单

配置检查

• [ ] app.json 添加 renderer: "skyline"
• [ ] app.json 添加 lazyCodeLoading: "requiredComponents"
• [ ] app.json 添加 componentFramework: "glass-easel"
• [ ] app.json 添加 rendererOptions.skyline 配置
• [ ] 页面 json 添加 navigationStyle: "custom"
• [ ] 页面 json 添加 disableScroll: true

代码检查

• [ ] 实现自定义导航栏组件
• [ ] 全局滚动改为 scroll-view 局部滚动
• [ ] 纯文本用 <text> 包裹
• [ ] 检查 WXSS 属性支持情况
• [ ] 测试原生组件（map/canvas/video）显示

发布检查

• [ ] 配置 We 分析 AB 实验（灰度发布）
• [ ] 测试 WebView 降级兼容性
• [ ] 低版本微信表现正常

判断当前渲染引擎

JS 方式

Page({
  onLoad() {
    // 页面/组件实例上有 renderer 属性
    console.log(this.renderer) // 'skyline' 或 'webview'
  }
})

API 方式

// 异步方式
wx.getSkylineInfo({
  success(res) {
    console.log(res.isSupported) // 是否支持 Skyline
    console.log(res.version)     // Skyline 版本号
  }
})

// 同步方式
const info = wx.getSkylineInfoSync()
console.log(info.isSupported, info.version)

性能优化提示

预加载 Skyline 环境

// 在可能跳转到 Skyline 页面的页面中
Page({
  onShow() {
    // 延迟调用避免阻塞当前页面
    setTimeout(() => {
      wx.preloadSkylineView()
    }, 500)
  }
})

长列表优化

<!-- 列表项必须作为 scroll-view 直接子节点 -->
<scroll-view type="list" scroll-y>
  <view wx:for="{{list}}" wx:key="id">{{item.name}}</view>
</scroll-view>

<!-- 启用样式共享 -->
<scroll-view type="list" scroll-y>
  <view wx:for="{{list}}" wx:key="id" list-item>{{item.name}}</view>
</scroll-view>

相关技能

References 目录结构

references/
├── api/
│   ├── getSkylineInfo.md
│   └── preloadSkylineView.md
├── changelog/
│   └── changelog.md
├── introduction/
│   ├── component-support.md
│   ├── features.md
│   └── overview.md
├── migration/
│   ├── best-practice.md
│   ├── compatibility.md
│   ├── getting-started.md
│   └── release.md
└── performance/
    └── comparison.md

wx.getSkylineInfo / wx.getSkylineInfoSync

获取当前运行环境对于 Skyline 渲染引擎的支持情况。

基础信息

wx.getSkylineInfo (异步)

参数

返回值 (res)

reason 可能值

示例

wx.getSkylineInfo({
  success(res) {
    console.log('Skyline 支持:', res.isSupported)
    console.log('Skyline 版本:', res.version)
    
    if (!res.isSupported) {
      console.log('不支持原因:', res.reason)
    }
  },
  fail(err) {
    console.error('获取 Skyline 信息失败:', err)
  }
})

wx.getSkylineInfoSync (同步)

返回值

与异步版本的 res 相同。

示例

const info = wx.getSkylineInfoSync()

console.log('Skyline 支持:', info.isSupported)
console.log('Skyline 版本:', info.version)

if (!info.isSupported) {
  console.log('不支持原因:', info.reason)
}

使用场景

判断是否启用 Skyline 特性

Page({
  onLoad() {
    const info = wx.getSkylineInfoSync()
    
    if (info.isSupported) {
      // 使用 Skyline 专属特性
      this.initWorkletAnimation()
    } else {
      // 降级方案
      this.initFallbackAnimation()
    }
  }
})

日志上报

App({
  onLaunch() {
    const info = wx.getSkylineInfoSync()
    
    // 上报 Skyline 使用情况
    wx.reportAnalytics('skyline_status', {
      supported: info.isSupported,
      version: info.version || 'N/A',
      reason: info.reason || 'N/A'
    })
  }
})

调试信息展示

Page({
  data: {
    debugInfo: ''
  },
  
  onLoad() {
    const info = wx.getSkylineInfoSync()
    
    this.setData({
      debugInfo: `Skyline: ${info.isSupported ? '✓' : '✗'} v${info.version || 'N/A'}`
    })
  }
})

与 this.renderer 的区别

Page({
  onLoad() {
    // API 方式 - 获取全局支持情况
    const info = wx.getSkylineInfoSync()
    console.log('全局支持:', info.isSupported)
    
    // 实例属性 - 获取当前页面实际使用的渲染器
    console.log('当前页面:', this.renderer)  // 'skyline' 或 'webview'
  }
})

注意事项

1. 版本要求：需要基础库 2.26.2+ 2. 不支持 Promise：异步版本不支持 Promise 风格调用 3. AB 实验影响：即使 isSupported 为 true，实际渲染器仍受 AB 实验控制

wx.preloadSkylineView

预加载下个页面所需要的 Skyline 运行环境。

基础信息

功能说明

微信客户端默认预加载 WebView 环境（因为大多数小程序使用 WebView），不会自动预加载 Skyline 环境。

调用此接口可以提前预加载 Skyline 运行环境，使后续跳转到 Skyline 页面时更快。

参数

基础示例

wx.preloadSkylineView({
  success() {
    console.log('Skyline 环境预加载成功')
  },
  fail(err) {
    console.error('Skyline 环境预加载失败:', err)
  }
})

最佳实践

1. 在 onShow 中延迟调用

Page({
  onShow() {
    // 延迟调用，避免阻塞当前页面渲染
    setTimeout(() => {
      wx.preloadSkylineView()
    }, 500)
  }
})

说明：在 onShow 而非 onLoad 中调用，确保页面返回时也能重新预加载。

2. 在可能跳转的页面调用

// pages/list/list.js
// 列表页，用户可能点击进入 Skyline 渲染的详情页

Page({
  onShow() {
    // 预加载 Skyline 环境
    setTimeout(() => {
      wx.preloadSkylineView()
    }, 300)
  },
  
  onItemTap(e) {
    const { id } = e.currentTarget.dataset
    // 跳转到 Skyline 详情页
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    })
  }
})

3. 条件预加载

Page({
  onShow() {
    // 只在支持 Skyline 的环境预加载
    const info = wx.getSkylineInfoSync()
    
    if (info.isSupported) {
      setTimeout(() => {
        wx.preloadSkylineView()
      }, 500)
    }
  }
})

4. 结合路由判断

// app.js
App({
  onLaunch() {
    // 记录即将访问的页面
    this.nextPage = null
  },
  
  preloadIfNeeded(nextPage) {
    // 根据目标页面决定是否预加载
    const skylinePages = [
      'pages/detail/detail',
      'pages/animation/animation'
    ]
    
    if (skylinePages.includes(nextPage)) {
      wx.preloadSkylineView()
    }
  }
})

调用时机建议

性能影响

正面影响

• 首次跳转 Skyline 页面时间减少
• 减少白屏时间
• 提升用户体验

注意事项

• 预加载会占用一定内存
• 频繁调用不会有额外收益（环境已加载）
• 建议配合条件判断，避免不必要的预加载

配合其他优化

1. 配合资源预加载

Page({
  onShow() {
    // 预加载 Skyline 环境
    wx.preloadSkylineView()
    
    // 预加载图片资源
    wx.getImageInfo({
      src: 'https://example.com/hero.jpg'
    })
  }
})

2. 配合数据预取

Page({
  onShow() {
    // 预加载 Skyline 环境
    wx.preloadSkylineView()
    
    // 预取下一页数据
    this.prefetchDetailData()
  },
  
  prefetchDetailData() {
    // 提前获取详情页数据
  }
})

与预加载分包配合

// 先预加载分包，再预加载 Skyline
wx.preloadSubPackage({
  package: 'packageA',
  success() {
    // 分包加载完成后预加载 Skyline
    wx.preloadSkylineView()
  }
})

注意事项

1. 调用时机：避免在关键渲染路径上同步调用 2. 延迟执行：使用 setTimeout 延迟，避免影响当前页面 3. 条件判断：只在需要跳转 Skyline 页面时预加载 4. 重复调用：多次调用不会报错，但无额外收益

Skyline 更新日志

Skyline 渲染引擎的版本号可通过 wx.getSkylineInfo() 获取。

1.4.15 (2026-01-09)

新增

• image 组件的 preload 属性，用于图片预加载

优化

• 当页面被遮挡时自动停止动画，减少资源消耗

修复

• iOS 上某个导致崩溃的问题
• 鸿蒙平台无障碍功能导致的闪退
• fixed 定位元素移动后未重新计算层级的问题
• box-shadow 在 CSS 动画中不生效及导致的闪退问题
• gif/apng 动图帧率错误的问题
• swiper 组件在某些情况下未触发 change 事件的问题
• 在 font 和 animation 简写属性中无法使用 CSS 变量的问题
• 安卓平台无障碍功能导致的闪退
• 图片预加载配置项不生效的问题
• scroll-view 组件在首次加载时出现跳动的问题

1.4.14 (2025-12-18)

新增

• text 组件支持行内显示
• image 组件支持 loadstart 事件

优化

• scroll-view 的滚动锚定行为，提升内容变化时的稳定性
• HTTP 客户端，移除并发限制以提升网络请求性能

修复

• image 组件在特定模式下图片不显示的问题
• 组件事件回调中潜在的崩溃问题
• iOS 上 JavaScript 回调导致的崩溃
• 文本节点更新时可能引发的死锁问题
• 键盘高度变化事件输出错误值的问题
• IntersectionObserver 在未设置 thresholds 时无法触发回调的问题
• 移除子组件操作时可能发生的崩溃
• 布局节点访问父节点时可能导致的崩溃
• 无障碍功能在鸿蒙系统上的崩溃问题
• swiper 组件应始终触发 change 事件
• scroll-view 滑动时首次加载内容跳动的问题

1.4.13 (2025-11-25)

新增

• 支持 CSS :host 选择器

优化

• scroll-view 滚动性能，提升渲染效率

修复

• gap 属性与 CSS 变量结合时失效的问题
• flex 布局中使用 gap 导致元素展示不全的问题
• snapshot 组件 pointer-events 属性不生效的问题
• 图片在尺寸为零时渲染错误的问题
• em 单位计算中基准 fontSize 错误的问题
• Intersection Observer 在某些情况下崩溃的问题
• svg 图片加载时可能出现的死循环问题
• 使用 mask-image 展示 svg 图片时出现灰色边框的问题
• open-container 组件纵向测量不准确的问题
• 图片闪烁问题
• 动图设置目标尺寸后显示异常的问题
• 伪元素节点连接问题导致交互失效

1.4.12 (2025-10-31)

新增

• layout paragraph 支持无障碍功能

优化

• 文本空白字符处理流程

修复

• grid-view 布局异常
• IntersectionObserver attached 时机失效
• scroll-view 下拉刷新动画异常
• iOS 平台原生视图异常消失
• 横向手势返回操作异常
• IntersectionObserver target 节点异常时的崩溃

1.4.11 (2025-09-15)

修复

• 文本末行换行符溢出仍出省略号
• input 取消 composite 后草稿字符丢失
• scroll-view scroll-anchoring 偶现意外跳动
• swiper 开启循环显示后 animateTo 动画错误
• scroll-view 自动撑高问题
• 自定义路由 barrierDismissible 两次返回
• 伪元素节点消失仍在播放 css animation
• 文本中 span 意外换行
• scroll-view 不足一屏时不触发 lower/upper 事件
• input/textarea maxlength 输入 emoji 闪退

1.4.10 (2025-08-28)

新增

• text 增加 trailing-spaces 属性支持多行文本末行末尾预留空间
• IntersectionObserver 支持多次监听
• open-container 支持通过接口方式触发打开

优化

• css animation 在节点不可见时停止动画
• scroll-view scroll-anchoring 支持度优化
• open-container 手势返回时支持上下拖动页面

修复

• swiper 开启自动播放后，隐藏 & 显示会失效
• image gif 动画修改 src 后动画速度异常
• word-break: break-all 需要断开数字、英文、符号
• grid-view 增加子节点后白屏
• swiper 更新高度后动画失效
• scroll-view 嵌套 swiper 时可能导致切换无动画
• 图片渲染变形
• open-container 手势返回动画消失
• 键盘上推后无法恢复

1.4.9 (2025-08-06)

新增

• large-image 支持大图渲染

优化

• css animation 无限循环动画自动开启 repaint boundary 避免大面积重绘
• text 绘制性能
• image 对 svg 格式的判断
• 渲染树结构优化

修复

• span 丢失问题
• sticky-header 动态增加内容崩溃
• gif 动画消失
• swiper animation 被打断时 bind:change 和 bind:animationfinished 没有回调
• grid-view 删除并交换元素后布局错位
• css 文本 baseline shortcut 问题
• line-height 无法更新回 normal 值
• swiper current 更新问题
• picker-view indicator-style 闪退
• iOS input 失焦的同时无法 focus
• 某些白屏及 crash 问题

1.4.6 (2025-04-08)

新增

• HarmonyOS 支持

优化

• 自定义字体隔离
• 开发者工具内核升级

修复

• 两个 sticky-section 滚动速度不一致
• 调整文字选区的默认背景色
• 若干 IntersectionListener 相关接口表现异常及 crash
• picker-view 设置非法值出现滚动
• swiper animationfinish 返回 current 参数不正确
• input 字体样式错误
• picker-view-column 无子项时崩溃
• 循环动画时无法触发 scroll-into-view
• swiper 更新高度后动画失效

1.4.1 (2024-10-16)

新增

• flex 布局支持 gap
• worklet 中 scroll-view scrollTo 支持传递 velocity 参数

优化

• jsbinding 调用耗时
• swiper 内嵌 scroll-view 滚动切换体验问题

修复

• css transition delay 动画闪烁问题
• swiper 设置 next margin/snap-to-edge 后隐藏再显示时会消失
• swiper 开启自动播放后隐藏再显示会失效
• picker-view 样式设置失败
• 键盘上推无法恢复
• 若干其他问题

1.4.0 (2024-09-06)

新增

• sticky-header 支持吸顶与否的状态回调
• scroll-view 支持 scroll-anchoring
• list-view/*-builder 支持设置 background-color
• swiper 支持 snap-to-edge

优化

• 图片布局尺寸变化时使用布局尺寸渲染
• 弱网下图片加载优化
• 内存释放优化
• 布局节点内存大小、缓存性能优化
• 布局精度

1.3.0 (2024-04-19)

新增

• 支持一般兄弟节点选择器（a ~ b {}）
• 支持紧邻兄弟节点选择器（a + b {}）
• 支持 css :not() 伪类
• 支持 css :only-child() 伪类
• 支持 css :empty() 伪类
• 支持 css inline-flex 布局
• 开发者工具支持 DarkMode 调试

优化

• position 布局增加 cache
• wxss 解析耗时
• transform paint 耗时
• transition/animation 事件派发机制
• 字体模块预热
• 内存占用

1.2.0 (2024-01-08)

新增

• 开发者工具支持真机调试
• CSS 支持 flex order
• CSS 支持 will-change: contents
• 支持全局跨页面组件
• 支持 apng 动图
• scroll-view 组件支持 builder 模式
• picker-view 组件支持 indicator-style 属性
• input 键盘动画提供 worklet 回调
• textarea 组件支持 linechange 事件
• worklet 增加 ref 机制
• worklet 支持 scrollTo 接口

1.1.0 (2023-11-06)

新增

• CSS 支持 position fixed
• span/text 组件里的布局节点支持 display inline-block
• draggable-sheet 滚动容器组件
• swiper 组件支持新的交互动画类型
• scroll-view 组件支持 type="nested"
• input 组件支持 cursor-color 属性
• input 组件支持 composition 事件
• input 组件支持 selectionchange 事件
• 自定义路由增加 fullscreenDrag 配置项
• 支持页面级别配置 rendererOptions

1.0.0 (2023-05-11)

新增

• CSS 支持 calc 函数
• CSS 支持伪元素 before 和 after
• CSS 支持 var 函数
• CSS 支持 mask-image 属性
• 支持 picker-view 组件
• scroll-view 组件支持 clip 属性
• scroll-view/grid-view/list-view/sticky-header/sticky-section 组件支持 padding 属性
• scroll-view 组件直接子节点支持 CSS margin
• scroll-view 组件支持 min-drag-distance 属性
• text/span 组件支持内联 view 等普通节点
• 支持新版本组件框架 glass-easel

---

更多历史版本请查看官方文档。

Skyline 组件支持情况

通用特性支持

组件支持总表

完全支持的组件

基本支持的组件

暂不支持的组件

Skyline 新增组件

布局组件

截图组件

手势组件

组件使用注意事项

text 组件

<!-- ✅ 正确：纯文本用 text 包裹 -->
<view>
  <text>这是文本内容</text>
</view>

<!-- ❌ 错误：直接放文本 -->
<view>这是文本内容</view>

<!-- ✅ 文本省略：必须用 text 组件 -->
<text style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
  很长的文本...
</text>

<!-- ✅ 多行省略：使用 max-lines -->
<text max-lines="2" style="overflow: hidden;">
  很长的多行文本...
</text>

scroll-view 组件

<!-- ✅ 正确：指定 type="list" -->
<scroll-view type="list" scroll-y style="height: 100%;">
  <view wx:for="{{list}}" wx:key="id">{{item}}</view>
</scroll-view>

<!-- 横向滚动需配合 flex 布局 -->
<scroll-view type="list" scroll-x enable-flex style="display: flex;">
  <view wx:for="{{list}}" wx:key="id" style="flex-shrink: 0;">{{item}}</view>
</scroll-view>

span 组件（内联混排）

<!-- 文本与图片内联 -->
<span>
  <text>前置文本</text>
  <image src="/images/icon.png" style="width: 20px; height: 20px;" />
  <text>后置文本</text>
</span>

navigator 组件

<!-- ✅ 正确：只嵌套 text -->
<navigator url="/pages/detail/detail">
  <text>点击跳转</text>
</navigator>

<!-- ❌ 错误：嵌套其他组件 -->
<navigator url="/pages/detail/detail">
  <view>不能这样用</view>
</navigator>

原生组件调试

以下组件在开发者工具暂不支持调试，请使用真机预览：

• map
• canvas
• video
• camera

// 判断是否开发者工具环境
const systemInfo = wx.getSystemInfoSync()
if (systemInfo.platform === 'devtools') {
  console.log('原生组件请使用真机预览')
}

Skyline 功能特性

特性总览

Skyline 以性能为首要目标，在 CSS 特性上保留更现代的子集，同时新增大量类原生体验的特性。

一、性能优化特性

1.1 单线程组件框架 (glass-easel)

Skyline 默认启用 glass-easel 组件框架：

• 建树流程耗时降低 30%-40%
• setData 调用无通信和序列化开销

// app.json
{
  "componentFramework": "glass-easel"
}

1.2 组件下沉

部分内置组件从 JS 下沉到原生实现：

• view、text、image 等基础组件下沉
• 创建组件开销降低 30%
• scroll-view、swiper 使用原生实现，性能更好

1.3 长列表按需渲染

scroll-view 自动按需渲染直接子节点：

<!-- 每个直接子节点按需渲染 -->
<scroll-view type="list" scroll-y>
  <view wx:for="{{list}}" wx:key="id">{{item.name}}</view>
</scroll-view>

支持 lazy mount 机制优化首次渲染。

1.4 WXSS 预编译

• 构建时将 WXSS 预编译为二进制文件
• 运行时直接读取，无需解析
• 预编译比运行时解析快 5 倍以上

1.5 样式计算优化

• 精简 CSS 特性，简化计算流程
• 局部样式更新，避免 DOM 树多次遍历
• 基于 wx:for 的节点样式共享（声明 list-item）
• rpx 单位原生支持

<!-- 启用样式共享 -->
<view wx:for="{{list}}" wx:key="id" list-item>
  {{item.name}}
</view>

1.6 内存占用优化

• 多个 Skyline 页面共享同一渲染引擎实例
• 全局样式、公共代码、缓存资源可跨页共享
• 单页内存减少 35%，多页减少 50%+

二、全新交互动画体系

2.1 Worklet 动画

基于渲染线程同步运行的动画机制：

const offset = wx.worklet.shared(0)

// 在渲染线程执行
this.applyAnimatedStyle('.box', () => {
  'worklet'
  return {
    transform: `translateX(${offset.value}px)`
  }
})

// 触发动画
offset.value = wx.worklet.timing(100, { duration: 300 })

优势：动画逻辑在渲染线程同步执行，无延迟掉帧。

2.2 手势系统

原生级手势识别与协商：

<pan-gesture-handler onGestureEvent="onPan">
  <view class="draggable">可拖拽元素</view>
</pan-gesture-handler>

支持的手势组件：

• tap-gesture-handler - 点击
• double-tap-gesture-handler - 双击
• long-press-gesture-handler - 长按
• pan-gesture-handler - 拖动
• scale-gesture-handler - 缩放
• horizontal-drag-gesture-handler - 横向拖动
• vertical-drag-gesture-handler - 纵向拖动

手势协商：解决滚动容器下的手势冲突问题。

2.3 自定义路由

实现自定义页面转场动画：

// 使用预设路由
wx.navigateTo({
  url: '/pages/detail/detail',
  routeType: 'wx://cubeEffect'
})

// 或完全自定义
wx.router.addRouteBuilder('customFade', FadeRouteBuilder)
wx.navigateTo({
  url: '/pages/detail/detail',
  routeType: 'customFade'
})

2.4 共享元素动画

跨页面元素过渡：

<!-- 页面 A -->
<share-element key="hero">
  <image src="{{item.cover}}" />
</share-element>

<!-- 页面 B -->
<share-element key="hero">
  <image src="{{detail.cover}}" />
</share-element>

元素在页面切换时自动产生过渡动画。

2.5 内置组件扩展

scroll-view 增强

• 内置下拉刷新（优化动画）
• 下拉二楼交互
• sticky 吸顶组件
• 内容未溢出时也可滚动
• 更多控制属性（min-drag-distance、scrollend、isDrag）

swiper 原生实现

• 性能优于 WebView 的 transform 实现
• 支持更多交互动画类型

三、高级特性

3.1 grid-view 瀑布流

原生实现的网格和瀑布流布局：

<!-- 网格布局 -->
<grid-view type="aligned" cross-axis-count="3">
  <view wx:for="{{list}}" wx:key="id">{{item}}</view>
</grid-view>

<!-- 瀑布流布局 -->
<grid-view type="masonry" cross-axis-count="2">
  <view wx:for="{{list}}" wx:key="id">{{item}}</view>
</grid-view>

3.2 snapshot 截图组件

直接对 WXML 子树截图，替代 canvas 绘图：

<snapshot id="poster">
  <view class="poster-content">
    <!-- 复杂布局 -->
  </view>
</snapshot>

this.selectComponent('#poster').takeSnapshot({
  success(res) {
    // res.tempFilePath 是截图路径
  }
})

3.3 scroll-view 列表反转

聊天场景专用，从底部向上滚动：

<scroll-view type="list" scroll-y reverse>
  <view wx:for="{{messages}}" wx:key="id">{{item.content}}</view>
</scroll-view>

3.4 draggable-sheet 半屏组件

快速实现半屏可拖拽交互：

<draggable-sheet initial-child-size="0.5" snap>
  <view slot="content">
    <!-- 半屏内容 -->
  </view>
</draggable-sheet>

四、与 WebView 的差异

必须适配的差异

自动降级的特性

五、特性状态

更多计划特性请查看 更新日志。

Skyline 渲染引擎简介

什么是 Skyline？

Skyline 是微信小程序全新的渲染引擎，相比传统的 WebView 渲染，Skyline 采用更精简高效的渲染管线，提供更接近原生的性能体验。

为什么需要 Skyline？

小程序传统架构采用 AppService 和 WebView 的双线程模型。虽然 Web 技术有良好的兼容性和丰富的特性，但由于历史包袱和复杂的渲染流程，在移动端的性能表现与原生应用仍有差距。

Skyline 通过以下方式解决这些问题：

1. 独立渲染线程：Layout、Composite、Paint 等渲染任务在独立线程执行 2. 精简渲染管线：更现代化的 CSS 子集，避免复杂特性带来的性能损耗 3. 同步光栅化：解决快速滚动白屏、DOM 更新不同步等问题

架构对比

WebView 架构

┌─────────────────────────────────────┐
│          WebView 线程                │
│  JS 逻辑 → DOM 创建 → CSS 解析      │
│  → 样式计算 → Layout → Paint        │
└─────────────────────────────────────┘
           ↑ JSBridge ↓
┌─────────────────────────────────────┐
│        AppService 线程              │
└─────────────────────────────────────┘

问题：WebView 上执行过多 JS 逻辑会阻塞渲染，导致界面卡顿。

Skyline 架构

┌─────────────────────────────────────┐
│        AppService 线程              │
│   JS 逻辑 + DOM 树创建              │
└─────────────────────────────────────┘
           ↓ 直接通信
┌─────────────────────────────────────┐
│         渲染线程                     │
│   Layout → Composite → Paint        │
└─────────────────────────────────────┘

优势：

• 界面不被逻辑阻塞，减少卡顿
• 无需为每个页面创建 WebView 实例，减少内存和时间开销
• 页面间共享更多资源
• 无需 JSBridge 通信，大幅减少通信开销

Skyline 核心优势

1. 更好的性能

2. 解决 WebView 固有问题

• 同层渲染更稳定：原生组件融合到渲染流程，不会意外失效
• 无页面恢复问题：iOS WKWebView 被系统回收后的页面恢复问题不再存在
• 无页面栈限制：连续 Skyline 页面跳转不再有 10 层限制

3. 全新交互动画体系

• Worklet 动画：在渲染线程同步执行动画，无延迟掉帧
• 手势系统：原生级手势识别和协商机制
• 自定义路由：页面间自定义转场动画
• 共享元素动画：跨页面元素过渡效果

4. 高级特性

• grid-view 瀑布流：原生实现的网格和瀑布流布局
• snapshot 截图：直接对 WXML 子树截图
• scroll-view 增强：下拉刷新、二楼交互、sticky 吸顶等

兼容性说明

与 WebView 混合使用

Skyline 支持按页面或分包粒度开启，可与 WebView 页面混跳：

// page.json - 指定单个页面使用 Skyline
{
  "renderer": "skyline"
}

// app.json - 指定分包使用 Skyline
{
  "subPackages": [
    {
      "root": "packageA",
      "renderer": "skyline"
    }
  ]
}

自动降级

在不支持 Skyline 的环境下，自动降级为 WebView 渲染。只要适配了 Skyline 的代码遵循 Web 标准 CSS 子集，WebView 也能正确渲染。

适用场景

推荐使用 Skyline

• 需要流畅动画效果的页面
• 长列表、复杂滚动交互
• 自定义页面转场动画
• 内存敏感的小程序

暂不建议使用 Skyline

• 大量依赖 web-view 组件的页面
• 使用了大量不支持 CSS 特性的页面（迁移成本高）

下一步

1. 查看 功能特性 了解 Skyline 提供的新能力 2. 查看 组件支持 确认组件可用性 3. 开始 迁移指南

Skyline 最佳实践

一、按需注入

Skyline 依赖按需注入特性，建议在适配 Skyline 前先开启并测试：

// app.json
{
  "lazyCodeLoading": "requiredComponents"
}

注意：按需注入可能影响部分代码行为，请提前测试。

二、渐进式迁移

迁移策略

页面粒度迁移

// 某个页面的 page.json
{
  "renderer": "skyline",
  "navigationStyle": "custom",
  "disableScroll": true
}

分包粒度迁移

// app.json
{
  "subPackages": [
    {
      "root": "packageA",
      "renderer": "skyline",
      "componentFramework": "glass-easel"
    }
  ]
}

三、使用局部滚动

为什么不用全局滚动？

WebView 的全局滚动存在问题： 1. 固定元素需要 position: fixed，模拟局部滚动 2. 滚动相关自定义功能受限 3. 滚动条位置溢出

推荐布局模式

<!-- 导航栏 + 滚动区域 -->
<view class="page">
  <!-- 固定导航栏 -->
  <navbar title="页面标题" />
  
  <!-- 可滚动内容 -->
  <scroll-view type="list" scroll-y class="content">
    <view wx:for="{{list}}" wx:key="id">{{item}}</view>
  </scroll-view>
</view>

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  height: 0; /* 重要 */
}

兼容 WebView

上述布局在 WebView 下也能正确工作，确保降级兼容。

四、全局样式重置

推荐配置

// app.json
{
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "defaultContentBox": true,
      "tagNameStyleIsolation": "legacy",
      "enableScrollViewAutoSize": true,
      "keyframeStyleIsolation": "legacy"
    }
  }
}

全局 WXSS Reset

/* app.wxss 或页面 wxss */
page,
view,
text,
image,
button,
video,
map,
scroll-view,
swiper,
input,
textarea,
navigator {
  position: relative;
  background-origin: border-box;
  isolation: isolate;
}

page {
  height: 100%;
}

五、优化长列表性能

按需渲染

scroll-view 自动按需渲染直接子节点：

<!-- ✅ 列表项作为直接子节点 -->
<scroll-view type="list" scroll-y>
  <view wx:for="{{list}}" wx:key="id">{{item.name}}</view>
</scroll-view>

<!-- ❌ 列表项被包裹，无法按需渲染 -->
<scroll-view type="list" scroll-y>
  <view class="list-wrapper">
    <view wx:for="{{list}}" wx:key="id">{{item.name}}</view>
  </view>
</scroll-view>

样式共享

添加 list-item 声明启用样式共享：

<scroll-view type="list" scroll-y>
  <view wx:for="{{list}}" wx:key="id" list-item>
    {{item.name}}
  </view>
</scroll-view>

样式只计算一次，共享给所有相似节点。

六、预加载 Skyline 环境

微信客户端默认不预加载 Skyline 环境（WebView 为主），需手动预加载：

// 在可能跳转到 Skyline 页面的页面中
Page({
  onShow() {
    // 延迟调用，避免阻塞当前页面
    setTimeout(() => {
      wx.preloadSkylineView()
    }, 500)
  }
})

建议：在 onShow 中调用，确保页面返回时也能重新预加载。

七、使用增强特性

体验降级兼容

Skyline 增强特性在 WebView 下自动降级：

示例：自定义路由降级

// 相同代码，不同表现
wx.navigateTo({
  url: '/pages/detail/detail',
  routeType: 'wx://cubeEffect'  // Skyline 有动画，WebView 无动画
})

八、调试技巧

识别当前渲染引擎

1. 模拟器左上角：显示 renderer: skyline 2. vConsole 路由日志：... renderer: skyline 3. 代码判断：this.renderer === 'skyline'

快捷切换测试

开发版/体验版： 1. 打开菜单 > 开发调试 > Switch Render 2. 选择 Auto / WebView / Skyline

WXML 调试

1. 使用开发者工具 WXML 面板 2. 定位有问题的节点 3. 查看样式警告和计算值

九、性能监控

首屏性能

使用小程序性能监控工具对比 Skyline 和 WebView 首屏时间。

内存占用

多页面场景下对比内存占用：

• 单页：Skyline 减少 ~35%
• 多页：Skyline 减少 ~50%

FPS 监控

复杂动画场景使用 FPS 监控工具验证流畅度。

十、代码组织建议

目录结构

├── components/
│   ├── navbar/           # 自定义导航栏
│   ├── scroll-list/      # 封装的列表组件
│   └── ...
├── pages/
│   ├── index/
│   │   ├── index.json    # renderer: skyline
│   │   └── ...
│   └── ...
├── styles/
│   └── reset.wxss        # 全局样式重置
└── app.json

封装常用组件

将 Skyline 特有的模式封装成组件：

// components/scroll-list/scroll-list.js
Component({
  properties: {
    list: Array
  }
})

<!-- components/scroll-list/scroll-list.wxml -->
<scroll-view type="list" scroll-y class="scroll-list">
  <view wx:for="{{list}}" wx:key="id" list-item>
    <slot name="item" item="{{item}}" />
  </view>
</scroll-view>

Skyline 常见兼容问题

平台支持情况

兼容方法

样式兼容

使用开发者工具的 WXML 调试工具定位样式问题：

1. 选中有问题的节点 2. 查看 Computed 面板中的样式警告 3. 根据警告调整样式

推荐开启兼容配置：

"rendererOptions": {
  "skyline": {
    "defaultDisplayBlock": true,
    "defaultContentBox": true,
    "tagNameStyleIsolation": "legacy"
  }
}

根据 renderer 条件渲染

<!-- WXML -->
<view class="position {{renderer === 'skyline' ? 'skyline' : ''}}">
  内容
</view>

/* WXSS */
.position {
  position: fixed;
}
.position.skyline {
  position: absolute;
}

// JS
Page({
  data: {
    renderer: 'webview'
  },
  onLoad() {
    this.setData({
      renderer: this.renderer
    })
  }
})

常见问题 FAQ

Q: Skyline 必须应用到整个小程序吗？

A: 不需要。Skyline 支持按页面或分包粒度开启，可渐进式迁移。

---

Q: 开启 Skyline 后布局错乱

A: 通常是默认布局和盒模型差异导致：

// 开启这两个配置对齐 WebView 默认值
"rendererOptions": {
  "skyline": {
    "defaultDisplayBlock": true,
    "defaultContentBox": true
  }
}

---

Q: 为什么顶部原生导航栏消失？

A: Skyline 不支持原生导航栏，需自行实现：

// page.json
{
  "navigationStyle": "custom"
}

推荐使用 WeUI 导航栏组件或自定义实现。

---

Q: position: absolute 相对坐标不准确

A: Skyline 下所有节点默认是 position: relative，导致 absolute 参照不同。

解决方案： 1. 显式设置父节点 position: static 2. 或调整 absolute 元素的相对坐标

---

Q: 多段文本无法内联

A: Skyline 不支持 display: inline。

解决方案：

<!-- 方案一：用 text 组件包裹 -->
<text>
  <text>文本1</text>
  <text>文本2</text>
</text>

<!-- 方案二：用 span 组件（支持图文混排） -->
<span>
  <text>文本1</text>
  <image src="icon.png" />
  <text>文本2</text>
</span>

<!-- 方案三：用 flex 布局 -->
<view style="display: flex;">
  <text>文本1</text>
  <text>文本2</text>
</view>

---

Q: 单行文本省略失效

A: text-overflow: ellipsis 只在 text 组件上生效。

<!-- ❌ 错误：在 view 上使用 -->
<view style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
  很长的文本
</view>

<!-- ✅ 正确：在 text 上使用 -->
<text style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
  很长的文本
</text>

---

Q: 多行文本省略失效

A: 使用 text 组件的 max-lines 属性：

<text max-lines="2" style="overflow: hidden;">
  很长的多行文本内容...
</text>

---

Q: z-index 表现异常

A: Skyline 不支持 Web 标准的层叠上下文，z-index 只在同层级节点间有效。

解决方案： 1. 将需要调整层级的节点放在同一层级 2. 调整 DOM 结构顺序

---

Q: WeUI 扩展库无法使用

A: 使用 npm 安装 WeUI 组件库：

npm install weui-miniprogram

然后在开发者工具中构建 npm。

---

Q: 不支持 animate 动画接口

A: 使用 worklet 动画机制替代：

// 原 animate 写法
this.animate('.box', [...], 1000)

// worklet 写法
const offset = wx.worklet.shared(0)
this.applyAnimatedStyle('.box', () => {
  'worklet'
  return { transform: `translateX(${offset.value}px)` }
})
offset.value = wx.worklet.timing(100, { duration: 1000 })

---

Q: SVG 渲染不正确

A: Skyline SVG 不支持 <style> 选择器匹配。

解决方案： 1. 将样式转为内联形式 2. rgba 格式改用 fill-opacity 属性 3. 使用 SVGO 优化 SVG

---

Q: 自定义组件样式不正确

A: Skyline 下 tag 和 id 选择器不支持跨组件匹配。

解决方案： 1. 开启 tag 选择器全局匹配：

"rendererOptions": {
  "skyline": {
    "tagNameStyleIsolation": "legacy"
  }
}

2. 使用 class 选择器并注意组件样式隔离机制

---

Q: scroll-view 横向滚动不生效

A: 横向滚动需要额外配置：

<scroll-view 
  type="list" 
  scroll-x 
  enable-flex 
  style="display: flex; flex-direction: row;"
>
  <view 
    wx:for="{{list}}" 
    wx:key="id" 
    style="flex-shrink: 0;"
  >
    {{item}}
  </view>
</scroll-view>

---

Q: scroll-view 内容多时 boundingClientRect 无法执行

A: scroll-view 直接子节点按需渲染，不在屏的节点无法获取尺寸。

解决方案：逐个获取节点的 boundingClientRect，而非 selectAll。

---

Q: map/canvas/video 在开发者工具渲染失败

A: 这些原生组件在 Skyline 模式下暂不支持开发者工具调试，请使用真机预览。

---

Q: 热重载无响应

A: Skyline 模式暂不支持热重载。

临时方案：关闭热重载，使用重新编译预览。

兼容性速查表

Skyline 迁移起步

环境准备

支持版本

开发者工具配置

1. 详情 > 本地设置 > 勾选「开启 Skyline 渲染调试」 2. 使用 worklet 时勾选「编译 worklet 代码」 3. 调试基础库切到 3.0.0 或以上

配置步骤

第一步：app.json 全局配置

{
  "lazyCodeLoading": "requiredComponents",
  "renderer": "skyline",
  "componentFramework": "glass-easel",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true,
      "defaultContentBox": true,
      "tagNameStyleIsolation": "legacy",
      "enableScrollViewAutoSize": true,
      "keyframeStyleIsolation": "legacy"
    }
  }
}

配置项说明：

第二步：页面配置

每个 Skyline 页面的 page.json：

{
  "navigationStyle": "custom",
  "disableScroll": true
}

说明：

• navigationStyle: custom：Skyline 不支持原生导航栏，必须自定义
• disableScroll: true：禁用全局滚动，使用 scroll-view 局部滚动

第三步：按页面粒度开启（可选）

如果只想在部分页面使用 Skyline：

// 全局 app.json 不设置 renderer
{
  "lazyCodeLoading": "requiredComponents",
  "componentFramework": "glass-easel"
}

// 单个页面 page.json 开启
{
  "renderer": "skyline",
  "navigationStyle": "custom",
  "disableScroll": true
}

第四步：按分包粒度开启（可选）

// app.json
{
  "subPackages": [
    {
      "root": "packageA",
      "pages": ["pages/index"],
      "renderer": "skyline",
      "componentFramework": "glass-easel"
    }
  ]
}

代码适配

1. 实现自定义导航栏

<!-- components/navbar/navbar.wxml -->
<view class="navbar" style="padding-top: {{statusBarHeight}}px;">
  <view class="navbar-content">
    <view class="back-btn" bindtap="goBack" wx:if="{{showBack}}">
      <text class="back-icon">‹</text>
    </view>
    <text class="title">{{title}}</text>
  </view>
</view>

// components/navbar/navbar.js
Component({
  properties: {
    title: String,
    showBack: { type: Boolean, value: true }
  },
  data: {
    statusBarHeight: 0
  },
  lifetimes: {
    attached() {
      const { statusBarHeight } = wx.getSystemInfoSync()
      this.setData({ statusBarHeight })
    }
  },
  methods: {
    goBack() {
      wx.navigateBack()
    }
  }
})

2. 改用 scroll-view 局部滚动

<!-- 页面结构 -->
<view class="page">
  <!-- 固定导航栏 -->
  <navbar title="页面标题" />
  
  <!-- 滚动区域 -->
  <scroll-view type="list" scroll-y class="content">
    <!-- 页面内容 -->
  </scroll-view>
</view>

/* 页面样式 */
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  height: 0; /* 重要：让 flex: 1 生效 */
}

3. 纯文本用 text 组件包裹

<!-- ❌ 之前 -->
<view>这是文本</view>

<!-- ✅ 之后 -->
<view>
  <text>这是文本</text>
</view>

4. 检查 WXSS 兼容性

常见需要调整的样式：

验证迁移结果

1. 模拟器检查

模拟器左上角显示 renderer: skyline 表示成功：

![Skyline 模式指示器]

2. 代码判断

Page({
  onLoad() {
    console.log('当前渲染引擎:', this.renderer)
    // 输出 'skyline' 或 'webview'
  }
})

3. API 检查

const info = wx.getSkylineInfoSync()
console.log('支持 Skyline:', info.isSupported)
console.log('Skyline 版本:', info.version)

真机预览

方式一：配置 We 分析 AB 实验

1. 进入 We 分析 > AB 实验 > 实验看板 2. 新建实验，选择「小程序基础库实验」 3. 在 Skyline 实验分组添加测试微信号

方式二：快捷切换（开发版/体验版）

1. 打开小程序菜单 > 开发调试 > Switch Render 2. 选择 Skyline 强制切换

方式三：关闭 AB 实验（全量启用）

"rendererOptions": {
  "skyline": {
    "disableABTest": true,
    "sdkVersionBegin": "3.0.1",
    "sdkVersionEnd": "15.255.255"
  }
}

常见问题排查

白屏问题

1. 检查是否缺少必需配置项 2. 重启开发者工具 3. 清除编译缓存后重新编译

布局错乱

1. 开启 defaultDisplayBlock 和 defaultContentBox 2. 检查 flex 布局方向是否正确 3. 检查是否有不支持的 CSS 属性

原生组件不显示

map/canvas/video/camera 在开发者工具暂不支持，使用真机预览。

下一步

1. 查看 兼容性问题 了解常见问题 2. 查看 最佳实践 优化代码 3. 准备 发布上线

Skyline 发布上线指南

关注要点

发布 Skyline 项目时需关注两个问题：

1. 版本覆盖：低版本微信如何处理 2. 稳定性：如何灰度发布验证

一、版本覆盖策略

策略一：提高最低版本要求

设置「基础库最低可用版本」为 Skyline 支持版本：

• 基础库 3.0.2+（对应微信 8.0.40+）

影响：低版本用户无法使用小程序。

策略二：兼容 WebView 降级

Skyline 在不支持的版本自动降级为 WebView 渲染。

前提条件：

• 样式遵循 Web 标准 CSS 子集
• 对 Skyline 新增特性做好兼容

特性兼容性表

低版本兼容示例

// 检测 Skyline 支持
const info = wx.getSkylineInfoSync()

if (info.isSupported) {
  // 使用 Skyline 特性
} else {
  // 降级方案
}

// worklet 兼容
if (wx.worklet) {
  // 使用 worklet 动画
} else {
  // 使用传统动画
}

二、灰度发布方案

方案一：We 分析 AB 实验（推荐）

Skyline 默认需要经过 We 分析 AB 实验。

配置步骤

1. 进入 We 分析

• 打开 We 分析平台
• 进入 AB 实验 > 实验看板

2. 新建实验

• 点击「新建实验」
• 实验类型选择「小程序基础库实验」

3. 配置分流

• 选择实验层级
• 分配流量比例
• 小范围测试：分配 0% 流量，在 Skyline 分组填入测试微信号

4. 创建实验

• 确认配置后创建
• 实验立即生效

流量说明

全量上线步骤

1. AB 实验验证稳定 2. 在 We 分析上关闭实验 3. 选择 Skyline 全量

方案二：小程序版本灰度

若已充分测试，可跳过 AB 实验直接启用：

配置关闭 AB 实验

// app.json 或 page.json
{
  "rendererOptions": {
    "skyline": {
      "disableABTest": true,
      "sdkVersionBegin": "3.0.1",
      "sdkVersionEnd": "15.255.255"
    }
  }
}

按客户端版本配置

{
  "rendererOptions": {
    "skyline": {
      "disableABTest": true,
      "iosVersionBegin": "8.0.40",
      "iosVersionEnd": "15.255.255",
      "androidVersionBegin": "8.0.40",
      "androidVersionEnd": "15.255.255",
      "ohosVersionBegin": "1.0.5",
      "ohosVersionEnd": "15.255.255"
    }
  }
}

注意：xxxVersionEnd 填最大值，否则新版本不生效。

结合小程序灰度发布

1. 在小程序后台设置版本灰度比例 2. 新版本使用 Skyline 3. 逐步提高灰度比例

三、监控与回滚

监控指标

1. 崩溃率：对比 Skyline 和 WebView 崩溃率 2. 首屏性能：监控首屏渲染时间 3. 用户反馈：关注用户反馈渠道

回滚方案

方案一：We 分析回滚

1. 进入 AB 实验看板 2. 结束实验 3. 选择 WebView 全量

方案二：配置回滚

移除 Skyline 配置或指定 WebView：

// page.json
{
  "renderer": "webview"
}

方案三：紧急发布

准备一个不含 Skyline 的备用版本，必要时紧急发布。

四、发布检查清单

发布前

• [ ] 开发者工具测试通过
• [ ] 真机预览测试通过（Android + iOS）
• [ ] 低版本 WebView 降级测试
• [ ] 原生组件（map/canvas/video）真机测试
• [ ] 性能指标达标

AB 实验阶段

• [ ] 配置 We 分析 AB 实验
• [ ] 添加测试账号白名单
• [ ] 监控崩溃率和性能指标
• [ ] 收集用户反馈

全量发布

• [ ] AB 实验数据达标
• [ ] 关闭 AB 实验
• [ ] 选择 Skyline 全量
• [ ] 持续监控线上表现

五、常见发布问题

Q: 为什么真机还是 WebView？

A: 检查以下几点： 1. 是否配置了 We 分析 AB 实验 2. 当前账号是否在白名单 3. 是否开启了强切开关

Q: 如何快速测试不同渲染引擎？

A: 使用快捷切换入口（开发版/体验版）：

• 菜单 > 开发调试 > Switch Render
• 选择 Auto / WebView / Skyline

Q: 全量后如何回滚？

A: 1. We 分析全量：重新创建实验，选择 WebView 2. 配置全量：发布新版本，移除 disableABTest 或指定 renderer: webview

Skyline 性能对比

首屏渲染性能

首屏耗时是衡量渲染性能的最重要指标，测量从上一页面点击到下一页面 FCP（First Contentful Paint）的时间。

线上数据对比

以小程序助手线上数据为例：

设备差异：手机性能越低端，Skyline 优势越明显。

内存占用

测量方法

• 打开小程序首页，静置 30s 后采集
• 多页面场景：切换 Tab 页面后静置采集

对比数据

规律：打开页面越多，Skyline 内存优势越明显。

原因分析

CPU 利用率

对比数据

Skyline 相对 WebView 在 CPU 利用率上也有明显提升，具体数值因场景而异。

优化来源

1. 精简渲染流程：避免不必要的计算 2. 同步光栅化：减少多次重绘 3. 样式计算优化：局部更新、样式共享 4. 预编译 WXSS：无运行时解析开销

性能优化原理

1. 渲染流程精简

2. 组件框架优化

glass-easel 单线程组件框架：

3. 组件下沉

基础组件（view、text、image）从 JS 下沉到原生：

• 创建组件开销降低 30%
• scroll-view、swiper 使用原生实现

4. 长列表按需渲染

scroll-view 直接子节点按需渲染：

• 只渲染可视区域节点
• lazy mount 机制优化首次渲染
• 支持节点回收（规划中）

5. WXSS 预编译

6. 样式计算优化

架构差异带来的优势

1. 无 JSBridge 通信开销

2. 同步光栅化

3. 原生组件同层渲染更稳定

性能监控建议

关注指标

1. 首屏时间：FCP 指标 2. 交互延迟：TTI 指标 3. 帧率：FPS 指标 4. 内存占用：页面内存 5. 崩溃率：稳定性指标

使用工具

1. 小程序性能面板：开发者工具内置 2. We 分析：线上性能监控 3. 自定义打点：关键路径耗时

对比测试

建议通过 We 分析 AB 实验对比 Skyline 和 WebView：

1. 配置基础库实验 2. 分配 50% 流量 3. 对比关键性能指标 4. 根据数据决定是否全量

实际效果展示

视频对比

测试机型：OPPO R17

• 左侧：Skyline
• 右侧：WebView

明显可见 Skyline 在：

• 页面切换更流畅
• 滚动无白屏
• 动画更丝滑

典型场景提升