Pertanyaan Apa artinya menghitung ulang Layout Paint di alat pengembang Chrome catatan TimeLine?


enter image description here

Apa artinya menghitung ulang Layout Paint di alat pengembang Chrome catatan TimeLine? dan bagaimana meningkatkan kinerja halaman dengan mengurangi halaman Hitung ulang, Layout dan hitungan Cat? dapat memberikan beberapa saran? terima kasih


9
2017-07-24 02:31


asal


Jawaban:


Pada dasarnya, mereka browser Anda mencari tahu cara menggambar perubahan yang Anda buat ke halaman.

Jangan khawatir menyingkirkannya - jika Anda melakukannya, situs Anda akan statis. Namun ... ... jika kamu ingin melakukan sesuatu itu AKU S berguna untuk kinerja, yang memang harus dilakukan dengan reflows dan repaints, kemudian batch perubahan Anda bersama-sama.

Katakanlah Anda mendapat pekerjaan di Twitter. Dan tugas Anda adalah menulis versi selanjutnya dari jendela yang menambahkan setiap posting twitter ke layar.

Jika pengguna mendapat 250 tweet baru di timeline mereka, dan Anda menambahkan masing-masing dalam satu lingkaran, satu demi satu, browser akan memperlambat jalan, karena setiap kali Anda menambahkan satu, itu harus mengalir kembali (memindahkan segala sesuatu di sekitar) untuk membuat ruang untuk hal yang Anda tambahkan) dan mengecat ulang (gaya segala sesuatu yang dipengaruhi oleh penambahan).

Cara yang lebih baik untuk melakukannya adalah dengan membuat daftar tweet baru bersama-sama off-DOM (yaitu: dengan elemen yang sebenarnya tidak ada di halaman sekarang), dan kemudian menambahkan semuanya sekaligus. Ini mengurangi jumlah browser yang harus mencari tahu ke mana harus pergi.

@Fabricio - Pengoptimalan-mikro mungkin tidak bagus, tetapi menambahkan ratusan elemen peramban dalam satu lingkaran, dibandingkan menempatkan semuanya dalam waktu bersamaan dapat membuat perbedaan besar. Tanya saja kepada orang-orang Twitter, yang tidak ingin menyimpan objek jQuery mereka.


17
2017-07-24 03:03



Berikut ini daftar properti dan metode yang sangat berguna yang memicu tata letak (pembuatan ulang) halaman:

http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

Anda ingin meminimalkan panggilan ini sebanyak mungkin - terutama dalam situasi di mana kinerja sangat penting, seperti selama acara gulir, atau ketika menjiwai blok konten yang besar.


6
2017-11-15 05:41



Anda dapat menggunakan tab "Profil" dan tab "Audit" untuk mendeteksi kinerja kode Anda. Akan memberikan Anda laporan tentang kode Anda.

Anda dapat mengurangi hitungan halaman Hitung Ulang, Tata Letak dan Cat dengan banyak cara.

  • Tambahkan banyak anak sekaligus.
  • Sembunyikan elemen sebelum mengubahnya.
  • Berikan gambar dan elemen lain tinggi dan lebar.

2
2017-07-24 03:01