javascript - Terlalu banyak pengiraan gaya UI menyebabkan penyemak imbas dimuatkan terlalu perlahan, terutamanya dalam IE Sila minta bimbingan daripada warga emas.

Question

Beberapa ketika dahulu, saya menggunakan EasyUI+jQuery untuk mencipta halaman. Saya tidak merasakan terdapat sebarang masalah pemuatan pada mulanya, tetapi apabila data meningkat, masa pemuatan menjadi perlahan dengan sangat jelas, dan Chrome biasanya mengambil masa lebih daripada 20 saat IE dibuka Dalam kes analisis prestasi, ia sebenarnya mengambil masa lebih daripada 3 minit. . . . Gambar khusus adalah seperti berikut.

世界只因有你 · Answer

Bergantung pada aspek mana, secara amnya, terdapat dua aspek untuk dimulakan:

1. Untuk gaya dan skrip, jika terdapat versi min js, rujuk versi min atau cari pemalam mampatan pihak ketiga penyelesaian lain ialah menggunakan pemuatan kebergantungan.
2. Jika pengikatan data lambat, anda boleh menyahpepijatnya untuk melihat langkah pemuatan data yang lambat Adakah pertanyaan data atau penukaran format data, keadaan, rantaian jadual, dsb.

Dalam analisis akhir, ia hampir mengenai dua aspek ini. Bagi masalah data rendering yang anda nyatakan, berapa banyak data yang boleh anda paparkan pada satu halaman Adakah mungkin anda tidak melakukan paging Untuk memaparkan data, anda boleh melakukan output log js di tempat yang anda fikir sudah tiba masanya? memakan. Anda akan tahu sepintas lalu

天蓬老师 · Answer

Beri saya beberapa idea:
1 Cuba mampatkan CSS/JS sebagai asas yang mungkin
2 Optimumkan prestasi pada tahap kod JS dan kurangkan operasi DOM
3 di hujung belakang.

PHP中文网 · Answer

Berdasarkan masa, ia agak terlalu panjang. Pertimbangkan dua situasi:
1) Terdapat aspek yang tidak munasabah yang jelas dalam pengiraan gaya

Pelbagai tugasan

element.style.borderColor = '#f00';
element.style.borderStyle = 'solid';
element.style.borderWidth = '1px';

Satu tugasan

 element.style.cssText += 'border: 1px solid #f00;';

Nilai boleh diperolehi sekali, bukannya berkali-kali

Nilai berkali ganda

var width1=element.style.width+1;
var width2=element.style.width+2;

Dapat nilai sekali

var width=element.style.width;
    var width1=width+1;
    var width2=width+2;

2) Untuk menghapuskan situasi yang tidak munasabah 1, anda perlu mempertimbangkan sama ada reka bentuk perniagaan dan reka bentuk struktur adalah munasabah Kerana ia mengambil masa terlalu lama, adalah disyorkan untuk mempertimbangkan sama ada reka bentuk Yiha adalah munasabah