Analisis ringkas mekanisme pengesanan perubahan Angular dan bagaimana untuk mengoptimumkan prestasi?

Apakah pengesanan perubahan? Artikel berikut akan membawa anda melalui mekanisme pengesanan perubahan dalam Angular, bercakap tentang cara pengesanan perubahan berfungsi dan memperkenalkan kaedah pengoptimuman prestasi pengesanan perubahan Sudut saya harap ia akan membantu semua orang.

Apakah Pengesanan Perubahan?

Konsep pengesanan perubahan

Selepas status data dalam komponen berubah, paparan perlu dikemas kini dengan sewajarnya. Mekanisme untuk menyegerakkan pandangan dan data ini dipanggil pengesanan perubahan. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

Masa pencetus pengesanan perubahan

Selagi operasi tak segerak berlaku (Acara, Pemasa , XHR ), Angular akan berfikir bahawa keadaan mungkin telah berubah, dan kemudian ia akan melakukan pengesanan perubahan.

• Acara:: klik, alih tetikus, tetikus keluar, keyup, keydown dan acara penyemak imbas lain;
XHR:
• Pelbagai permintaan, dsb.
• Memandangkan pengesanan perubahan dilakukan pada operasi tak segerak, bagaimanakah Angular melanggan permintaan tak segerak dan melaksanakan pengesanan perubahan? Di sini kami memperkenalkan
dan objek garpunya

.

digunakan untuk merangkum dan memintas aktiviti tak segerak dalam penyemak imbas Ia juga menyediakan NgZonecangkuk kitaran hayat tak segerakZone.js dan

mekanisme pengendalian ralat tak segerak bersatu.

Zone.js menggunakan Monyet Tampalan untuk memintas kaedah dan elemen biasa dalam penyemak imbas, seperti

dan

. Sudut menampal beberapa API penyemak imbas peringkat rendah pada permulaan menggunakan Zone.js untuk menangkap peristiwa tak segerak dan pengesanan perubahan panggilan selepas masa tangkapan. Angular garpu setTimeout dan mengembangkan kawasannya sendiri HTMLElement.prototype.onclick, supaya semua operasi tak segerak dalam aplikasi akan berjalan di kawasan ini. Zone.js

Bagaimanakah pengesanan perubahan Angular berfungsi? Zone.jsNgZone

Angualr akan menjana monitor perubahan

untuk setiap komponen untuk merekodkan status perubahan komponen. Selepas kami mencipta aplikasi Sudut, Angular juga akan mencipta tika

, yang mewakili tika aplikasi Sudut yang sedang kami buat. Apabila

dibuat, ia akan melanggan acara changeDetectoronMicrotaskEmpty

dalam ngZone, dan selepas semua tugasan mikro selesai, semua paparan'

akan dipanggil untuk melakukan pengesanan perubahan. ApplicationRefApplicationRefPerintah pelaksanaan pengesanan perubahandetectChanges()

Kemas kini sifat terikat kepada semua sub-subkomponen

• Panggilan semua cangkuk kitaran hayat subkomponen OnChanges, OnInit, DoCheck, AfterContentInit

• Kemas kini DOM komponen semasa

• Panggil pengesanan perubahan sub-komponen

• Panggil cangkuk kitaran hayat ngAfterViewInit semua sub-komponen

• Sebagai contoh, kita mungkin menghadapi ralat seperti ini apabila kita berada dalam mod pembangunan :

Ini kerana pengesanan perubahan mengikuti bermula dari komponen akar, dari atas ke bawah, melakukan pengesanan perubahan untuk setiap komponen sehingga komponen terakhir mencapai keadaan stabil. Sebelum pengesanan perubahan seterusnya, komponen keturunan tidak dibenarkan mengubah suai sifat dalam komponen induk.

Kes 1

Dalam mod pembangunan, Angular akan melaksanakan

pengesanan sekunder (apabila dipanggil dalam persekitaran pengeluaran, bilangan pengesanan akan dikurangkan untuk 1). Sebaik sahaja kami mengubah suai sifat komponen induk dalam komponen turunan selepas melengkapkan Langkah 4, maka apabila Angular melakukan pengesanan kedua dan mendapati bahawa kedua-dua nilai tidak konsisten, ralat di atas akan berlaku. enableProdMode()Kes 2

Selagi komponen induk mengikat sifat kepada komponen anak, tidak kira ia adalah sebarang hayat antara OnChanges, OnInit, DoCheck, AfterContentInit dan AfterViewInit Melaksanakan kod berikut dalam cangkuk kitaran juga akan melaporkan ralat.

Strategi pelaksanaan untuk pengesanan perubahan

// #parent
{{data}}
<child [data]="data"></child>

// in child component ts, execute:
this.parent.data = &#39;new Value&#39;;

Strategi lalai

• Strategi lalai ini menyemak setiap komponen dalam pepohon komponen dari atas ke bawah setiap kali peristiwa mencetuskan pengesanan perubahan (seperti acara pengguna, pemasa, XHR, janji, dll.). Kaedah semakan konservatif yang tidak membuat sebarang andaian tentang kebergantungan komponen dipanggil semakan kotor Strategi ini akan memberi kesan prestasi pada aplikasi kami apabila kami menggunakan terlalu banyak komponen.

• Strategi OnPush

  Ubah suai penghias komponenchangeDetection, selepas menetapkannya kepada strategi OnPush, Angular akan melangkau pengesanan perubahan komponen ini dan semua subkomponen komponen ini setiap kali ia mencetuskan pengesanan perubahan.

  Di bawah strategi OnPush, hanya situasi berikut akan mencetuskan pengesanan perubahan komponen:

  • Nilai input (@Input) berubah ( Nilai yang dimasukkan ke dalam input mestilah rujukan baharu)
  • Salah satu komponen atau subkomponen semasa mencetuskan acara (tetapi dalam strategi onPush, operasi berikut tidak akan mencetuskan pengesanan perubahan)
    • setTimeout()
    • setInterval()
    • Promise.resolve().then()
    • ini.http.get('...').subscribe()
  • Cutus pengesanan perubahan secara manual( Setiap komponen akan dikaitkan dengan paparan komponen ChangeDetectorRef)
    • detectChanges(): Ia akan mencetuskan pengesanan perubahan bagi komponen semasa dan sub-komponen
    • markForCheck(): Ia tidak akan mencetuskan pengesanan perubahan, tetapi ia akan menandakan komponen OnPush semasa dan semua komponen induk yang merupakan komponen OnPush sebagai memerlukan status pengesanan , dalam kitaran pengesanan perubahan semasa atau seterusnya untuk pengesanan
    • ApplicationRef.tick() : Ia akan mencetuskan pengesanan perubahan bagi keseluruhan aplikasi mengikut strategi pengesanan perubahan komponen
    
  • paip async

Cara mengoptimumkan Angular's ​​tukar pengesanan?

Memandangkan komponen melaksanakan Strategi lalai secara lalai, sebarang operasi tak segerak akan mencetuskan semakan bagi keseluruhan nombor komponen dari atas ke bawah. Walaupun pasukan Angular terus meningkatkan prestasi dan boleh menyelesaikan ratusan pengesanan dalam masa milisaat, apabila aplikasi berkembang kepada ratusan atau ribuan komponen, pengesanan perubahan yang sepadan dengan pepohon komponen besar akan mencapai kesesakan prestasi.

Pada ketika ini, kita perlu mula menganalisis dan mengurangkan bilangan ujian yang tidak perlu.

Bagaimana untuk mengurangkan bilangan ujian

• Pencemaran Zon (Pencemaran Zon)

  Secara amnya kita berada dalam kehidupan Pustaka pihak ketiga digunakan dalam cangkuk kitaran, seperti permulaan perpustakaan kelas carta, yang akan disertakan dengan requestAnimationRequest/setTimeout/addEventListener Kita boleh menulis kaedah permulaan ke dalam kaedah NgZone runOutsideAngular.

• Strategi OnPush

  Boleh dilucutkan untuk pandangan yang tidak melibatkan operasi kemas kini Keluar dari komponen dan gunakan strategi onPush untuk memuat semula paparan dengan memberitahu kemas kini (lihat bahagian Strategi Pelaksanaan untuk Pengesanan Perubahan di atas).

• Gunakan paip tulen bukannya {{fungsi(data)}}

  Dalam fail html, penulisan {{function(data)}} akan menyebabkan semua nilai dikira semula setiap kali pengesanan perubahan berlaku. (?: Apabila anda mempunyai senarai 1,000 item, anda hanya mengubah suai satu keping data, tetapi 999 keping data lain yang tidak perlu dikemas kini juga akan dikira semula.)

  Pada masa ini, kita boleh menggunakan kaedah paip, Hanya nilai yang berubah akan mencetuskan operasi dan mengemas kini sebahagian daripada paparan.

• Menghadapi pemaparan jumlah data yang besar, pilih tatal/penomboran maya untuk meminta data

  Penyelesaian 4 mata di atas datang daripada pengenalan video pasukan Angular Dalam video, Angular devtool digunakan untuk menganalisis bilangan operasi untuk menyelesaikan masalah. Jadi, jika anda mempunyai Angular 9, baca terus untuk mengetahui cara untuk mendapatkan Angular devtool aktif dan berjalan.

插件：Angular devtool使用介绍

• Angular 9+, 支持Ivy。
• Guide和下载地址
• 保证运行环境为开发环境

  // environment.dev.ts
  ...
      production: false
  ...

• angular.json > dev配置项 > "optimization": false

  projects > your-project-name > architect > build > configurations > dev > "optimization": false

更多编程相关知识，请访问：编程教学！！

Atas ialah kandungan terperinci Analisis ringkas mekanisme pengesanan perubahan Angular dan bagaimana untuk mengoptimumkan prestasi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!