Dalam urutan apa Panel paling efisien dalam hal waktu dan kinerja render?

127

Ada banyak waktu ketika lebih dari satu panel akan cocok untuk tata letak yang saya inginkan, namun saya tahu ada perbedaan waktu render untuk jenis panel yang berbeda.

Sebagai contoh, MSDN menyatakan itu

Yang relatif sederhana Panel, seperti Canvas, dapat memiliki kinerja yang jauh lebih baik daripada yang lebih kompleks Panel, seperti Grid.

Jadi dalam hal waktu dan kinerja render, dalam urutan apa panel WPF yang paling efisien?

Panel WPF:

  • Canvas
  • DockPanel
  • Grid
  • UniformGrid
  • StackPanel
  • WrapPanel
  • VirtualizingPanel / VirtualizingStackPanel

Saya cukup yakin saya melihat daftar ini di suatu tempat online, tetapi saya tidak dapat menemukannya sekarang.

Jawaban ideal yang saya cari akan memberi saya daftar panel dengan urutan yang paling cepat. Saya mengerti jumlah anak adalah faktor besar dalam seberapa efisien panelnya, jadi untuk pertanyaan ini, anggap setiap panel hanya memiliki Label/ TextBoxpasangan.

Selain itu, saya ingin daftar pengecualian, seperti panel khusus yang berkinerja lebih baik daripada yang lain berdasarkan kondisi tertentu.

Memperbarui

Untuk meringkas berdasarkan jawaban yang diterima di bawah ini, kinerja panel didasarkan pada jumlah dan tata letak item anak, namun secara umum daftar dari tercepat ke paling lambat adalah:

  • Canvas
  • StackPanel
  • WrapPanel
  • DockPanel
  • Grid

Selain itu, a VirtualizingPanel/ VirtualizingStackPanelharus selalu digunakan jika ada banyak item yang tidak selalu pas di layar.

Saya sangat menyarankan Anda membaca jawaban yang diterima di bawah ini untuk detail lebih lanjut sebelum hanya memilih item dari daftar ini.

Rachel
sumber
Apakah naif untuk mengasumsikan bahwa panel virtualisasi akan selalu berkinerja lebih baik daripada panel non-virtualisasi?
BoltClock
@BoltClock Saya pikir itu tergantung pada seberapa banyak konten yang tidak terlihat di panel. Jika ada banyak item yang tidak terlihat, a VirtualizingStackPanelpasti akan berkinerja lebih baik, tetapi jika semua item yang ditampilkan di panel terlihat daripada yang saya pikir lebih baik menggunakan panel biasa.
Rachel
Terima kasih. Masuk akal bahwa itu akan menjadi barang virtualisasi yang sia-sia, ketika semuanya akan tetap ditampilkan.
BoltClock
Selain virtualisasi, mereka memiliki fitur yang berbeda atau mereka tidak akan menjadi kontrol yang terpisah. Saya setuju dengan apa yang menyediakan UI terbaik bagi pelanggan.
paparazzo
1
Apakah Anda yakin ada perbedaan yang nyata (selain dari Virtualisasi)? Yang harus mereka lakukan adalah melakukan algoritma tata letak yang relatif ringan. Mungil dibandingkan dengan semua render yang akan mengikuti. Karena itu, Grid mungkin akan menjadi yang paling lambat (penskalaan tertimbang).
Henk Holterman

Jawaban:

130

Saya pikir lebih ringkas dan mudah dipahami untuk menggambarkan karakteristik kinerja setiap panel daripada mencoba memberikan perbandingan kinerja relatif absolut.

WPF membuat dua lintasan saat merender konten: Ukur dan Atur. Setiap panel memiliki karakteristik kinerja yang berbeda untuk masing-masing dua lintasan ini.

Performa pass ukur paling dipengaruhi oleh kemampuan panel untuk mengakomodasi peregangan menggunakan penyelarasan (atau Otomatis dalam kasus Grid) dan kemudian jumlah anak yang diregangkan atau berukuran otomatis. Kinerja pass Arrange dipengaruhi oleh kompleksitas interaksi antara lokasi tata letak anak-anak yang berbeda dan tentu saja jumlah anak.

Kadang-kadang panel yang diberikan tidak mudah meminjamkan diri ke tata letak yang dibutuhkan. Saya membuat kontrol yang membutuhkan jumlah item yang sewenang-wenang untuk masing-masing diposisikan pada persentase tertentu dari ruang yang tersedia. Tidak ada kontrol default yang melakukan ini. Mencoba membuat mereka melakukan ini (melalui pengikatan dengan ukuran sebenarnya dari induk) menghasilkan kinerja yang mengerikan. Saya membuat panel tata letak berdasarkan Canvas yang mencapai hasil yang saya inginkan dengan pekerjaan minimal (saya menyalin sumber untuk kanvas dan memodifikasi sekitar 20 baris darinya).

Panel yang tersedia:

  • Kanvas

    Menentukan area di mana Anda dapat secara eksplisit memposisikan elemen anak dengan koordinat relatif terhadap area Kanvas.

    Kanvas memiliki kinerja terbaik dari semua panel untuk kartu pass pengaturan karena setiap item secara statis ditetapkan sebagai lokasi. Ukuran lulus juga memiliki kinerja yang sangat baik karena tidak ada konsep peregangan di panel ini; setiap anak cukup menggunakan ukuran aslinya.

  • DockPanel

    Menentukan area di mana Anda dapat mengatur elemen anak baik secara horizontal atau vertikal, relatif satu sama lain.

    Dockpanel memiliki skema tata letak yang sangat sederhana di mana item ditambahkan satu per satu relatif terhadap item sebelumnya yang ditambahkan. Secara default baik tinggi atau lebar ditentukan oleh ukuran asli item (berdasarkan masing-masing Atas / Bawah vs Kiri / Kanan) dan arah lainnya ditentukan oleh Dockproperti jika lebar atau tinggi tidak ditentukan. Kartu pass ukuran sedang ke cepat dan kartu pengaturan menengah ke cepat.

  • Kisi

    Menentukan area kisi yang fleksibel yang terdiri dari kolom dan baris.

    Ini bisa menjadi panel paling intensif kinerja jika ukuran proporsional atau ukuran otomatis digunakan. Menghitung ukuran item anak dapat merupakan kombinasi kompleks dari ukuran asli item dan tata letak yang ditentukan oleh kisi. Layout juga yang paling rumit dari semua panel. Kinerja lambat hingga sedang untuk pengukuran lulus dan kinerja lambat hingga sedang untuk pengaturan lulus.

  • StackPanel

    Mengatur elemen anak menjadi satu garis yang dapat diorientasikan secara horizontal atau vertikal.

    StackPanel mengukur anak-anaknya menggunakan ukuran asli atau relatif pada arah yang berlawanan dari orientasinya dan ukuran asli dalam arah orientasinya (penyelarasan tidak melakukan apa pun dalam arah ini). Ini membuatnya menjadi pemain tingkat menengah di area ini. Pass Arrangement sederhana, hanya meletakkan item dalam urutan. Mungkin performa terbaik kedua untuk pass ini. Performa sedang untuk pass pengukuran dan kinerja cepat untuk pass layout.

  • Panel Virtualisasi

    Menyediakan kerangka kerja untuk elemen Panel yang memvirtualisasi pengumpulan data anak mereka. Ini adalah kelas abstrak.

    Kelas dasar untuk mengimplementasikan panel virtualisasi Anda sendiri. Hanya memuat item yang terlihat untuk mencegah penggunaan memori dan prosesor yang tidak dibutuhkan. JAUH lebih banyak performant untuk set item. Mungkin sedikit performan untuk item yang pas di layar karena batas memeriksa. SDK hanya menyediakan satu subclass dari ini, the VirtualizingStackPanel.

  • WrapPanel

    Memposisikan elemen anak dalam posisi berurutan dari kiri ke kanan, memecah konten ke baris berikutnya di tepi kotak yang berisi. Pemesanan berikutnya terjadi secara berurutan dari atas ke bawah atau dari kanan ke kiri, tergantung pada nilai properti Orientation.

    Pass pengukuran adalah pass yang agak rumit di mana item terbesar untuk baris tertentu menentukan ketinggian baris dan kemudian setiap item pada baris tersebut menggunakan tinggi asli (jika memiliki satu) atau tinggi baris. Tata letak lulus sederhana, menempatkan setiap item satu demi satu pada satu baris dan kemudian melanjutkan ke baris berikutnya ketika tidak ada cukup ruang untuk item berikutnya. Lulus pengukuran kinerja menengah. Performa sedang hingga cepat untuk pengaturan pass.

Referensi:

Gunakan Panel Paling Efisien jika Mungkin

Kompleksitas proses tata letak secara langsung didasarkan pada perilaku tata letak elemen yang diturunkan Panel yang Anda gunakan. Misalnya, kontrol Grid atau StackPanel menyediakan lebih banyak fungsi daripada kontrol Canvas. Harga untuk peningkatan fungsionalitas yang lebih besar ini adalah peningkatan biaya kinerja yang lebih besar. Namun, jika Anda tidak memerlukan fungsionalitas yang disediakan oleh kontrol Grid, Anda harus menggunakan alternatif yang lebih murah, seperti Kanvas atau panel khusus.

Dari Mengoptimalkan Kinerja: Tata Letak dan Desain

Sistem tata letak melengkapi dua lintasan untuk setiap anggota koleksi Anak-anak, satu pass ukur dan pass pass. Setiap Panel anak menyediakan metode MeasureOverride dan ArrangeOverride sendiri untuk mencapai perilaku tata letak spesifiknya sendiri.

Selama lulus pengukuran, setiap anggota koleksi Anak-anak dievaluasi. Proses dimulai dengan panggilan ke metode Measure. Metode ini disebut dalam implementasi elemen Panel induk, dan tidak harus dipanggil secara eksplisit agar tata letak dapat terjadi.

Pertama, properti ukuran asli dari UIElement dievaluasi, seperti Klip dan Visibilitas. Ini menghasilkan nilai bernama constraintSize yang diteruskan ke MeasureCore.

Kedua, properti kerangka kerja yang didefinisikan pada FrameworkElement diproses, yang memengaruhi nilai constraintSize. Properti ini umumnya menggambarkan karakteristik ukuran UIElement yang mendasarinya, seperti Tinggi, Lebar, Margin, dan Gaya. Masing-masing properti ini dapat mengubah ruang yang diperlukan untuk menampilkan elemen. MeasureOverride kemudian dipanggil dengan constraintSize sebagai parameter.

Catatan Ada perbedaan antara properti Tinggi dan Lebar dan Tinggi Aktual dan AktualWidth. Misalnya, properti ActualHeight adalah nilai yang dihitung berdasarkan input ketinggian lain dan sistem tata letak. Nilai ditentukan oleh sistem tata letak itu sendiri, berdasarkan pass rendering aktual, dan karena itu mungkin sedikit tertinggal dari nilai properti yang ditetapkan, seperti Tinggi, yang merupakan dasar dari perubahan input. Karena ActualHeight adalah nilai yang dihitung, Anda harus menyadari bahwa mungkin ada beberapa atau beberapa perubahan yang dilaporkan sebagai hasil dari berbagai operasi oleh sistem tata letak. Sistem tata letak dapat menghitung ruang ukuran yang diperlukan untuk elemen anak, batasan oleh elemen induk, dan sebagainya. Tujuan akhir dari langkah pengukur adalah agar anak menentukan DesiredSize-nya, yang terjadi selama panggilan MeasureCore. Nilai DesiredSize disimpan oleh Measure untuk digunakan selama pass pengaturan konten.

Kartu akses diawali dengan panggilan ke metode Atur. Selama pass pengaturan, elemen Panel induk menghasilkan persegi panjang yang mewakili batas-batas anak. Nilai ini diteruskan ke metode ArrangeCore untuk diproses.

Metode ArrangeCore mengevaluasi DesiredSize dari anak dan mengevaluasi setiap margin tambahan yang dapat mempengaruhi ukuran elemen yang diberikan. ArrangeCore menghasilkan tata letak, yang diteruskan ke metode ArrangeOverride Panel sebagai parameter. ArrangeOverride menghasilkan Ukuran final anak. Akhirnya, metode ArrangeCore melakukan evaluasi akhir dari properti offset, seperti margin dan alignment, dan menempatkan anak dalam slot tata letak. Anak tidak harus (dan sering tidak) mengisi seluruh ruang yang dialokasikan. Kontrol kemudian dikembalikan ke Panel induk dan proses tata letak selesai.

Dari Mengukur dan Mengatur Anak

N_A
sumber
1
Menanggapi komentar yang sekarang dihapus: Saya tidak memasukkan metrik karena itu tidak akan membantu. Ada terlalu banyak kombinasi agar spreadsheet tidak berguna. Metode yang lebih berguna untuk mengoptimalkan kinerja adalah dengan menggunakan pemahaman umum untuk memilih panel tata letak awal dan kemudian mengoptimalkan sesuai kebutuhan dari sana menggunakan analisis situasi aktual.
N_A
Terima kasih, penjelasan Anda bagaimana panel WPF benar-benar dirender, dan kinerja Measure / Arrange masing-masing panel jauh lebih baik daripada yang saya minta :)
Rachel
@ mydogisbox Saya tidak melihat UniformGriddaftar Anda di mana pun. Apakah Anda dapat memperbarui jawaban Anda dengan panel itu dan diperkirakan Mengukur / Mengatur kinerja sehubungan dengan jenis panel lainnya?
Rachel
1
@Rachel Ini UniformGridtidak dimaksudkan untuk digunakan dalam tata letak aplikasi. Lihat "Derived Panel Elements" di sini: msdn.microsoft.com/en-us/library/ms754152.aspx untuk informasi lebih lanjut. Dari segi kecepatan seharusnya sedikit lebih cepat dari a DockPaneldan sedikit lebih lambat dari a Canvas.
N_A
12

Mungkin ini akan membantu Anda.

Tidak hanya untuk panel tetapi juga untuk setiap aplikasi yang ingin Anda buat di WPF.

Ini menyimpulkan gambar WPF & mengukur kinerja.

Ini juga memiliki aplikasi tes menggambar, hasil, dan kesimpulan informasi untuk sistem operasi yang berbeda yang ingin Anda targetkan.

mike_sev
sumber
8

Panel yang Anda sebutkan adalah panel Tata Letak sehingga gambaran umum singkat dari sistem tata letak menunjukkan bahwa itu kemungkinan tidak akan menjadi daftar sederhana dari panel yang paling efisien tetapi bagaimana Anda menggunakan panel yang memiliki efek terbesar pada efisiensi dan kinerja.

LayoutSystem_Overview :

Paling sederhana, tata letak adalah sistem rekursif yang mengarah ke elemen yang diukur, diposisikan, dan digambar. Lebih khusus lagi, tata letak menjelaskan proses mengukur dan mengatur anggota koleksi Anak-anak elemen Panel. Layout adalah proses yang intensif. Semakin besar koleksi Children, semakin besar jumlah perhitungan yang harus dilakukan. Kompleksitas juga dapat diperkenalkan berdasarkan perilaku tata letak yang ditentukan oleh elemen Panel yang memiliki koleksi. Panel yang relatif sederhana, seperti Canvas, dapat memiliki kinerja yang jauh lebih baik daripada Panel yang lebih kompleks, seperti Grid.

Setiap kali UIElement anak mengubah posisinya, ia berpotensi memicu lintasan baru oleh sistem tata letak. Oleh karena itu, penting untuk memahami peristiwa yang dapat memicu sistem tata letak, karena pemanggilan yang tidak perlu dapat menyebabkan kinerja aplikasi yang buruk. Berikut ini menjelaskan proses yang terjadi ketika sistem tata letak dipanggil.

1. UIElement anak memulai proses tata letak dengan terlebih dahulu mengukur properti intinya.

2. Properti ukuran yang didefinisikan pada FrameworkElement dievaluasi, seperti Lebar, Tinggi, dan Margin.

3. Logika khusus panel diterapkan, seperti arah Dock atau Orientasi susun.

4. Konten diatur setelah semua anak diukur.

5. Koleksi Children digambar di layar.

6. Proses dipanggil lagi jika Anak tambahan ditambahkan ke koleksi, LayoutTransform diterapkan, atau metode UpdateLayout dipanggil.

Lihat LayoutSystem_Measure_Arrange untuk informasi lebih lanjut tentang pengukuran dan pengaturan anak-anak

LayoutSystem_Performance :

Layout adalah proses rekursif. Setiap elemen anak dalam koleksi Children akan diproses selama setiap pemanggilan sistem tata letak. Akibatnya, memicu sistem tata letak harus dihindari ketika tidak perlu. Pertimbangan berikut dapat membantu Anda mencapai kinerja yang lebih baik.

Waspadai perubahan nilai properti mana yang akan memaksa pembaruan rekursif oleh sistem tata letak.

Properti ketergantungan yang nilainya dapat menyebabkan sistem tata letak diinisialisasi ditandai dengan bendera publik. AffectsMeasure dan AffectsArrange memberikan petunjuk yang berguna tentang perubahan nilai properti yang akan memaksa pembaruan rekursif oleh sistem tata letak. Secara umum, properti apa pun yang dapat memengaruhi ukuran kotak pembatas elemen harus memiliki flag AffectsMeasure yang disetel ke true. Untuk informasi lebih lanjut, lihat Ikhtisar Properti Ketergantungan.

Jika memungkinkan, gunakan RenderTransform alih-alih LayoutTransform.

LayoutTransform dapat menjadi cara yang sangat berguna untuk memengaruhi konten antarmuka pengguna (UI). Namun, jika efek transformasi tidak harus berdampak pada posisi elemen lain, yang terbaik adalah menggunakan RenderTransform sebagai gantinya, karena RenderTransform tidak menggunakan sistem tata letak. LayoutTransform menerapkan transformasi dan memaksa pembaruan tata letak rekursif untuk memperhitungkan posisi baru elemen yang terpengaruh.

Hindari panggilan yang tidak perlu ke UpdateLayout.

Metode UpdateLayout memaksa pembaruan tata letak rekursif, dan seringkali tidak diperlukan. Kecuali Anda yakin bahwa pembaruan penuh diperlukan, bergantung pada sistem tata letak untuk memanggil metode ini untuk Anda.

Saat bekerja dengan koleksi Anak besar, pertimbangkan untuk menggunakan VirtualizingStackPanel, bukan StackPanel biasa.

Dengan memvirtualisasi koleksi anak, VirtualizingStackPanel hanya menyimpan objek dalam memori yang saat ini berada dalam ViewPort induk. Akibatnya, kinerja meningkat secara substansial di sebagian besar skenario.

Mengoptimalkan Kinerja: Tata Letak dan Desain : Artikel ini menjelaskan secara rinci tentang cara membangun pohon secara efisien dan memberikan daftar panel sederhana berdasarkan kerumitannya

Kanvas (paling tidak rumit = kinerja lebih efisien dan lebih baik)

Kisi

Panel Lainnya (lebih kompleks = kurang efisien dan kinerja lebih buruk)

Pertimbangan kinerja lain yang perlu diperhatikan: Cara untuk meningkatkan kecepatan rendering UI WPF

  1. Cache semuanya. Kuas, Warna, Geometri, Teks Berformat, Mesin Terbang. (Misalnya kita memiliki dua kelas: RenderTools dan TextCache. Proses rendering dari masing-masing unit alamat ke instance bersama dari kedua kelas. Jadi jika dua bagan memiliki teks yang sama, persiapannya dieksekusi sekali saja.)
  2. Freeze Freezable, jika Anda berencana untuk menggunakannya untuk waktu yang lama. Terutama geometri. Geometri unfreezed yang kompleks mengeksekusi HitTest dengan sangat lambat.
  3. Pilih cara tercepat membuat setiap primitif. Misalnya, ada sekitar 6 cara rendering teks, tetapi yang tercepat adalah DrawingContext.DrawGlyphs.
  4. Aktifkan Daur Ulang Kontainer. Virtualisasi membawa banyak peningkatan kinerja, tetapi wadah akan dibuang dan dibuat ulang, ini adalah default. Tetapi Anda dapat memperoleh lebih banyak kinerja dengan mendaur ulang wadah dengan mengatur VirtualizingStackPanel.VirtualizationMode = "Daur Ulang"
  5. Dari sini : Tidak ada batasan praktis untuk jumlah sarang yang dapat didukung aplikasi Anda, namun, umumnya yang terbaik adalah membatasi aplikasi Anda hanya menggunakan panel-panel yang sebenarnya diperlukan untuk tata letak yang Anda inginkan. Dalam banyak kasus, elemen Grid dapat digunakan sebagai pengganti panel bersarang karena fleksibilitasnya sebagai wadah tata letak. Ini dapat meningkatkan kinerja dalam aplikasi Anda dengan menjaga elemen yang tidak perlu keluar dari pohon.
Erick
sumber
2
Jawaban ini hampir seluruhnya terdiri dari menyalin dan menempel dari sumber lain, beberapa tidak didaftarkan. Akan jauh lebih baik jika Anda memangkasnya hanya ke bagian yang relevan, menghubungkan semua sumber dengan benar dan mencoba untuk lebih langsung menjawab pertanyaan.
N_A
2
@ mydogisbox Jawabannya adalah kompilasi informasi, saya mungkin menambahkan banyak situs yang sama dengan jawaban Anda. Untuk tidak mempertimbangkan aspek-aspek lain yang mengubah kinerja dapat menyebabkan jawaban yang tidak lengkap atau penanya masih memiliki pertanyaan tambahan, jadi saya memilih untuk memasukkannya. Sementara Rachel dengan perwakilan 21.7K yang luar biasa dan banyak pengalaman WPF mungkin sudah mengetahui informasi ini, orang lain yang melihat pertanyaan ini mungkin menginginkan informasi tambahan dan relevan ini bersama dengan jawabannya.
Erick