Pendahuluan Mengapa Mengoptimalkan Kinerja Sangat Penting untuk Insinyur Front-End
Ada pepatah dalam industri yang tidak saya ketahui jika Anda pernah mendengar, "Orang yang tahu optimasi kinerja dan telah mempelajari kode sumber dan kode yang ditulis tanpa optimasi kinerja akan memiliki perbedaan dalam konsumsi kinerja ratusan atau bahkan ribuan kali". JavaScript Today adalah proses transisi dari ECMascript3 ke ECMascript5 dan ECMascript6. Ketika JavaScript tidak ditulis dengan baik, metode kode tidak ditulis dengan benar, dan masalah yang disebabkan tidak dapat diabaikan.
Optimalisasi Kinerja
Di bawah ini saya akan membagikan beberapa wawasan saya tentang optimasi kinerja dengan Anda;
1. Gambar peri
Yang paling mendasar adalah membuat gambar latar belakang menjadi elf sebanyak mungkin untuk mengurangi permintaan gambar, sehingga naluri dasar lain untuk insinyur web umum adalah membuat elf.
2.CSS Optimalisasi Pemilih
Di CSS, cobalah menggunakan pemilih anak>, gunakan pemilih yang lebih sedikit keturunan. Saat menggunakan pemilih keturunan, mesin pencari akan mencari semua elemen keturunan. Jika kami menggunakan pemilih anak, kami dapat mempersempit rentang pencarian, sehingga mengurangi konsumsi kinerja mesin pencari.
3.JS mengubah gaya dan langsung mengoperasikan nama kelas
Saat mengoperasikan gaya elemen JS, jangan gunakan gaya untuk secara langsung menambahkan gaya. Secara umum, akan ada lebih sedikit atribut dan tidak ada kinerja yang akan terpengaruh. Bahkan, ini bukan masalahnya. Setiap kali gaya ditambahkan, halaman akan digambar ulang sekali. Pengerasan ulang diperlukan untuk memperhatikan. Saat mengoperasikan gaya, secara langsung memanipulasi nama kelas hanya akan menyebabkan redrawing sekali. Menambahkan gaya secara langsung dengan gaya akan menyebabkan beberapa redrawing.
4.JS secara langsung mengoperasikan node dom
Saat mengoperasikan node, cobalah menambahkan node di belakang elemen. Jika dimasukkan di depan node, semua node setelah node yang dimasukkan akan menyebabkan reflow. Saat dimasukkan di belakang, hanya simpul yang dimasukkan yang perlu dicerminkan sekali.
Beberapa orang mungkin tidak memahami konsep menggambar ulang dan reflow
5. Pemilih Pertandingan Reguler
Di CSS3 dan JQuery, beberapa pemilih ini dicocokkan menggunakan metode reguler dan cobalah untuk tidak menggunakannya. Tentu saja, jika optimasi kinerja tidak dipertimbangkan, metode ini relatif mudah digunakan. Selektor pencocokan reguler akan membuat mesin pencari mencari semua tag, sangat mempengaruhi kinerja
6.Js mendapatkan optimasi elemen
Saat mendapatkan elemen di JS, adalah normal untuk menggunakan Document.getElementsById. Mesin pencari akan mencari dari bagian bawah pohon DOM sampai dicari dokumen di jendela dan kemudian mencari lagi. Oleh karena itu, yang terbaik adalah menyimpan dokumen. Badan saat mendapatkan elemen. Saat menggunakannya lagi, keluarkan variabel ini untuk digunakan, yang dapat menyimpan kinerja mesin pencari
7. memori overflow
Secara umum, ketika berjalan secara rekursif, overflow memori akan terjadi, menghasilkan penurunan kinerja yang signifikan saat menjalankan rekursif. Setelah berjalan, memori akan didaur ulang oleh sistem. Oleh karena itu, saat menjalankan rekursif, Anda perlu menyimpan nilai dengan objek, mendeteksi setiap kali operasi rekursif, mengembalikannya secara langsung, dan menambahkannya jika tidak ada. Ini dapat memecahkan kinerja rekursif yang hebat.
8. Gunakan Permintaan Dapatkan untuk Ajax
Permintaan pos dicapai dengan mengirim header permintaan HTTP terlebih dahulu dan kemudian mengirim data. Dapatkan tidak memiliki header permintaan, tetapi harus dicatat bahwa batas ukuran GET sekitar 4K, sementara POST tidak memiliki batas.
9. Tunda Memuat Gambar
Ketika halaman memulai permintaan, jumlah permintaan terlalu besar, sehingga gambarnya bisa malas memuat. Ketika halaman menggulir ke lokasi gambar, gambar akan dimuat.
Berikut adalah plug-in untuk memuat gambar malas
jQuery.lazyload.js
10. Hindari atribut src gambar yang kosong
Gambar dengan atribut SRC yang merupakan string kosong adalah umum, terutama muncul dalam dua bentuk:
<img src = "">
var img = gambar baru (); img.src = "";
Kedua formulir menyebabkan masalah yang sama: browser mengirim permintaan lain ke server.
Keahlian
1. Pemikiran eksklusif
Pertama mengecualikan semua yang saat ini, dan kemudian lakukan operasi berikutnya; Secara umum saat melakukan animasi, menambahkan gaya, dll., Pertama mengklarifikasi gaya sebelumnya selama operasi sekunder dan kemudian tambahkan gaya baru untuk menghindari konflik dalam animasi pada saat yang sama.
2. Operasi Sirkuit Pendek (||)
Secara umum, ketika suatu nilai perlu dinilai apakah itu ada, cobalah untuk tidak menggunakan jika pernyataan. Anda dapat menggunakan operator sirkuit pendek untuk menyimpan memori yang ditempati oleh kode. Misalnya:
a = a || b;
Jika ada, gunakan a; Jika A tidak ada, gunakan b.
3. Operasi (&&)
Ini dapat digunakan saat kondisi cocok, untuk membuat permintaan kondisi yang tidak perlu, seperti saat menentukan apakah suatu objek adalah array,
a && a.length && a.length> = 0
4. Pseudo-array dan array
Ketika Anda perlu merangkum elemen non-array dan mengubahnya menjadi array, cara termudah adalah dengan menambahkan [] ke dalamnya. Jika perlu menjadi pseudo-array, Anda dapat mengatur atribut panjang untuk itu.
5. Katup throttle
Umumnya digunakan dalam animasi, menetapkan nilai, mengaturnya ke true di awal, menentukan nilainya, menetapkan nilai ini menjadi false saat memasuki animasi, dan menggunakan fungsi callback untuk menugaskannya kembali ke true di akhir animasi.
6. Buka kunci status pemilihan pasif teks (barang kering murni)
Saat mengklik beberapa tombol, kadang -kadang teks dipilih, yang membuat pelanggan melihatnya seperti bug. Berikut ini adalah kode untuk menghapus keadaan ini dan menempelkannya.
if (document.all) {document.onselectStart = function () {return false}; // untuk yaitu} else {document.onmousedown = function () {return false}; document.onmouseup = function () {return true}; } document.onselectStart = function baru ('event.returnValue = false');7. Dengan cerdik menggunakan operator ternary
Ketika perlu untuk menentukan apakah ada nilai, Anda juga dapat menggunakan operator ternary untuk membuat kode lebih dioptimalkan. Misalnya
obj = obj === tidak terdefinisi? objek: obj;
Mengisi kembali:
Di atas adalah optimasi front-end dan beberapa tips yang telah saya ringkas di tempat kerja. Jika Anda memiliki optimasi dan teknik yang baik, saya harap Anda dapat berkomentar lebih banyak. Saya pribadi berpikir bahwa teknologi membutuhkan lebih banyak komunikasi untuk membuat kemajuan yang lebih baik.