首页 > 编程语言 >如何评价微信小程序新渲染引擎skyline?

如何评价微信小程序新渲染引擎skyline?

时间:2022-11-04 19:34:11浏览次数:70  
标签:Web 架构 渲染 微信 Skyline JS skyline WebView

简介

小程序一直以来采用的都是 AppService 和 WebView 的双线程模型,基于 WebView 和原生控件混合渲染的方式,小程序优化扩展了 Web 的基础能力,保证了在移动端上有良好的性能和用户体验。Web 技术至今已有 30 多年历史,作为一款强大的渲染引擎,它有着良好的兼容性和丰富的特性。 尽管各大厂商在不断优化 Web 性能,但由于其繁重的历史包袱和复杂的渲染流程,使得 Web 在移动端的表现与原生应用仍有一定差距。

为了进一步优化小程序性能,提供更为接近原生的用户体验,我们在 WebView 渲染之外新增了一个渲染引擎 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 进行数据交换,减少了大量通信时间开销

而与此同时,这个新的架构能很好地保持和原有架构的兼容性,基于 WebView 环境的小程序代码基本上无需任何改动即可直接在新的架构下运行。WXS 由于被移到 AppService 中,虽然逻辑本身无需改动,但询问页面信息等接口会变为异步,效率也可能有所下降;为此,我们同时推出了新的 Worklet 机制,用以高性能地构建各种复杂的动画效果。

新的渲染流程如下图所示:

标签:Web,架构,渲染,微信,Skyline,JS,skyline,WebView
From: https://www.cnblogs.com/sexintercourse/p/16858898.html

相关文章

  • 微信公众号开发异常码及异常原因汇总
    返回码说明-1系统繁忙,此时请开发者稍候再试0请求成功40001获取access_token时AppSecret错误,或者access_token无效。请开发者认真比对AppSecret的正......
  • 微信小程序(开发某些方式)
    1.开发工具:微信小程序开发工具(需要appid登录)2.调试:可使用微信开发者工具预览(用真机测试)3.真机调试:微信开发者工具真机调试(可打印以及查看网络等)4.扫一扫功能:  1.小程序......
  • 微信小程序首页知识点
    选择器类选择器.classname组件选择器elementnameid选择器#idname后代选择器,空格分隔:.infodesc{}组合选择器,逗号分隔:view,.card{}颜色与字体颜色红......
  • #yyds干货盘点#【愚公系列】2022年11月 微信小程序-icon图标详解
    前言在小程序中经常会用到各种各样的图标,如果这些图标都使用图片的话,将会大大增加小程序打包后的体积,而小程序限制代码最大2MB,分包加载4MB,所以为了缩小体积,我们可以使用图......
  • 微信小程序中wx.login和wx.getUserProfile的使用
    在使用微信登录时,通常会在调用wx.login获取code后再通过wx.getUserProfile获取iv和encryptedData(加密数据)一起发到后端进行登录验证在实际使用中如果在wx.login方法......
  • Java 微信小程序登录接口获取openid
    根据官方文档,wx.login()的回调函数中,需要我们传递生成的用户登录凭证到code2accessToken的接口中小程序登录方法code2accessToken的方法中要求传入如下参数获取Appid与app......
  • 微信小程序隐私指引完整填写范本(开发者收集你选中的照片或视频信息,用于?)
    为了分辨用户,开发者将在获取你的明示同意后,收集你的微信昵称、头像。为了显示距离,开发者将在获取你的明示同意后,收集你的位置信息。开发者收集你的地址,用于获取位置信息。......
  • uniapp微信小程序返回上一页并刷新数据
    根据要求:详情页返回列表页时,要刷新列表页的数据,操作如下@click="goBack"goBack{letpages=getCurrentPages();//当前页面letbeforePage=pages[pages.len......
  • 转载微信公众号图文
    ​ 官方网站:泽优文档助手 产品交流群:​ 扫码加群:​ 1.将微信公众号文章粘贴到编辑器中 粘贴后的图片显示不允许引用的提示,这里不用管。  ​ ......
  • 使用Winform绘制仿造微信的客户
    由于工作需要,开发一个聊天工具,安卓,IOS,Web都开发好了,还需要一个客户端形式的聊天工具,要求是简介大方好用,呵呵哒,好看我不知道,但是模仿一个到时可以的,说干就干,经过几天的时......