微信小程序skyline渲染引擎尝鲜

微信小程序skyline渲染引擎尝鲜

概述

官方描述

当小程序基于 WebView 环境下时，WebView 的 JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生在同一线程，在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿。以此为前提，小程序同时考虑了性能与安全，采用了目前称为「双线程模型」的架构。

在 Skyline 环境下，我们尝试改变这一情况：Skyline 创建了一条渲染线程来负责 Layout, Composite 和 Paint 等渲染任务，并在 AppService 中划出一个独立的上下文，来运行之前 WebView 承担的 JS 逻辑、DOM 树创建等逻辑。这种新的架构相比原有的 WebView 架构，有以下特点：

• 界面更不容易被逻辑阻塞，进一步减少卡顿
• 无需为每个页面新建一个 JS 引擎实例（WebView），减少了内存、时间开销
• 框架可以在页面之间共享更多的资源，进一步减少运行时内存、时间开销
• 框架的代码之间无需再通过 JSBridge 进行数据交换，减少了大量通信时间开销

思考

新的skyline渲染引擎能提升性能，减少卡顿，接下来编写长列表代码来测试新引擎的实际性能表现如何。

一、环境准备

在hbuderx中创建项目，选择默认模板，生成基础代码。
文件结构如图。

运行项目后查看详情-本地设置，确保基础库版本在2.30.4以上

manifest.json 文件配置

在mp-weixin 对象内增加如下lazyCodeLoading、rendererOptions 的配置信息，完整配置如下。

{"mp-weixin" : {"appid" : "","setting" : {"urlCheck" : false},"usingComponents" : true,"lazyCodeLoading": "requiredComponents","rendererOptions": { "skyline": { "defaultDisplayBlock": true } }}
}

pages.json 文件配置

在需要Skyline渲染的页面增加renderer、navigationStyle、componentFramework 三个配置项，完整配置如下

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","renderer": "skyline","navigationStyle": "custom","componentFramework": "glass-easel"}}]
}

配置完成重新启动项目会提示切换Skyline调试模式，直接切换。

二、长列表实现

html

<template><view class="navBar"></view><view class="content"><view class="title"> <text>姓名</text><text>学校</text><text>班级</text><text>语文</text><text>数学</text><text>英语</text></view><scroll-view type="list" :scroll-y="true" class="list"><view class="item" v-for="item in list" :key="item.key1"><text>{{ item.key1 }}</text><text>{{ item.key2 }}</text><text>{{ item.key3 }}</text><text>{{ item.key4 }}</text><text>{{ item.key5 }}</text><text>{{ item.key6 }}</text><text>{{ item.key7 }}</text></view><view class="more" @tap="page++">查看更多～</view></scroll-view></view>
</template>

javascript

export default {data () {return {showPage: 1,list: [],page: 1,size: 200}},onLoad() {List()},methods: {getList () {let len = this.list.lengthfor (let i=1; i <= this.size; i++) {this.list.push({key1: len + i,key2: '张三',key3: '1中',key4: '3班',key5: '100分',key6: '90分',key7: '87分',})}}},watch: {'page' () {console.log('页码改变了---', value);List()}}
}

css

.navBar {height: var(--status-bar-height);background-color: red;position: fixed;top: 0;z-index: 9999;
}
.content {font-size: 14px;
}
.title {height: 40px;width: 100%;display: flex;justify-content: space-around;background: #4381ff;
}
.title text {width: 100rpx;color: #fff;line-height: 40px;text-align: center;
}.list {height: calc(100vh - var(--status-bar-height) - 40px);
}.item {height: 40px;width: 100%;display: flex;justify-content: space-around;border-bottom: solid 1px rgba(0, 0, 0, 0.068);
}
.item text {width: 100rpx;line-height: 40px;text-align: center;
}.more {height: 40px;width: 100%;text-align: center;line-height: 40px;color: #4381ff;
}

界面展示如图，点击查看更多一次，多展示一页的数据。

三、性能对比测试

1. 测试说明

复制长列表页面，把pages.json 内两个页面的配置改为普通渲染（webview）。这样子就有了所有条件都一致、渲染方式不同的两个页面，通过查看更多按钮增加列表渲染数量，在不卡顿的前提下数据渲染的条数越多，性能越好，反之越差。

文件结构如图

pages.json 配置如下

{"path": "pages/index/skyline","style": {"navigationBarTitleText": "skyline","renderer": "skyline","navigationStyle": "custom","componentFramework": "glass-easel"}
},
{"path": "pages/index/webview","style": {"navigationBarTitleText": "webview","navigationStyle": "custom"}
}

2. webview渲染

演示视频地址： .mp4

普通的渲染模式（webview）在渲染第2000条数据时，界面卡死，操作无反应。

3. skyline渲染

演示视频地址： .mp4

skyline渲染模式在渲染第7000条数据时，界面卡死，操作无反应

4. 打包uni-小程序

通过hbuderX 发行为小程序包，在iphone5 上运行测试:

• 未使用skyline配置： 页面渲染10000条数据是出现明显卡顿，点击按钮无反应

• 使用skyline配置： 页面渲染8500条数据是出现明显卡顿，点击按钮无反应

四、总结

1. 性能

在性能的表现上官方给出的首屏渲染速度数据如图

我们用长列表的渲染数据量对比的结果 2000( webview ) / 7000(skyline) 和官方标定的性能对比图类似，使用skyline引擎渲染的界面确实速度有质的飞跃（至少在长列表渲染场景中）。

2. 遇到的问题

• 使用skyline渲染模式无法实现整页滚动，必须借助scoroll-view 组件，并指定"type: list"
• 使用skyline渲染模式必须使用自定义导航栏
• 开发工具在使用skyline模式时不会热更新
• 使用hbuderx打包uni-小程序时skyline引擎是不生效的