鴻蒙開發(fā)性能提升之代碼實踐

低性能的代碼實現(xiàn)功能場景可能不會影響應(yīng)用的正常運行，但卻會對應(yīng)用的性能造成負(fù)面影響店雅。本文列舉出了一些可提升性能的場景供參考政基。

使用數(shù)據(jù)懶加載

開發(fā)者在使用長列表時，如果直接采用循環(huán)渲染方式闹啦，如下所示沮明，會一次性加載所有的列表元素，一方面會導(dǎo)致頁面啟動時間過長亥揖，影響用戶體驗珊擂，另一方面也會增加服務(wù)器的壓力和流量圣勒，加重系統(tǒng)負(fù)擔(dān)费变。

@Entry
@Component
struct MyComponent {
  @State arr: number[] = Array.from(Array(100), (v,k) =>k);  //構(gòu)造0-99的數(shù)組
  build() {
    List() {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text(`item value: ${item}`)
        }
      }, (item: number) => item.toString())
    }
  }
}

上述代碼會在頁面加載時將100個列表元素全部加載，這并非我們需要的圣贸，我們希望從數(shù)據(jù)源中按需迭代加載數(shù)據(jù)并創(chuàng)建相應(yīng)組件挚歧，因此需要使用數(shù)據(jù)懶加載，如下所示：

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []

  public totalCount(): number {
    return 0
  }

  public getData(index: number): any {
    return undefined
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener')
      this.listeners.push(listener)
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener')
      this.listeners.splice(pos, 1)
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index)
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index)
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index)
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to)
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: string[] = ['item value: 0', 'item value: 1', 'item value: 2']

  public totalCount(): number {
    return this.dataArray.length
  }

  public getData(index: number): any {
    return this.dataArray[index]
  }

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data)
    this.notifyDataAdd(index)
  }

  public pushData(data: string): void {
    this.dataArray.push(data)
    this.notifyDataAdd(this.dataArray.length - 1)
  }
}

@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource()

  build() {
    List() {
      LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Text(item).fontSize(20).margin({ left: 10 })
          }
        }
        .onClick(() => {
          this.data.pushData('item value: ' + this.data.totalCount())
        })
      }, item => item)
    }
  }
}

上述代碼在頁面加載時僅初始化加載三個列表元素吁峻，之后每點擊一次列表元素滑负，將增加一個列表元素。

設(shè)置List組件的寬高

在使用Scroll容器組件嵌套List組件加載長列表時用含，若不指定List的寬高尺寸矮慕，則默認(rèn)全部加載。

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []

  public totalCount(): number {
    return 0
  }

  public getData(index: number): any {
    return undefined
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener')
      this.listeners.push(listener)
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener')
      this.listeners.splice(pos, 1)
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index)
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index)
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index)
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to)
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: Array<string> = new Array(100).fill('test')

  public totalCount(): number {
    return this.dataArray.length
  }

  public getData(index: number): any {
    return this.dataArray[index]
  }

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data)
    this.notifyDataAdd(index)
  }

  public pushData(data: string): void {
    this.dataArray.push(data)
    this.notifyDataAdd(this.dataArray.length - 1)
  }
}

@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource()

  build() {
    Scroll() {
      List() {
        LazyForEach(this.data, (item: string, index: number) => {
          ListItem() {
            Row() {
              Text('item value: ' + item + (index + 1)).fontSize(20).margin(10)
            }
          }
        })
      }
    }
  }
}

因此啄骇，此場景下建議設(shè)置List子組件的寬高痴鳄。

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []

  public totalCount(): number {
    return 0
  }

  public getData(index: number): any {
    return undefined
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener')
      this.listeners.push(listener)
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener')
      this.listeners.splice(pos, 1)
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded()
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index)
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index)
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index)
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to)
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: Array<string> = new Array(100).fill('test')

  public totalCount(): number {
    return this.dataArray.length
  }

  public getData(index: number): any {
    return this.dataArray[index]
  }

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data)
    this.notifyDataAdd(index)
  }

  public pushData(data: string): void {
    this.dataArray.push(data)
    this.notifyDataAdd(this.dataArray.length - 1)
  }
}

@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource()

  build() {
    Scroll() {
      List() {
        LazyForEach(this.data, (item: string, index: number) => {
          ListItem() {
            Text('item value: ' + item + (index + 1)).fontSize(20).margin(10)
          }.width('100%')
        })
      }.width('100%').height(500)
    }.backgroundColor(Color.Pink)
  }
}

使用條件渲染替代顯隱控制

如下所示，開發(fā)者在使用visibility通用屬性控制組件的顯隱狀態(tài)時缸夹，仍存在組件的重新創(chuàng)建過程痪寻，造成性能上的損耗螺句。

@Entry
@Component
struct MyComponent {
  @State isVisible: Visibility = Visibility.Visible;

  build() {
    Column() {
      Button("顯隱切換")
        .onClick(() => {
          if (this.isVisible == Visibility.Visible) {
            this.isVisible = Visibility.None
          } else {
            this.isVisible = Visibility.Visible
          }
        })
      Row().visibility(this.isVisible)
        .width(300).height(300).backgroundColor(Color.Pink)
    }.width('100%')
  }
}

要避免這一問題纹腌，可使用if條件渲染代替visibility屬性變換贾节，如下所示：

@Entry
@Component
struct MyComponent {
  @State isVisible: boolean = true;

  build() {
    Column() {
      Button("顯隱切換")
        .onClick(() => {
          this.isVisible = !this.isVisible
        })
      if (this.isVisible) {
        Row()
          .width(300).height(300).backgroundColor(Color.Pink)
      }
    }.width('100%')
  }
}

使用Column/Row替代Flex

由于Flex容器組件默認(rèn)情況下存在shrink導(dǎo)致二次布局稿黄，這會在一定程度上造成頁面渲染上的性能劣化载慈。

@Entry
@Component
struct MyComponent {
  build() {
    Flex({ direction: FlexDirection.Column }) {
      Flex().width(300).height(200).backgroundColor(Color.Pink)
      Flex().width(300).height(200).backgroundColor(Color.Yellow)
      Flex().width(300).height(200).backgroundColor(Color.Grey)
    }
  }
}

上述代碼可將Flex替換為Column谅海、Row衙伶，在保證實現(xiàn)的頁面布局效果相同的前提下避免Flex二次布局帶來的負(fù)面影響蒲每。

@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      Row().width(300).height(200).backgroundColor(Color.Pink)
      Row().width(300).height(200).backgroundColor(Color.Yellow)
      Row().width(300).height(200).backgroundColor(Color.Grey)
    }
  }
}

減少應(yīng)用滑動白塊

應(yīng)用通過增大List/Grid控件的cachedCount參數(shù)忌卤，調(diào)整UI的加載范圍研侣。cachedCount表示屏幕外List/Grid預(yù)加載item的個數(shù)勇凭。

如果需要請求網(wǎng)絡(luò)圖片，可以在item滑動到屏幕顯示之前义辕，提前下載好內(nèi)容虾标，從而減少滑動白塊。

如下是使用cachedCount參數(shù)的例子：

@Entry
@Component
struct MyComponent {
  private source: MyDataSource = new MyDataSource();

  build() {
    List() {
      LazyForEach(this.source, item => {
        ListItem() {
          Text("Hello" + item)
            .fontSize(50)
            .onAppear(() => {
              console.log("appear:" + item)
            })
        }
      })
    }.cachedCount(3) // 擴(kuò)大數(shù)值appear日志范圍會變大
  }
}

class MyDataSource implements IDataSource {
  data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

  public totalCount(): number {
    return this.data.length
  }

  public getData(index: number): any {
    return this.data[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
  }
}

使用說明：

cachedCount的增加會增大UI的cpu灌砖、內(nèi)存開銷璧函。使用時需要根據(jù)實際情況，綜合性能和用戶體驗進(jìn)行調(diào)整基显。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末蘸吓，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子撩幽，更是在濱河造成了極大的恐慌库继，老刑警劉巖，帶你破解...
沈念sama閱讀 206,311評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件窜醉，死亡現(xiàn)場離奇詭異宪萄，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)榨惰，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,339評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門拜英，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人琅催，你說我怎么就攤上這事居凶。” “怎么了藤抡？”我有些...
開封第一講書人閱讀 152,671評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵侠碧，是天一觀的道長。經(jīng)常有香客問我缠黍，道長弄兜，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,252評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮挨队，結(jié)果婚禮上谷暮，老公的妹妹穿的比我還像新娘。我一直安慰自己盛垦，他們只是感情好湿弦，可當(dāng)我...
茶點故事閱讀 64,253評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著腾夯，像睡著了一般颊埃。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上蝶俱，一...
開封第一講書人閱讀 49,031評論 1贊 285
城市分裂傳說
那天班利，我揣著相機(jī)與錄音，去河邊找鬼榨呆。笑死罗标，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的积蜻。我是一名探鬼主播闯割，決...
沈念sama閱讀 38,340評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼竿拆！你這毒婦竟也來了宙拉？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 36,973評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤丙笋，失蹤者是張志新（化名）和其女友劉穎谢澈，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體御板，經(jīng)...
沈念sama閱讀 43,466評論 1贊 300
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡锥忿，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,937評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了稳吮。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缎谷。...
茶點故事閱讀 38,039評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖灶似，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情瑞你，我是刑警寧澤酪惭，帶...
沈念sama閱讀 33,701評論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站者甲，受9級特大地震影響春感，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,254評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一鲫懒、第九天我趴在偏房一處隱蔽的房頂上張望嫩实。院中可真熱鬧，春花似錦窥岩、人聲如沸甲献。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,259評論 0贊 19
一樁弒父案颂翼，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽晃洒。三九已至，卻和暖如春朦乏，著一層夾襖步出監(jiān)牢的瞬間球及，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,485評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工呻疹，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留吃引，地道東北人。一個月前我還...
沈念sama閱讀 45,497評論 2贊 354
代替公主和親
正文我出身青樓刽锤，卻偏偏與公主長得像际歼，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子姑蓝，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,786評論 2贊 345