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

新的skyline渲染引擎能提升性能，减少卡顿，接下来编写长列表代码来测试新引擎的实际性能表现如何。在性能的表现上官方给出的首屏渲染速度数据如图我们用长列表的渲染数据量对比的结果 2000( webview ) / 7000(skyline) 和官方标定的性能对比图类似，使用skyline引擎渲染的界面确实速度有质的飞跃（至少在长列表渲染场景中）。

文章共3,572字 · 阅读需要大约12分钟

一键AI生成摘要，助你高效阅读

问答

weixin_63212264

3330人浏览 · 2023-08-29 18:38:52

weixin_63212264 · 2023-08-29 18:38:52 发布

概述

官方描述

当小程序基于 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.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）。这样子就有了所有条件都一致、渲染方式不同的两个页面，通过查看更多按钮增加列表渲染数量，在不卡顿的前提下数据渲染的条数越多，性能越好，反之越差。

文件结构如图

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"
    }
}