微信小程序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中创建项目，选择默认模板，生成基础代码。
文件结构如图。

skyline 渲染模式在 2.29.2 及以上基础库支持。当前小程序未设置线上最低基础库,微信小程序,uni-app,vue

运行项目后查看详情-本地设置，确保基础库版本在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.length
            for (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）。这样子就有了所有条件都一致、渲染方式不同的两个页面，通过查看更多按钮增加列表渲染数量，在不卡顿的前提下数据渲染的条数越多，性能越好，反之越差。

文件结构如图
skyline 渲染模式在 2.29.2 及以上基础库支持。当前小程序未设置线上最低基础库,微信小程序,uni-app,vue

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引擎渲染的界面确实速度有质的飞跃（至少在长列表渲染场景中）。文章来源地址https://www.toymoban.com/news/detail-760805.html