本文主要是介绍微信小程序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() {this.getList()},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);this.getList()}}
}
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渲染
演示视频地址: https://markdownimg-1313808923.cos.ap-chengdu.myqcloud.com/skyline%2F888.mp4
普通的渲染模式(webview)在渲染第2000条数据时,界面卡死,操作无反应。
3. skyline渲染
演示视频地址: https://markdownimg-1313808923.cos.ap-chengdu.myqcloud.com/skyline%2F999.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引擎是不生效的
这篇关于微信小程序skyline渲染引擎尝鲜的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!