Flutter第四弹:Flutter图形渲染性能

目标:

1)Flutter图形渲染性能能够媲美原生?

2)Flutter性能优于React Native?

一、Flutter图形渲染原理

1.1 Flutter图形渲染原理

Flutter直接调用Skia。

Flutter不使用WebView,也不使用操作系统的原生控件,而是使用Google自身的2D渲染引擎Skia(目前 Google Chrome浏览器和 Android 均采用 Skia 作为其 2D 绘图引擎。)

1)Flutter将一帧录制成SkPicture(skp)送给skia进行渲染。

捕捉skp, 并利用 debugger.skia.org, 我们可以但不分析每一条绘图指令;

捕捉图片指令

flutter screenshot --type=skia --observatory-port=<port>

Android原生应用:首先通过CPU数据计算,然后将数据发送给GPU,GPU根据相应的数据绘制成像素界面,然后放入帧缓存区中,最终显示器定时从帧缓存区获取帧数据显示在显示器上。

Flutter应用:与原生应用的渲染相同,应用 OpenGL 规范封装了一套 Dart API,计算数据,然后将数据传递给GPU进行处理。

1.2 Flutter性能优于React Native?

React Native是JS技术流的跨平台开发框架。

ReactNative 完全是基于原生平台来进行渲染的,而这之间主要是通过 JSbridge 来通信,将需要渲染的数据通过 JSbridge 传递给原生平台。

比较:相对于Flutter,ReactNative不能直接调用GPU,而是通过JsBridge桥接的方式,将数据传递给原生平台,再由原生应用绘制图形。中间多了一层转换,因此绘图性能要低于Flutter。

Flutter UI 界面是自渲染的,而 ReactNative 则是通过通信的方式告知原生平台,然后原生平台再绘制出界面。

1.3 常用跨平台技术比较

FlutterReactNativeHybird
绘制原理封装Dart API调用Skia进行绘制通过JSBridge,调用原生平台绘制界面Web流派,使用H5绘制UI。Web页面+JS调用原生
渲染性能非常快,媲美原生接近快
是否支持设备底层访问支持支持支持
网络要求支持离线支持离线(集成资源包)支持离线(资源存本地情况)
编程语言DartReact, 主要使用JS编写,语法规则JSX(JavaScript)js+html+css3
跨平台Android,iOS,h5浏览器Android,iOSAndroid,iOS,h5浏览器
打包bundle文件不需要默认单一文件比较大(可拆包)前端JS、CSS一般CDN引用
热更新暂无方案

二、Skia图形开源引擎

Skia有两套很不同的后端,Flutter在iOS模拟器采用的纯CPU后端;而实际设备一般采用GPU硬件加速后端。

2.1 分析Flutter应用的Skia调用情况

flutter run --profile --trace-skia

常见性能瓶颈

请注意以下的skia函数调用

  • saveLayer
  • clipPath

尽量减少上述两个函数的调用,将性能提升2倍。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/742435.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java学习笔记14——常量与变量

曾和儿子分享过所谓计算机程序&#xff0c;都是编写代码进行“数据处理和处理数据”而已。任何编程语言编写何种应用&#xff0c;数据都必须以某种方式表示。掌握变量和常量的用法&#xff0c;可以使代码的可维护性、可读性大大提高。 一、常量 常量就是在程序中固定不变的量…

C语言scandir函数获取文件夹内容

scandir 函数用于列举指定目录下的文件列表&#xff0c;并将结果存储在一个动态分配的数组中。 函数原型&#xff1a; int scandir(const char *dirpath, struct dirent ***namelist,int (*filter)(const struct dirent *),int (*compar)(const struct dirent **, const stru…

labview中6种机械动作的区别

1.单击时转换&#xff1a;单击时转换&#xff0c;需要手动转换或者赋值回复原来状态&#xff1b; 2.释放时转换&#xff1a;释放时时转换&#xff0c;需要手动转换或者赋值回复原来状态&#xff1b; 3.单击时转换保持到鼠标释放&#xff1a;触发两次&#xff0c;自动恢复原来状…

Python互斥锁实例(包含超时解锁)

Python互斥锁实例&#xff08;包含超时解锁&#xff09; 文章目录 前言正文1 锁被占用直接返回2 拿不到锁则一直等待3 拿不到锁等待直到超时 总结 前言 最近遇到一个小需求&#xff0c;大概是请求机器人&自动化设备执行某些功能&#xff0c;这些功能之间有共同操作资源或在…

Linux:导出环境变量命令export

相关阅读 Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 Linux中的内建命令export命令用于创建一个环境变量&#xff0c;或将一个普通变量导出为环境变量&#xff0c;并且在这个过程中&#xff0c;可以给该环境变量赋值。 下面…

多数问题求解之蒙特卡洛与分治法

多数问题&#xff08;Majority Problem&#xff09;是一个有多种求解方法的经典问题&#xff0c;其问题定义如下&#xff1a; 给定一个大小为 n n n的数组&#xff0c;找出其中出现次数超过 n / 2 n/2 n/2的元素 例如&#xff1a;当输入数组为 [ 5 , 3 , 5 , 2 , 3 , 5 , 5 ] […

【WPS】压缩图片

第一步&#xff1a; 点击插入&#xff0c;点击图片 第二步&#xff1a; 点击图片工具&#xff0c;点击压缩图片 第三步&#xff1a;

Vue3 前端生成随机id( 生成 UUID )

效果展示 封装工具&#xff08;代码展示&#xff09; 重新创建一个文件**/utils/someTools.js**&#xff0c;并在里面写入如下代码。 function Tools() {}Tools.prototype.guid function () {return xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx.replace(/[xy]/g, function (c) {v…

jQuery模态框弹窗提示代码

jQuery模态框弹窗提示代码 下载地址 jQuery模态框弹窗提示代码

GPT每日面试题—Vue中style的scoped是如何实现样式隔离的

充分利用ChatGPT的优势&#xff0c;帮助我们快速准备前端面试。今日问题&#xff1a;Vue中style的scoped是如何实现样式隔离的。 Q&#xff1a;在前端面试中&#xff0c;如果被问到&#xff0c;vue文件中的scoped是如何实现样式格式的&#xff0c;什么回答比较好&#xff0c;全…

Requests教程-17-请求代理设置

上一小节我们学习了requests解决乱码的方法&#xff0c;本小节我们讲解一下requests设置代理的方法。 代理基本原理 代理实际上指的就是代理服务器&#xff0c; 英文叫作proxy server &#xff0c;它的功能是代理网络用户去取得网络信息。形象地说&#xff0c;它是网络信息的中…

【阿里云系列】-基于云效构建部署Springboot项目到ACK

介绍 为了提高项目迭代的速度加速交付产品给客户&#xff0c;我们通常会选择CICD工具来减少人力投入产生的成本&#xff0c;开源的工具比如有成熟的Jenkins&#xff0c;但是本文讲的是阿里云提高的解决方案云效平台&#xff0c;通过配置流水线的形式实现项目的快速部署到服务器…

【数据结构】双向链表及LRU缓存的实现

目录 前言 1. 在原有的自定义链表类 Linked 的基础上&#xff0c;添加新的 “节点添加”方法 addNode(Node node) 测试用例 测试结果 2. 在自定义链表类的基础上&#xff0c;使用双重循环“强力” 判断两个节点是否发生相交 测试用例 测试结果 3. 在自定义链表类的基础上…

突破编程_C++_面试(STL 编程 list)

面试题 1 &#xff1a;描述 std::list 的内部数据结构是什么&#xff0c;以及它如何影响性能&#xff1f; std::list 的内部数据结构是一个双向链表。这意味着它是由一系列节点组成的&#xff0c;每个节点都包含两部分&#xff1a;一部分是存储实际数据的数据域&#xff0c;另…

每日OJ题_哈希表⑤_力扣49. 字母异位词分组

目录 力扣49. 字母异位词分组 解析代码 力扣49. 字母异位词分组 49. 字母异位词分组 难度 中等 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入…

基于opencv的手势识别

当然可以&#xff0c;下面是一个使用OpenCV实现简单手势识别&#xff0c;并在摄像头捕捉的视频中描绘出手部轮廓为线条的示例。该代码会读取摄像头流&#xff0c;然后检测出手部&#xff0c;并用线条描绘出手的轮廓。 首先&#xff0c;你需要安装OpenCV库。如果你还没有安装&am…

Vulnhub靶机:Kioptrix_Level1.1

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;192.168.56.101&#xff09; 靶机&#xff1a;Kioptrix_Level1.1&#xff08;192.168.56.104&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vul…

C语言例2-3:从键盘输入一个正整数(位数小于或等于10),判断其是否是回文数

回文数是将自然数n的各位数字反向排列得到自然数n1&#xff0c;若n1与n相等&#xff0c;则称为回文数&#xff0c;例如12321 //从键盘输入一个正整数&#xff08;位数小于或等于10&#xff09;&#xff0c;判断其是否是回文数 //回文数是将自然数n的各位数字反向排列得到自然数…

Mac管理Ruby环境

在 macOS 上切换 Ruby 环境主要涉及到使用不同的 Ruby 版本管理工具&#xff0c;比如 RVM&#xff08;Ruby Version Manager&#xff09;或 rbenv。下面分别介绍如何使用这两种工具在 Mac 上切换 Ruby 环境&#xff1a; 使用 RVM 切换 Ruby 环境 安装 RVM&#xff1a; 首先&am…

spring boot对外部文件的访问

很多朋友都会遇到这个问题&#xff0c;项目打包成jar格式&#xff0c;本地其他盘符里面的文件访问不到(项目达成war包的和资源是在服务器访问的请忽视)&#xff0c;这里只需要在配置文件中添加配置&#xff0c;然后使用建立一个WebMvcConfigurerAdapter拦截就可以了 (1) 首先 …