在鴻蒙應(yīng)用開發(fā)中，部分應(yīng)用頁(yè)面在滑動(dòng)時(shí)會(huì)出現(xiàn)白塊或白屏的問(wèn)題，不僅困擾開發(fā)者，還直接影響用戶體驗(yàn)。針對(duì)這一痛點(diǎn)，華為近期分別推出了針對(duì)鴻蒙原生應(yīng)用ArkUI頁(yè)面及Web頁(yè)面的滑動(dòng)白塊與白屏問(wèn)題的解決方案，通過(guò)創(chuàng)新技術(shù)手段解決不同技術(shù)棧下的性能瓶頸，為開發(fā)者提供更流暢的頁(yè)面渲染體驗(yàn)，有效提升鴻蒙應(yīng)用的頁(yè)面滑動(dòng)流暢度。

ArkUI頁(yè)面動(dòng)態(tài)預(yù)加載：兼顧應(yīng)用首頁(yè)速度與滑動(dòng)流暢性

在ArkUI頁(yè)面中，滑動(dòng)時(shí)出現(xiàn)白塊現(xiàn)象是開發(fā)者常遇到的技術(shù)難題，且大多數(shù)情況在使用imageKnife后仍存在相應(yīng)問(wèn)題。傳統(tǒng)的優(yōu)化方式主要依賴于增加cachedCount緩存數(shù)量，但這一方法往往帶來(lái)新的問(wèn)題，例如首頁(yè)白屏或內(nèi)存占用增加，影響整體體驗(yàn)。為了解決這一痛點(diǎn)，華為提供了一種基于動(dòng)態(tài)預(yù)加載的方案，通過(guò)將LazyForEach+ImageKnife和Repeat+ImageKnife兩種技術(shù)組合，精準(zhǔn)優(yōu)化頁(yè)面渲染過(guò)程。這一方案不僅能有效避免ImageKnife導(dǎo)致的圖片加載延遲問(wèn)題，同時(shí)還能縮短LazyForEach的首屏加載時(shí)間，為開發(fā)者帶來(lái)更優(yōu)的頁(yè)面加載體驗(yàn)，同時(shí)提升用戶的視覺流暢度。

該方案通過(guò)實(shí)現(xiàn)Prefetcher接口監(jiān)聽數(shù)據(jù)項(xiàng)的變化，動(dòng)態(tài)控制資源的下載與取消，并結(jié)合ImageKnife三方庫(kù)實(shí)現(xiàn)具體的預(yù)取和緩存管理。這種動(dòng)態(tài)預(yù)加載策略突破了以往解決方案的局限性，提供了一種更加智能、高效的頁(yè)面優(yōu)化方式，既解決了滑動(dòng)過(guò)程中圖片加載不及時(shí)導(dǎo)致的卡頓白塊，又避免了首頁(yè)白屏問(wèn)題，同時(shí)降低內(nèi)存壓力。華為與鴻蒙生態(tài)中的應(yīng)用伙伴通力合作，在多個(gè)實(shí)際應(yīng)用場(chǎng)景中驗(yàn)證了該方案的可行性，幫助使用imageKnife的10多位伙伴解決了滑動(dòng)白塊問(wèn)題。

目前，該方案的相關(guān)代碼庫(kù)和文檔已通過(guò)開源社區(qū)及技術(shù)平臺(tái)開放，開發(fā)者可訪問(wèn)Gitee、思否、51CTO、CSDN等平臺(tái)獲取詳細(xì)指南。

Gitee鏈接：

https://gitee.com/ohadss/white_block_solution?login=from_csdn

思否鏈接：

https://segmentfault.com/a/1190000046046687

51CTO鏈接：

https://ost.51cto.com/posts/31432

CSDN鏈接：

https://harmonyosdev.csdn.net/678f60a2911edf5f3b042b1b.html

Web頁(yè)面全局組件復(fù)用庫(kù)：預(yù)加載資源場(chǎng)景實(shí)現(xiàn)“零等待”

在Web頁(yè)面的優(yōu)化上，華為也帶來(lái)了全新的技術(shù)方案。Web頁(yè)面在加載過(guò)程中，常因資源下載耗時(shí)導(dǎo)致頁(yè)面卡頓、丟幀、白塊問(wèn)題，影響用戶體驗(yàn)。傳統(tǒng)的原生容器組件無(wú)法直接預(yù)渲染W(wǎng)eb組件，因此開發(fā)者通常需要自行維護(hù)節(jié)點(diǎn)池，開發(fā)成本高昂。而華為提供的全局自定義組件復(fù)用三方庫(kù)“nodepool”，則通過(guò)BuilderNode創(chuàng)建全局自定義組件復(fù)用池，實(shí)現(xiàn)跨頁(yè)面的Web組件復(fù)用及自動(dòng)化的入池、出池管理，極大地簡(jiǎn)化了Web頁(yè)面的開發(fā)流程。

基于“nodepool”的持續(xù)優(yōu)化，這一方案在原生頁(yè)面的高性能滑動(dòng)體驗(yàn)上，已經(jīng)實(shí)現(xiàn)了對(duì)競(jìng)品的超越，并提供了一種簡(jiǎn)單易用的全局組件復(fù)用能力，大幅提升開發(fā)者的開發(fā)效率，讓代碼量減少200行以上。在降低開發(fā)難度的同時(shí)，該方案還通過(guò)優(yōu)化資源加載與渲染流程，大幅降低了滑動(dòng)卡頓和丟幀率，使Web頁(yè)面的加載幾乎可達(dá)到“秒開”效果。以某頭部旅行應(yīng)用為例，在應(yīng)用該方案后，Web頁(yè)面的預(yù)加載體驗(yàn)得到顯著提升，頁(yè)面基本能夠?qū)崿F(xiàn)瞬時(shí)打開，從根本上解決了預(yù)加載資源耗時(shí)過(guò)長(zhǎng)的問(wèn)題。

目前，“nodepool”已上線OpenHarmony社區(qū)三方庫(kù)中心倉(cāng)，開發(fā)者可訪問(wèn)“OpenHarmony官網(wǎng)”，點(diǎn)擊“開發(fā)者”——>“三方庫(kù)中心倉(cāng)”——>搜索“nodepool”，下載使用。

更多關(guān)于“nodepool”的詳細(xì)信息和使用指南，請(qǐng)?jiān)L問(wèn)：

https://ohpm.openharmony.cn/#/cn/detail/@hadss%2Fnodepool/v/1.0.2-rc.0

華為此次推出的ArkUI與Web頁(yè)面滑動(dòng)白塊/白屏解決方案，不僅優(yōu)化了鴻蒙應(yīng)用的頁(yè)面加載性能，更顯著降低了開發(fā)者實(shí)現(xiàn)高性能滑動(dòng)效果的門檻。歡迎更多開發(fā)者應(yīng)用廠商使用和反饋，共同提升鴻蒙應(yīng)用的性能與體驗(yàn)。

未來(lái)華為也將持續(xù)攜手生態(tài)伙伴共建創(chuàng)新，面向底座技術(shù)、通用能力、垂類行業(yè)等場(chǎng)景推出系列開發(fā)者場(chǎng)景化解決方案，不斷提升鴻蒙原生應(yīng)用的創(chuàng)新體驗(yàn)和開發(fā)效率，與廣大開發(fā)者共建繁榮的鴻蒙生態(tài)。