概述
官方描述
當(dāng)小程序基于 WebView 環(huán)境下時(shí)，WebView 的 JS 邏輯、DOM 樹創(chuàng)建、CSS 解析、樣式計(jì)算、Layout、Paint (Composite) 都發(fā)生在同一線程，在 WebView 上執(zhí)行過多的 JS 邏輯可能阻塞渲染，導(dǎo)致界面卡頓。以此為前提，小程序同時(shí)考慮了性能與安全，采用了目前稱為「雙線程模型」的架構(gòu)。
在 Skyline 環(huán)境下，我們嘗試改變這一情況：Skyline 創(chuàng)建了一條渲染線程來負(fù)責(zé) Layout, Composite 和 Paint 等渲染任務(wù)，并在 AppService 中劃出一個(gè)獨(dú)立的上下文，來運(yùn)行之前 WebView 承擔(dān)的 JS 邏輯、DOM 樹創(chuàng)建等邏輯。這種新的架構(gòu)相比原有的 WebView 架構(gòu)，有以下特點(diǎn)：
- 界面更不容易被邏輯阻塞，進(jìn)一步減少卡頓
- 無需為每個(gè)頁面新建一個(gè) JS 引擎實(shí)例（WebView），減少了內(nèi)存、時(shí)間開銷
- 框架可以在頁面之間共享更多的資源，進(jìn)一步減少運(yùn)行時(shí)內(nèi)存、時(shí)間開銷
- 框架的代碼之間無需再通過 JSBridge 進(jìn)行數(shù)據(jù)交換，減少了大量通信時(shí)間開銷
思考
新的skyline渲染引擎能提升性能，減少卡頓，接下來編寫長列表代碼來測試新引擎的實(shí)際性能表現(xiàn)如何。
一、環(huán)境準(zhǔn)備
在hbuderx中創(chuàng)建項(xiàng)目，選擇默認(rèn)模板，生成基礎(chǔ)代碼。
文件結(jié)構(gòu)如圖。
運(yùn)行項(xiàng)目后查看詳情-本地設(shè)置，確保基礎(chǔ)庫版本在2.30.4以上
manifest.json 文件配置
在mp-weixin 對象內(nèi)增加如下lazyCodeLoading、rendererOptions 的配置信息，完整配置如下。
{
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true,
"lazyCodeLoading": "requiredComponents",
"rendererOptions": {
"skyline": {
"defaultDisplayBlock": true
}
}
}
}
pages.json 文件配置
在需要Skyline渲染的頁面增加renderer、navigationStyle、componentFramework 三個(gè)配置項(xiàng)，完整配置如下
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"renderer": "skyline",
"navigationStyle": "custom",
"componentFramework": "glass-easel"
}
}
]
}
配置完成重新啟動(dòng)項(xiàng)目會提示切換Skyline調(diào)試模式，直接切換。
二、長列表實(shí)現(xiàn)
html
<template>
<view class="navBar"></view>
<view class="content">
<view class="title">
<text>姓名</text>
<text>學(xué)校</text>
<text>班級</text>
<text>語文</text>
<text>數(shù)學(xué)</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;
}
界面展示如圖，點(diǎn)擊查看更多一次，多展示一頁的數(shù)據(jù)。
三、性能對比測試
1. 測試說明
復(fù)制長列表頁面，把pages.json 內(nèi)兩個(gè)頁面的配置改為普通渲染（webview）。這樣子就有了所有條件都一致、渲染方式不同的兩個(gè)頁面，通過查看更多按鈕增加列表渲染數(shù)量，在不卡頓的前提下數(shù)據(jù)渲染的條數(shù)越多，性能越好，反之越差。
文件結(jié)構(gòu)如圖
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條數(shù)據(jù)時(shí)，界面卡死，操作無反應(yīng)。
3. skyline渲染
演示視頻地址： https://markdownimg-1313808923.cos.ap-chengdu.myqcloud.com/skyline%2F999.mp4
skyline渲染模式在渲染第7000條數(shù)據(jù)時(shí)，界面卡死，操作無反應(yīng)
4. 打包uni-小程序
通過hbuderX 發(fā)行為小程序包，在iphone5 上運(yùn)行測試:
-
未使用skyline配置： 頁面渲染10000條數(shù)據(jù)是出現(xiàn)明顯卡頓，點(diǎn)擊按鈕無反應(yīng)
-
使用skyline配置： 頁面渲染8500條數(shù)據(jù)是出現(xiàn)明顯卡頓，點(diǎn)擊按鈕無反應(yīng)
四、總結(jié)
1. 性能
在性能的表現(xiàn)上官方給出的首屏渲染速度數(shù)據(jù)如圖文章來源：http://www.zghlxwxcb.cn/news/detail-760805.html
我們用長列表的渲染數(shù)據(jù)量對比的結(jié)果 2000( webview ) / 7000(skyline) 和官方標(biāo)定的性能對比圖類似，使用skyline引擎渲染的界面確實(shí)速度有質(zhì)的飛躍（至少在長列表渲染場景中）。文章來源地址http://www.zghlxwxcb.cn/news/detail-760805.html
2. 遇到的問題
- 使用skyline渲染模式無法實(shí)現(xiàn)整頁滾動(dòng)，必須借助scoroll-view 組件，并指定"type: list"
- 使用skyline渲染模式必須使用自定義導(dǎo)航欄
- 開發(fā)工具在使用skyline模式時(shí)不會熱更新
- 使用hbuderx打包uni-小程序時(shí)skyline引擎是不生效的
到了這里，關(guān)于微信小程序skyline渲染引擎嘗鮮的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
