0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

ArkUI,更高效的框架設(shè)計(jì)

HarmonyOS開發(fā)者 ? 來源:未知 ? 2022-12-21 09:15 ? 次閱讀

上期文章我們講到了ArkUI的三大特性,同時(shí)提到了ArkUI是一套用于構(gòu)建HarmonyOS應(yīng)用界面的UI開發(fā)框架,本期我們將從架構(gòu)設(shè)計(jì)上來聊聊ArkUI的設(shè)計(jì)理念。

daa6ca04-80cc-11ed-8abf-dac502259ad0.png

ArkUI架構(gòu)圖

從架構(gòu)圖可以看出,ArkUI的設(shè)計(jì)理念是在端到端整條技術(shù)路徑設(shè)計(jì)上建立了一整套完整的分層機(jī)制。接下來我們依次分層為大家介紹。

ArkUI框架的“前驅(qū)”——【前端層】

dab7c5c0-80cc-11ed-8abf-dac502259ad0.png

前端層

架構(gòu)的第一層【前端層】又稱【聲明式UI前端】,這一層包含了上期文章介紹的極簡(jiǎn)的UI信息語法規(guī)范,UI組件以及ArkTS語言特有的狀態(tài)管理機(jī)制。

dad6fc74-80cc-11ed-8abf-dac502259ad0.gif

獨(dú)立的封裝

此外,ArkUI對(duì)常用的UI組件的結(jié)構(gòu)、樣式、事件三大屬性進(jìn)行了獨(dú)立的封裝,內(nèi)置于SDK中。開發(fā)人員可以根據(jù)項(xiàng)目設(shè)計(jì)需求,調(diào)用與設(shè)計(jì)匹配的組件函數(shù),傳入相應(yīng)的參數(shù)來完成UI描述。

db018a48-80cc-11ed-8abf-dac502259ad0.png

聲明式UI信息語法

同時(shí)使用聲明式UI信息語法,可以讓數(shù)據(jù)和View進(jìn)行聯(lián)動(dòng)更新,華為自研語言ArkTS為這種聯(lián)動(dòng)刷新提供了多維度的狀態(tài)管理機(jī)制,開發(fā)人員通過對(duì)數(shù)據(jù)進(jìn)行注釋標(biāo)記,合理控制數(shù)據(jù)對(duì)應(yīng)View的更新作用范圍。

db14aab0-80cc-11ed-8abf-dac502259ad0.gif

三種更新方式

如:只單獨(dú)更新、父子單向更新,父子雙向同步更新等。

到這里,第一層【前端層】就介紹完畢了。

ArkUI框架的“核心部分”——【核心層】

接下來我們來到了框架的第二層【核心層】。

db37a920-80cc-11ed-8abf-dac502259ad0.png

核心層

這一層主要包含兩部分【方舟編譯運(yùn)行時(shí)】和【聲明式UI后端引擎】。

db4d8efc-80cc-11ed-8abf-dac502259ad0.png

方舟編譯運(yùn)行時(shí)

【核心層】的第一部分是【方舟編譯運(yùn)行時(shí)】,它涉及到開發(fā)環(huán)境和終端環(huán)境

db6a4e66-80cc-11ed-8abf-dac502259ad0.png

運(yùn)行流程圖

【方舟編譯運(yùn)行時(shí)】的流程包含4步

db7acd5e-80cc-11ed-8abf-dac502259ad0.gif

跨語言調(diào)用

第1步是跨語言調(diào)用

ArkUI在開發(fā)項(xiàng)目時(shí)支持多語言開發(fā),為不同的開發(fā)語言相互通信提供了通道,例如:提供了JS/TS與C/ C++交互的NAPI機(jī)制。

dbddfb86-80cc-11ed-8abf-dac502259ad0.png

新語言ArkTS

而在ArkUI支持的多種語言中,ArkTS是以TS為語法基礎(chǔ)的應(yīng)用編程語言。

dbf427bc-80cc-11ed-8abf-dac502259ad0.png

類型系統(tǒng)

在預(yù)編譯的過程中,數(shù)據(jù)的靜態(tài)類型信息會(huì)攜帶在生成的統(tǒng)一字節(jié)碼中,后端編譯的時(shí)候能直接利用這種類型信息加速機(jī)器碼的執(zhí)行,避免了運(yùn)行時(shí)收集對(duì)象造成的額外開銷,同時(shí)這些類型信息被用于AOT編譯過程,使得應(yīng)用啟動(dòng)時(shí)就可以執(zhí)行AOT生成的優(yōu)化機(jī)器碼獲得高性能運(yùn)行體驗(yàn)。

dc0a46a0-80cc-11ed-8abf-dac502259ad0.png

統(tǒng)一字節(jié)碼

第2步是統(tǒng)一字節(jié)碼

完成項(xiàng)目開發(fā)將項(xiàng)目進(jìn)行打包時(shí),方舟編譯器將編寫的高級(jí)編程語言通過內(nèi)置的工具鏈,編譯為一種與運(yùn)行設(shè)備和系統(tǒng)無關(guān)的可移植介質(zhì),這種介質(zhì)就叫統(tǒng)一字節(jié)碼(又稱方舟碼,abc文件),這個(gè)過程也稱為字節(jié)碼預(yù)編譯。

dc1a3506-80cc-11ed-8abf-dac502259ad0.png

統(tǒng)一字節(jié)碼

第3步是機(jī)器碼和安裝包

字節(jié)碼在設(shè)備上可以通過解釋執(zhí)行或者編譯后執(zhí)行的方式運(yùn)行,對(duì)于執(zhí)行性能要求高的部分字節(jié)碼調(diào)用AOT生成機(jī)器碼。

最后,應(yīng)用經(jīng)歷了開發(fā)、字節(jié)碼預(yù)編譯、AOT靜態(tài)優(yōu)化編譯、打包簽名就形成了一個(gè)完整安裝包,這樣一來就終于可以在設(shè)備上運(yùn)行預(yù)覽了。

dc368abc-80cc-11ed-8abf-dac502259ad0.png

GC機(jī)制

第4步是GC(Garbage Collection)機(jī)制

dc4db00c-80cc-11ed-8abf-dac502259ad0.png

搭載HarmonyOS系統(tǒng)的設(shè)備

對(duì)比其他設(shè)備,搭載HarmonyOS系統(tǒng)的設(shè)備上運(yùn)行應(yīng)用時(shí)會(huì)顯得特別流暢,這里的秘密是什么呢?

dc68123a-80cc-11ed-8abf-dac502259ad0.png

GC機(jī)制技術(shù)問題

由于在傳統(tǒng)的操作系統(tǒng)中,基于Tracing的GC存在著STW(Stop The World)階段暫停時(shí)間較長(zhǎng)的問題。

dc79b72e-80cc-11ed-8abf-dac502259ad0.png

STW

當(dāng)手機(jī)內(nèi)存資源不夠用的時(shí)候,傳統(tǒng)操作系統(tǒng)虛擬機(jī)就會(huì)召喚GC(Garbage Collection)封鎖公路,暫停手機(jī)運(yùn)行的所有線程,等待它回收內(nèi)存空間。

STW暫停時(shí)間較長(zhǎng)

而且STW(Stop The World)階段的暫停時(shí)間段較長(zhǎng),開發(fā)者無法精確控制和干預(yù),在性能較差的手機(jī)上會(huì)表現(xiàn)出較強(qiáng)的“間歇性”卡頓。這就好比行駛在市區(qū)道路的車輛,在經(jīng)過每個(gè)路口都遇到了較長(zhǎng)時(shí)間的紅燈等待,一路走走停停,行駛體驗(yàn)感較差。

ddd195f6-80cc-11ed-8abf-dac502259ad0.png

HPP GC

而方舟編譯運(yùn)行時(shí)在內(nèi)存回收方面重新設(shè)計(jì),基于Tracing GC推出了高性能內(nèi)存回收技術(shù)——HPP GC(High Performance Partial Garbage Collection)。HPP GC綜合了多種Tracing GC算法,根據(jù)不同對(duì)象區(qū)域,采用不同的回收方式。這種GC機(jī)制可以縮短STW階段的時(shí)長(zhǎng),用在市區(qū)駕駛車輛來比喻,就是縮短了車輛在路口紅燈等待的時(shí)間,增加了行駛的體驗(yàn)感。

ddec4ba8-80cc-11ed-8abf-dac502259ad0.gif

HPP GC

接下來我們來看核心層的第二部分——聲明式UI后端引擎。

它在HarmonyOS系統(tǒng)終端運(yùn)行時(shí),由C++編寫UI的基本組件、布局、動(dòng)效和事件組成。供UI前端開發(fā)人員調(diào)用。

de127f80-80cc-11ed-8abf-dac502259ad0.gif

渲染管線

渲染管線是位于運(yùn)行時(shí)內(nèi)部的一個(gè)獨(dú)立的渲染線程,它負(fù)責(zé)支配CPU多線程地去工作,讓CPU為GPU提供更多的渲染數(shù)據(jù),最大額度的調(diào)取GPU的能力。

到此,【核心層】已全部介紹完畢。

通過本期ArkUI架構(gòu)的學(xué)習(xí),相信大家已經(jīng)了解方舟編譯運(yùn)行時(shí)的技術(shù)和流程,也對(duì)ArkUI的設(shè)計(jì)理念有了基礎(chǔ)的認(rèn)識(shí)。完整版的內(nèi)容可查看上方的視頻,我們下期再見~

END

想了解更多HarmonyOS技術(shù)?

后臺(tái)留言給我們

立刻安排!


原文標(biāo)題:ArkUI,更高效的框架設(shè)計(jì)

文章出處:【微信公眾號(hào):HarmonyOS開發(fā)者】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。


聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • HarmonyOS
    +關(guān)注

    關(guān)注

    79

    文章

    1975

    瀏覽量

    30194

原文標(biāo)題:ArkUI,更高效的框架設(shè)計(jì)

文章出處:【微信號(hào):HarmonyOS_Dev,微信公眾號(hào):HarmonyOS開發(fā)者】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。

收藏 人收藏

    評(píng)論

    相關(guān)推薦

    如何使用PyTorch構(gòu)建更高效的人工智能

    術(shù)界和工業(yè)界得到了廣泛應(yīng)用。本文將深入探討如何使用PyTorch構(gòu)建更高效的人工智能系統(tǒng),從框架基礎(chǔ)、模型訓(xùn)練、實(shí)戰(zhàn)應(yīng)用等多個(gè)方面進(jìn)行詳細(xì)解析。
    的頭像 發(fā)表于 07-02 13:12 ?381次閱讀

    鴻蒙開發(fā)ArkUI-X基礎(chǔ)知識(shí):【ArkUI代碼工程及構(gòu)建介紹】

    ArkUI作為OpenHarmony的默認(rèn)開發(fā)框架,在本項(xiàng)目(ArkUI-X)中需要做到一套代碼同時(shí)支持多平臺(tái)構(gòu)建,所以會(huì)采取共倉(cāng)開發(fā)的方式,部分倉(cāng)直接指向OpenHarmony相關(guān)開源倉(cāng)。
    的頭像 發(fā)表于 05-25 16:45 ?2089次閱讀
    鴻蒙開發(fā)<b class='flag-5'>ArkUI</b>-X基礎(chǔ)知識(shí):【<b class='flag-5'>ArkUI</b>代碼工程及構(gòu)建介紹】

    鴻蒙ArkUI-X跨語言調(diào)用說明:【平臺(tái)橋接開發(fā)指南(Android)】

    平臺(tái)橋接用于客戶端(ArkUI)和平臺(tái)(Android或iOS)之間傳遞消息,即用于ArkUI與平臺(tái)雙向數(shù)據(jù)傳遞、ArkUI側(cè)調(diào)用平臺(tái)的方法、平臺(tái)調(diào)用ArkUI側(cè)的方法。本文主要介紹A
    的頭像 發(fā)表于 05-25 16:26 ?699次閱讀
    鴻蒙<b class='flag-5'>ArkUI</b>-X跨語言調(diào)用說明:【平臺(tái)橋接開發(fā)指南(Android)】

    鴻蒙開發(fā)ArkUI-X基礎(chǔ)知識(shí):【ArkUI跨平臺(tái)設(shè)計(jì)總體說明】

    本文檔描述ArkUI開發(fā)框架跨平臺(tái)運(yùn)行能力相關(guān)的總體技術(shù)方案。
    的頭像 發(fā)表于 05-24 15:41 ?1551次閱讀
    鴻蒙開發(fā)<b class='flag-5'>ArkUI</b>-X基礎(chǔ)知識(shí):【<b class='flag-5'>ArkUI</b>跨平臺(tái)設(shè)計(jì)總體說明】

    鴻蒙ArkUI-X框架開發(fā):【開發(fā)準(zhǔn)備】

    本文檔適用于ArkUI-X框架開發(fā)的初學(xué)者。通過環(huán)境搭建、代碼下載、代碼編譯、API擴(kuò)展和使用,快速了解跨平臺(tái)項(xiàng)目開發(fā)流程。
    的頭像 發(fā)表于 05-23 21:02 ?475次閱讀
    鴻蒙<b class='flag-5'>ArkUI</b>-X<b class='flag-5'>框架</b>開發(fā):【開發(fā)準(zhǔn)備】

    鴻蒙ArkUI-X跨語言調(diào)用說明:【平臺(tái)橋接(@arkui-x.bridge)】

    平臺(tái)橋接用于客戶端(ArkUI)和平臺(tái)(Android或iOS)之間傳遞消息,即用于ArkUI與平臺(tái)雙向數(shù)據(jù)傳遞、ArkUI側(cè)調(diào)用平臺(tái)的方法、平臺(tái)調(diào)用ArkUI側(cè)的方法。
    的頭像 發(fā)表于 05-21 15:09 ?748次閱讀
    鴻蒙<b class='flag-5'>ArkUI</b>-X跨語言調(diào)用說明:【平臺(tái)橋接(@<b class='flag-5'>arkui</b>-x.bridge)】

    鴻蒙ArkUI-X跨平臺(tái)開發(fā):【SDK目錄結(jié)構(gòu)介紹】

    本文檔配套ArkUI-X,將OpenHarmony ArkUI開發(fā)框架擴(kuò)展到不同的OS平臺(tái),比如Android和iOS平臺(tái),讓開發(fā)者基于ArkUI,可復(fù)用大部分的應(yīng)用代碼(UI以及主要
    的頭像 發(fā)表于 05-20 16:28 ?818次閱讀
    鴻蒙<b class='flag-5'>ArkUI</b>-X跨平臺(tái)開發(fā):【SDK目錄結(jié)構(gòu)介紹】

    鴻蒙ArkUI-X跨平臺(tái)開發(fā):【 應(yīng)用工程結(jié)構(gòu)說明】

    本文檔配套ArkUI-X,將OpenHarmony ArkUI開發(fā)框架擴(kuò)展到不同的OS平臺(tái),比如Android和iOS平臺(tái),讓開發(fā)者基于ArkUI,可復(fù)用大部分的應(yīng)用代碼(UI以及主要
    的頭像 發(fā)表于 05-19 21:05 ?592次閱讀
    鴻蒙<b class='flag-5'>ArkUI</b>-X跨平臺(tái)開發(fā):【 應(yīng)用工程結(jié)構(gòu)說明】

    鴻蒙跨平臺(tái)框架:【ArkUi-X】創(chuàng)建工程

    鴻蒙推出了鴻ArkUi-X 框架所以就寫個(gè)文章分享一下
    的頭像 發(fā)表于 05-13 17:48 ?950次閱讀
    鴻蒙跨平臺(tái)<b class='flag-5'>框架</b>:【<b class='flag-5'>ArkUi</b>-X】創(chuàng)建工程

    鴻蒙ArkUI:【從代碼到UI顯示的整體渲染流程】

    方舟開發(fā)框架(簡(jiǎn)稱ArkUI)是鴻蒙開發(fā)的UI框架,提供如下兩種開發(fā)范式,我們 **只學(xué)聲明式開發(fā)范式**
    的頭像 發(fā)表于 05-13 16:06 ?924次閱讀
    鴻蒙<b class='flag-5'>ArkUI</b>:【從代碼到UI顯示的整體渲染流程】

    鴻蒙開發(fā)學(xué)習(xí):初探【ArkUI-X】

    **簡(jiǎn)單來說,ArkTS + ArkUI-X 對(duì)標(biāo)的框架為 flutter,一次代碼,編譯為 native 全平臺(tái)運(yùn)行**
    的頭像 發(fā)表于 05-13 15:58 ?1038次閱讀
    鴻蒙開發(fā)學(xué)習(xí):初探【<b class='flag-5'>ArkUI</b>-X】

    鴻蒙ArkUI開發(fā)學(xué)習(xí):【渲染控制語法】

    ArkUI開發(fā)框架是一套構(gòu)建 HarmonyOS / OpenHarmony 應(yīng)用界面的聲明式UI開發(fā)框架,它支持程序使用?`if/else`?條件渲染,?`ForEach`?循環(huán)渲染以及?`LazyForEach`?懶加載渲染
    的頭像 發(fā)表于 04-09 16:40 ?1005次閱讀
    鴻蒙<b class='flag-5'>ArkUI</b>開發(fā)學(xué)習(xí):【渲染控制語法】

    鴻蒙ArkUI實(shí)例:【自定義組件】

    組件是 OpenHarmony 頁(yè)面最小顯示單元,一個(gè)頁(yè)面可由多個(gè)組件組合而成,也可只由一個(gè)組件組合而成,這些組件可以是ArkUI開發(fā)框架自帶系統(tǒng)組件,比如?`Text`?、?`Button`?等,也可以是自定義組件,本節(jié)筆者簡(jiǎn)單介紹一下自定義組件的語法規(guī)范。
    的頭像 發(fā)表于 04-08 10:17 ?643次閱讀

    跨Android、iOS、鴻蒙多平臺(tái)框架ArkUI-X

    ArkUI是一套構(gòu)建分布式應(yīng)用界面的聲明式UI開發(fā)框架。它使用極簡(jiǎn)的UI信息語法、豐富的UI組件、以及實(shí)時(shí)界面預(yù)覽工具,幫助您提升移動(dòng)應(yīng)用界面開發(fā)效率30%。您只需使用一套ArkTS API,就能
    的頭像 發(fā)表于 01-31 14:52 ?1795次閱讀
    跨Android、iOS、鴻蒙多平臺(tái)<b class='flag-5'>框架</b><b class='flag-5'>ArkUI</b>-X

    鴻蒙ArkUI開發(fā)-Tabs組件的使用

    鴻蒙ArkUI開發(fā)-Tabs組件的使用
    的頭像 發(fā)表于 01-19 16:01 ?1908次閱讀
    鴻蒙<b class='flag-5'>ArkUI</b>開發(fā)-Tabs組件的使用