你有没有过这样的体验 刷微信小程序的商品列表滑到一半突然卡了一下掉帧掉得难受 点一个按钮半天才有反应以为是自己手机卡了 想做个丝滑的转场动画结果怎么调都做不到只能羡慕原生 App以前我们总觉得小程序嘛轻量应用卡一点很正常直到微信推出了全新的渲染引擎 Skyline我们才发现原来小程序也能做到跟原生 App 一样丝滑今天我们就用大白话把这个听起来很专业的技术给你讲得明明白白看完你就知道Skyline 到底给小程序带来了什么改变。你的手机屏幕其实是个 “超级画板”很多人以为你在手机上看到的界面是代码写好之后直接就显示在屏幕上了 其实根本不是这整个过程跟你点外卖的流程简直一模一样你下单开发者写好 UI 代码告诉手机我要画个按钮写段文字放张图片。商家打包CPU 拿到这些代码把它们转换成 “高级绘制指令”—— 就像商家把菜做好打包成外卖盒这些指令是我们开发者能看懂的比如 “画个红色的按钮”“写一行白色的字”但手机硬件根本看不懂。骑手配送GPU 拿到这些打包好的指令把它们转换成硬件能懂的 “底层指令”。就像骑手把外卖送到你家GPU 会把所有的图像不管是 2D 的按钮还是 3D 的游戏角色都拆成一个个小三角形三角形越多模型就越精细比如最近爆火的《黑神话悟空》里面的孙悟空模型就有上百万个三角形所以才那么逼真跟真人一样。 4. 你开看最后这些处理好的指令最终渲染到屏幕上你就看到了漂亮的界面。这就是整个移动端渲染的流程是不是一下子就懂了三种 “开发” 方式原生、WebView 和 Flutter那不同的 App其实用的是完全不同的“做法”方式这也导致了它们的体验天差地别原生 App自己在家做饭 就像你自己买菜做饭想吃什么做什么盐放多少糖放多少全由你自己掌控做出来的菜最好吃速度也最快。 对应到技术上就是 Android 和 iOS 的原生开发直接用系统的 API性能拉满体验最好。但缺点也很明显你要做 Android 的菜还要做 iOS 的菜得做两次太费时间了。WebView点普通外卖 就像你不想做饭点个外卖商家做好了用平台的通用打包盒打包送到你家你拿到就能吃不用自己动手。 以前的小程序用的就是这套模式跨平台很方便一套代码就能在 Android 和 iOS 上跑但是缺点也很明显打包盒是通用的有时候菜送到就凉了而且有些菜你想吃打包盒装不下很多原生的特性都用不了性能也差点意思。Flutter中央厨房预制菜 就像现在很火的预制菜所有的菜都是同一个中央厨房做好的统一打包不管你在哪个城市拿到的都是一样的菜味道完全一致。 Flutter 就是这样不管是 Android 还是 iOS它都用自己的渲染引擎自己搞定所有的绘制不用系统的组件所以跨平台的体验完全一致性能也比 WebView 好很多。哦对了微信的新渲染引擎 Skyline就是基于 Flutter 来做的老架构的痛点隔着墙传话能不慢吗在讲 Skyline 之前我们先说说以前的小程序架构到底哪里不好null你和你的朋友中间隔了一堵厚厚的墙你要告诉他什么事只能对着墙喊 “喂我这里数据变了你把界面上的文字改一下” “喂我滑动列表了你把新的内容加载出来”你喊一句他听一句有时候喊错了还要重喊有时候喊得太快他还跟不上这就是跨线程通信的损耗比如你滑动一个长列表每滑动一下都要喊一次喊多了就卡了 比如你要拖动一个东西每动一下都要喊就会导致拖动不跟手半天跟不上你的手指 以前为了解决这个问题大家只能用 WXS把代码放到渲染层去执行但是 WXS 限制太多了写起来特别难受很多功能都做不了。而且更麻烦的是以前的每个小程序页面都是一个独立的 WebView就像每个房间都是独立的互相不打通。内存占得特别大开 10 个页面手机就卡得不行了页面之间转场动画、共享元素根本做不了因为两个 WebView 是割裂的你不能把这个页面的东西拿到那个页面去做动画。这就是为什么以前的小程序总给人一种 “卡”“不够丝滑” 的感觉不是手机不行是这个架构本身就有这些天生的痛点。Skyline 来了把 “传话” 变成 “当面聊”那 Skyline 是怎么解决这些问题的说出来你可能不信它就做了一件事把那堵墙拆了以前两个人隔着墙喊话喊得累还慢现在把墙拆了你们俩坐在一起面对面聊天你要什么直接说不用喊了也不用等了直接就搞定了具体来说它做了这些优化1. 线程模型大改再也不用跨线程传话了以前的逻辑层和渲染层是分开的现在微信把逻辑层和 UI 框架放到了同一个线程把渲染线程拆了出来这样一来 你更新数据的时候setData再也不用跨线程通信了也不用把数据序列化传来传去了直接就更新界面了这一下就把最大的性能损耗给干掉了2. 用 Flutter 渲染跳过多余的步骤null3. 搞定了复杂交互终于能跟手了以前的手势、动画因为要跨线程传话总是不跟手现在微信搞了一套worklet机制 你要做复杂的手势或者动画直接把函数放到渲染线程去执行不用再跟逻辑层来回传话了比如你拖动一个东西渲染线程自己就处理了根本不用麻烦逻辑层所以拖动就跟手了动画也丝滑了再也不会有吸顶抖动的问题了4. 原生特性拉满小程序也能做丝滑动画了以前 WebView 做不到的转场动画、共享元素、长列表回收现在都有了 比如你点一个商品商品的图片从小列表里直接放大到详情页这个丝滑的共享元素动画以前小程序根本做不了现在跟原生 App 一模一样丝滑到不行 还有 iOS 的同层渲染问题以前原生组件和 WebView 组件总是有层级问题现在也彻底解决了。这一波优化下来小程序的体验直接上了一个大台阶滑动再也不卡了长列表丝滑到底点击再也没有延迟了点一下就有反应各种酷炫的动画以前想都不敢想现在都能做了开再多页面内存也不涨了再也不会越用越卡。写在最后小程序的体验终于追上原生了其实 Skyline 不是什么黑科技就是微信把以前老架构的那些痛点一个个给解决了把墙拆了用更高效的渲染引擎把多余的步骤都砍掉了让小程序的体验越来越接近原生 App 了。当然现在 Skyline 还有一些小问题比如有些 CSS 属性还不支持双端还有一点点小差异不过这些都是小问题微信肯定会慢慢完善的以后只会越来越好。以后我们用小程序再也不会觉得 “小程序就是卡” 了它会越来越像原生 App丝滑、流畅用起来跟你手机上的 App 一模一样。你平时用小程序的时候有没有遇到过卡的情况比如滑动掉帧点击没反应你最希望小程序优化哪个功能评论区聊聊
