跨端技术总结通过淘宝weex,微信,美团kmm,天猫Waft等不同项目来了解目前各家公司在跨平台方向上有哪些不同的项目

层次的底部是Linux,它提供基本的系统功能,如进程管理,内存管理,设备管理,如:相机,键盘,显示器等内核处理的事情。体系结构第三个部分叫做Java虚拟机,是一种专门设计和优化的AndroidDalvik虚拟机。应用程序框架层使用Java类形式的应用程序提供了许多的更高级别的服务。允许应用程序开发人员在其应用程序中使用这些服务。应用在最上层,即所有的Android应用程序。一般我们编写的应用程序只被安装在这层。应用的例子如:浏览器,游戏等。

ui生成就是把代码中产生的view和在xml文件配置的view,经过measure,layout,dewa形成一个完整的view树,并调用系统方法进行绘制。Measure用深度优先原则递归得到所有视图(View)的宽、高;Layout用深度优先原则递归得到所有视图(View)的位置;到这里就得到view的在窗口中的布局。Draw目前Android支持了两种绘制方式:软件绘制(CPU)和硬件加速(GPU),会通过系统方法把要绘制的view合成到不同的缓冲区上

最初的ui配置

构建成内存中的viewtree

SurfaceFlinger把缓存区数据渲染到屏幕,由于是两个不同的进程,所以使用Android的匿名共享内存SharedClient缓存需要显示的数据来达到目的。SurfaceFlinger把缓存区数据渲染到屏幕(流程如下图所示),主要是驱动层的事情,这里不做太多解释。

绘制过程首先是CPU准备数据,通过Driver层把数据交给CPU渲染,其中CPU主要负责Measure、Layout、Record、Execute的数据计算工作,GPU负责Rasterization(栅格化)、渲染。由于图形API不允许CPU直接与GPU通信,而是通过中间的一个图形驱动层(GraphicsDriver)来连接这两部分。图形驱动维护了一个队列,CPU把displaylist添加到队列中,GPU从这个队列取出数据进行绘制,最终才在显示屏上显示出来。

调用layoutSubviews方法;调用addSubview:方法;

通过drawRect绘制视图;绘制string(字符串);

每个UIView都有CALayer,同时图层有一个像素存储空间,存放视图;调用-setNeedsDisplay的时候,仅会设置图层为dirty。当一个视图第一次或者某部分需要更新的时候iOS系统总是会去请求drawRect:方法。

以下是触发视图更新的一些操作:

视图系统都会自动触发重新绘制。对于自定义视图,就必须重写drawRect:方法去执行所有绘制。视图第一次展示的时候,iOS系统会传递正方形区域来表示这个视图绘制的区域。

在调用drawRect:方法之后,视图就会把自己标记为已更新,然后等待下一次视图更新被触发。

解码图片;图片格式转换;

打包layers并发送到渲染server;

递归提交子树的layers;

web通常需要将所需要的html,css,js都下载下来,并进行解析执行后才进行渲染,然后是绘制过程,先来看下前期工作

一个渲染流程会划分很多子阶段,整个处理过程叫渲染流水线,流水线可分为如下几个子阶段:构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。每个阶段都经过输入内容-->处理过程-->输出内容三个部分。

我们有DOM树和DOM树中元素的样式,那么接下来就需要计算出DOM树中可见元素的几何位置,我们把这个计算过程叫做布局。根据元素的可见信息构建出布局树。

合成线程会按照视口附近的图块来优先生成位图,实际生成位图的操作是由栅格化来执行的。所谓栅格化,是指将图块转换为位图。

WebView实际上是一个ViewGroup,并将后端的具体实现抽象为WebViewProvider,而WebViewChromium正是一个提供基于Chromium的具体实现类。

再回到WebView的情况。当WebView部件发生内容更新时,例如页面加载完毕,CSS动画,或者是滚动、缩放操作导致页面内容更新,同样会在WebView触发invalidate方法,随后在视图系统的统筹安排下,WebView.onDraw方法会被调用,最后实际上调用了AwContents.onDraw方法,它会请求对应的native端对象执行OnDraw方法,将页面的内容更新绘制到WebView对应的Canvas上去。

draw()先得到一块Buffer,这块Buffer是由SurfaceFlinger负责管理的。

然后调用view的draw(canvas)当viewdraw完后,调用surface.java的unlockAndPostCanvas().

将包含有当前view内容的Buffer传给SurfaceFlinger,SurfaceFlinger将所有的Buffer混合后传给FrameBuffer.至此和native原有的view渲染就是一样的了。

RN的AndroidBridge和IOSBridge是两端通信的桥梁,是由一个转译的桥梁实现的不同语言的通信,得以实现单靠JS就调用移动端原生APi

Java->Js:Java通过注册表调用到CatalystInstance实例,通过jni,调用到javascriptCore,传递给调用BatchedBridge.js,根据参数{moduleID,methodID}require相应Js模块执行。

Js->Java:JS不主动传递数据调用Java。在需要调用调Java模块方法时,会把参数{moduleID,methodID}等数据存在MessageQueue中,等待Java的事件触发,再把MessageQueue中的{moduleID,methodID}返回给Java,再根据模块注册表找到相应模块处理。

JS开发者只需要开发各个组件对象,监听组件事件,然后利用framework接口调用render方法渲染组件。

而实际上,JS也是单线程事件循环,不管是API调用,virturalDOM同步,还是系统事件监听,都是异步事件,采用Observer(观察者)模式监听JAVA层事件,JAVA层会把JS关心的事件通过bridge直接使用javascriptCore的接口执行固定的脚本,比如"requrire(test_module).test_methode(test_args)"。此时,UImainthread相当于workthread,把系统事件或者用户事件往JS层抛,同时,JS层也不断调用模块API或者UI组件,驱动JAVA层完成实际的View渲染。JS开发者只需要监听JS层framework定义的事件即可

首先回顾一下当前Bridge的运行过程。当我们写了类似下面的React源码。

UIManager.createView([343,"RCTView",31,{"backgroundColor":-16181,"width":200,"height":200}])通过Bridge发到ShadowThread。ShadowTread接收到这条信息后,先反序列化,形成Shadowtree,然后传给Yoga,形成原生布局信息。接着又通过Bridge传给UIthread。UIthread拿到消息后,同样先反序列化,然后根据所给布局信息,进行绘制。

从上面过程可以看到三个线程的交互都是要通过Bridge,因此瓶颈也就在此。

另外JSI与React无关,可以用在任何JS引擎(V8,Hermes)。有了JSI,JS和Native就可以直接通信了,调用过程如下:JS->JSI->C++->ObjectC/Java

生产环境中Dart通过AOT编译成对应平台的指令,同时Flutter基于跨平台的Skia图形库自建了渲染引擎,最大程度地保证了跨平台渲染的一致性

Flutterframework主要是使用dart语言来编写的。framework从下到上,我们有最基础的foundational包,和构建在其上的animation,painting和gestures。

再上面就是rendering层,rendering为我们提供了动态构建可渲染对象树的方法,通过这些方法,我们可以对布局进行处理。接着是widgetslayer,它是rendering层中对象的组合,表示一个小挂件。

Widgets是Flutter中用户界面的基础。你在flutter界面中能够观察到的用户界面,都是Widgets。大的Widgets又是由一个个的小的Widgets组成,这样就构成了Widgets的层次依赖结构,在这种层次结构中,子Widgets可以共享父Widgets的上下文环境。在Flutter中一切皆可为Widget。

举例,这个Containerks控件里的child,color,Text都是Widget。

渲染就是将上面我们提到的widgets转换成用户肉眼可以感知的像素的过程。Flutter代码会直接被编译成使用Skia进行渲染的原生代码,从而提升渲染效率。

代码首先会形成widgets树如下,这些widget在build的过程中,会被转换为elementtree,其中ComponentElement是其他Element的容器,而RenderObjectElement是真正参与layout和渲染的element。。一个element和一个widget对应。然后根据elementrtree中需要渲染的元素形成RenderTree,flutter仅会重新渲染需要被重新绘制的element,每次widget变化时element会比较前后两个widget,只有当某一个位置的Widget和新Widget不一致,才会重新创建Element和widget。最后还会一个layertree,表示绘制的图层。

四棵树有各自的功能

Flutter绘制流程

在UIThread构建出四棵树,并在Engine生成Scene,最后提交给RasterThread,对LayerTree做光栅化合成上屏。

整个调度过程是生产者消费者模型,UIThread负责生产flutter::LayerTree,RasterThread负责消费flutter::LayerTree。

Mobile平台上面每一个Engine实例启动的时候会为UI,GPU,IORunner各自创建一个新的线程。所有Engine实例共享同一个PlatformRunner和线程。

IORunner的主要功能是从图片存储(比如磁盘)中读取压缩的图片格式,将图片数据进行处理为GPURunner的渲染做好准备

Dart是单线程的,但是采用了EventLoop机制,也就是不断循环等待消息到来并处理。在Dart中,实际上有两个队列,一个事件队列(EventQueue),另一个则是微任务队列(MicrotaskQueue)。在每一次事件循环中,Dart总是先去第一个微任务队列中查询是否有可执行的任务,如果没有,才会处理后续的事件队列的流程。

isolate机制尽管Dart是基于单线程模型的,但为了进一步利用多核CPU,将CPU密集型运算进行隔离,Dart也提供了多线程机制,即Isolate。每个Isolate都有自己的EventLoop与Queue,Isolate之间不共享任何资源,只能依靠消息机制通信,因此也就没有资源抢占问题。Isolate通过发送管道(SendPort)实现消息通信机制。我们可以在启动并发Isolate时将主Isolate的发送管道作为参数传给它,这样并发Isolate就可以在任务执行完毕后利用这个发送管道给我们发消息。

如果需要在启动一个Isolate执行某项任务,Isolate执行完毕后,发送消息告知我们。如果Isolate执行任务时,同时需要依赖主Isolate给它发送参数,执行完毕后再发送执行结果给主Isolate这样的双向通信,让并发Isolate也回传一个发送管道即可。

Weex里页面的渲染过程和浏览器的渲染过程类似,整体可以分为【创建前端组件】->【构建VirtualDOM】->【生成“真实”DOM】->【发送渲染指令】->【绘制原生UI】这五个步骤。前两个步骤发生在前端框架中,第三和第四个步骤在JSFramework中处理,最后一步是由原生渲染引擎实现的。页面渲染的大致流程如下

最上层的前端生态还是没变的,应该还是以vue的响应式编程为主。

2.0多了js和c++的直接调用,减少js引擎和布局引擎的通讯开销。

Weex2.0重写了渲染层的实现,不再依赖系统UI,改成依赖统一的图形库Skia自绘渲染,和Flutter原理很像,我们也直接复用了FlutterEngine的部分代码。底层把Weex对接过的各种原生能力、三方扩展模块都原样接入。对于上层链路,理论上讲业务JS代码、Vue/Rax、JSFramework都是不需要修改的。在JS引擎层面也做了一些优化,安卓上把JavaScriptCore换成了QuickJS,用bytecode加速二次打开性能,并且结合Weexjsbundle的特点做针对性的优化。

渲染引擎通用的渲染管线可以简化为【执行脚本】-->【构建节点】-->【布局/绘制】-->【合成/光栅化】--【上屏】这几个步骤。Weex里的节点构建逻辑主要在JS线程里执行,提交一颗静态节点树到UI线程,UI线程计算布局和绘制属性,生成LayerStack提交到GPU线程。

支持AOT模式,拔高了性能上限;活跃的开源社区,降低项目推进的风险;支持多语言,拓宽开发者群体。

WebAssembly(又名wasm)是一种高效的,低级别的编程语言。它让我们能够使用JavaScript以外的语言(例如C,C++,Rust或其他)编写程序,然后将其编译成WebAssembly,进而生成一个加载和执行速度非常快的Web应用程序

WebAssembly是基于堆栈的虚拟机的二进制指令格式,它被设计为编程语言的可移植编译目标。目前很多语言都已经将WebAssembly作为它的编译目标了。

可以看到是采用类前端的开发方式,限定一部分css能力。最后编译为WebAssembly,打包成wasmbundle。在进行aot编译城不同架构下的机器码。

可以看到bundle加载过程中,会执行UI区域的不同的生命周期函数。然后在渲染过程则是从virtualdomtree转化到widgettree,然后直接通过skia渲染库直接进行渲染。

KMP:KotlinMultiplatformprojects使用一份kotlin代码在不同平台上运行

KMM:KotlinMultiplatformMobile一个用于跨平台移动应用程序的SDK。使用KMM,可以构建多平台移动应用程序并在Android和iOS应用程序之间共享核心层和业务逻辑等方面。开发人员可以使用单一代码库并通过共享数据层和业务逻辑来实现功能。其实就是把一份逻辑代码编译为多个平台的产物编译中间产物,在不同平台的边缘后端下转为不同的变异后端产物,在不同平台下运行。

IR全称是intermediaterepresentation,表示编译过程中的中间信息,由编译器前端对源码分析后得到,随后会输入到后端进一步编译为机器码

IR可以有一系列的表现方式,由高层表示逐渐下降(lowering)到低层

我们所讨论的KotlinIR是抽象语法树结构(AST),是比较高层的IR表示类型。

有了完备的IR,就可以利用不同的后端,编出不同的目标代码,比如JVM的字节码,或者运行在iOS的机器码,这样就达到了跨端的目的

THE END
1.Web技术演进历程三、Web技术发展的第三阶段——Web2.0时代 我相信大家在这两年经常会听到这样一个词“Web2.0”,那么什么是Web2.0呢?其实它并不是一个具体的事物,而是一个阶段,是促成这个阶段的各种技术和相关的产品服务的一个称呼。所以,我们无法说,Web2.0是什么,但是可以说,那些是Web2.0。我们可以把第一阶段的静态文档的WWW时代https://blog.csdn.net/s_zero/article/details/89072145
2.讲座预告美国中期奄后的政治新生态与中美关系未来走势关于汉语词类问题——发展的三个阶段与当前争议的问题 主讲人:陆俭明(北京大学中文系教授) 时间:12月16日13:30-15:30 主办:上海大学国际教育学院等 参与方式:腾讯会议(ID:239-678-729) 现代悲剧的文体风格摭谈 主讲人:陈奇佳(中国人民大学文学院教授) https://m.thepaper.cn/renmin_prom.jsp?contid=21184120
3.想知道Web是什么意思?一文带你全面了解Web的奥秘常见问题Web的核心理念是开放、互联和去中心化。任何人都可以在Web上发布信息,任何设备都可以访问这些信息,不受时间和地点的限制。Web极大地促进了信息的传播和共享,深刻影响着我们的生活和工作方式。 二、Web的发展历程 Web技术从诞生至今已有30多年的历史,大致经历了以下几个阶段: https://www.xiaoyuxitong.com/cjwt/162451.html
4.音乐发展范文12篇(全文)同时, 制作方要结合西方儿童音乐剧, 发展具有中国特色的儿童音乐剧。著名戏剧家徐晓钟认为, 目前我国不止是儿童音乐剧, 包括音乐剧整体都处于不能令人满意的徘徊阶段, 在歌词、编舞、音乐、戏剧性上都很弱。首先我们需要的是借鉴。而中文版《猫》就是一个很成功的例子。最关键的, 对于儿童音乐剧市场而言, 能够https://www.99xueshu.com/w/ikeyhuranlgf.html
5.低代码/无代码如何打破“鸡肋”困境?2. 行业历史及阶段(1)行业整体发展历程概览 低代码开发的理念最早可以追溯至20世纪80年代第四代编程语言的提出,2000年可视化编程语言(VPL)助推低代码开发这一理念进一步发展。2014年,Forrester Research正式提出“低代码开发平台”(LCAP)这一概念,2018年Gartner进一步提出aPaaS和iPaaS概念,让低代码行业受到越来越多的人关https://www.tmtpost.com/baidu/6156843.html
6.projectwebarchitecture天行健Lindows知名网站的技术发展历程 http://www.cnblogs.com/end/archive/2012/05/25/2518400.html 《构建高性能web站点》/gouijiangaoxingnengwebzhandian http://baike.baidu.com/view/2721734.htm http://item.zhigou.com/bookschina/q23862332.html http://ishare.iask.sina.com.cn/f/8427790.html?from=isnom https://www.iteye.com/blog/474331
7.全球互联网50年:发展阶段与演进逻辑维基百科的互联网历史年表则将互联网史分为三个阶段: (1)早期研究和发展(1965-1981); (2)合并网络,创建互联网(1981-1994); (3)商业化、私有化和更广泛的接入,形成现代互联网(1995年至今),该阶段又可分为Web1.0、Web2.0、移动互联网三部分。 威廉·斯普瑞(William Aspray)和保罗·E·塞鲁齐(Paul E. Ceruzhttps://www.secrss.com/articles/11938%20www.secrss.com
8.元宇宙&Web3正在经历的重要变革现阶段的一个共识:元宇宙是基于“通信网络、算力、人工智能、扩展现实、数字孪生、区块链等”多种科技取得较大发展后组合形成的虚实融合的新型智能互联网,包括在社交系统、生产系统、经济系统上均发挥重要影响。 (二)元宇宙的形成 元宇宙概念自20世纪90年代创造,在21世纪经历20年快速塑形,最终在2021年进入元年,元宇宙概https://vr.sina.com.cn/news/report/2023-08-09/doc-imzfqvxv7883580.shtml
9.Web3之区块链3、区块链的发展阶段 从区块链技术角度出发,在行业发展历程中分为三个阶段。 3.1 第一阶段 以比特币为代表,建立了一套密码学的账本,提供了一套新的记账方法,和我们传统的记账方式完全不一样,它具备去中心化、不可篡改、不可伪造、可追溯的特点。 https://www.jianshu.com/p/8d7b15ac2c5a
10.客户关系管理的论文(精选13篇)4.1龙之脊公司简介及发展历程 龙之脊图书有限公司始建于一九九五年,是国家新闻出版总署登记批准发证的总发行单位,注册资金2000万,集图书发行、图书管理软件开发等为一体的大型教育服务企业。公司以北京为基地,在广东、江苏、福建、山东、湖北、河南、辽宁、甘肃、湖南、云南等22个省、市省会城市设立了办事处,建立了庞大而https://m.ruiwen.com/lunwen/1127667.html
11.Web3是什么?我们该如何使用它?4、Web1.0与Web2.0相比的区别是什么? 我们用一个表格来表示: 随着时代的发展,Web2.0也出现了一些问题,给人们讨论并探索Web3.0创造了前提。 5、Web2.0出现了哪些问题? 早期互联网,带有强烈的探索性质,曾经的技术先驱们对互联网进行了探索、封存、和商品化。随着时间的推移,尽管互联网一直保持着所谓的“自由”,却https://www.51cto.com/article/696700.html
12.QCon+大前端趋势Web 技术在阿里经济体中发展迅猛,有着广泛的应用场景,U4 内核近些年来也一直在持续优化演进,现已具备了比较强的技术竞争力,我们也一直在思考及探索寻求技术上更大的突破,以便更好地服务广大的业务及开发者。 本次分享将重点为大家揭秘 U4 内核是如何通过进程架构的演进去解决业务上的一些重大问题,降低 OOM 隐患的https://b.geekbang.org/article/262865/
13.元宇宙系列之Web3.0:新范式开启互联网新阶段Web3.0 VS Web2.0,预计相当长时间仍将共存。Web2.0以效率优先,Web3.0则更强调兼顾公平,中金认为这两种侧重将成为未来用户选择应用的重要标准。考虑到Web3.0阶段仍处于发展初期,预计Web2.0与Web3.0二者长时间内或共存。另外,公开透明、更公平的分配机制等方向也有望成为Web2.0大厂改良的重点方向。最后,积极布局Web3.0时https://wallstreetcn.com/articles/3659654
14.华为公司业务变革与IT治理实践华为管理3、技术上由数据中心变为WEB化和集成平台建设、SOA全球网络覆盖及优化到移动办公、虚拟化、云计算,相应的技术上有步骤的进行改变以致到现在的IT2.0。 华为在做业务变革的时候关心的是要把重要的事情做好,所以对质量要求特别高,反而进度不是那么重要,华为一般三五年才搞成一个大事情。同时,IT建设要与公司发展战略和https://www.shangyexinzhi.com/article/details/id-1636184
15.赞!web设计之路!网络视觉艺术发展史概览优设网图1.2.10 UI风格Web界面 UI风格主要是通过很强列的质感来表现内容,这对触摸界面来说非常有优势,能带给用户很好的指尖操作体验。 2001-2010这十年网络视觉的江湖风生水起,群雄争霸,这个时期可以归结为网络视觉艺术的发展期,相信我们多多少少都有亲身经历,而我们正在谱写的,则是网络视觉艺术的第三个阶段。 https://www.uisdc.com/network-visual-arts/
16.世界排名前十位的各类桥梁中,中国独占半壁江山,中国桥梁为什么能『从落后到领先,中国桥梁发展的五个阶段』 要讲中国桥梁的建设历程,不妨从万里长江第一桥——武汉长江大桥讲起。 建设武汉长江大桥的设想,最早是由湖广总督张之洞在清政府修建京汉铁路的时候就提出来了,但由于修建难度太大,没有实施。1913年、1929年、1936年、1946年,曾经四次对武汉长江大桥进行了比较系统的规划和https://web.shobserver.com/staticsg/res/html/web/newsDetail.html?id=526092
17.编程学习计划(优秀9篇)总之,学习编程需要时间,精力和耐心。它可带来蓬勃发展的职业机会,为您带来崭新的观念和思维方式,并可以助您解决问题和改善所有行业。为了能够掌握编程能力,您需要坚定地学习并实践。 编程学习计划5 一、确定目标 学习任何东西都需要一个明确的目标,明确的计划和阶段性的目标是我们制订一个编程学习计划的第一步。计划中https://www.jy135.com/xuexijihua/2114834.html
18.2物联网的发展最终导致了人类社会数据量的第三次跃升,使得数据3感知式系统阶段 物联网的发展最终导致了人类社会数据量的第三次跃升。物联网中的这些设备,每时每刻都在自动产生大量数据,与Web 2.0时代的人工数据产生方式相比,物联网中的自动数据产生方式,将在短时间内生成更密集、更大量的数据,使得人类社会迅速步入“大数据时代”。1.1.4大数据的发展历程 从大数据的发展历程https://easylearn.baidu.com/edu-page/tiangong/questiondetail?id=1799932687765585638&fr=search
19.中国互联网“三十而立”中国互联网发展伴随我国改革开放的整个历程。1986年,中国开启了“复关”谈判的历史进程。2001年12月11日,中国正式成为世界贸易组织第143个成员。此后,中国市场进一步开放,与中国互联网进程同频共振,汇成了一曲技术与制度完美结合的交响乐。 1990年代:中国互联网初创期,即Web1.0阶段 https://www.hf365.com/2024/0821/1574481.shtml