Beberapa aturan optimasi untuk halaman web browser
Pengoptimalan halaman Kompresi sumber daya statisGunakan alat konstruksi (webpack, gulp) untuk mengompresi sumber daya statis halaman web dengan tepat seperti gambar, skrip, dan gaya.
Gambar sprite CSS, gambar sebaris base64Gabungkan ikon-ikon kecil di situs menjadi satu gambar, gunakan CSS untuk memposisikan dan mencegat ikon-ikon yang sesuai, gunakan gambar sebaris dengan tepat.
Gaya di atas dan skrip di bawahLaman merupakan proses rendering langkah demi langkah. Menempelkan gaya ke atas dapat menampilkan laman kepada pengguna lebih cepat; menempelkan tag <script> ke atas akan memblokir pengunduhan sumber daya di belakang laman.
Gunakan css dan js dari tautan eksternalBeberapa halaman mereferensikan sumber daya statis publik, dan penggunaan kembali sumber daya mengurangi permintaan http tambahan.
Hindari gambar dengan src kosongHindari permintaan http yang tidak perlu.
<!-- Gambar dengan src kosong akan tetap memulai permintaan http--><img src= style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: tersembunyi; jelas: keduanya; font-family: tahoma, arial, Microsoft YaHei;"><!-- Ukuran gambar sebenarnya adalah 600x300, yang diskalakan menjadi 200x100 dalam html --><img src=/static/images/a.png width=200 height=100 style="margin: 0px; padding: 0px; garis besar: tidak ada; tinggi garis: 25,2 piksel; ukuran font: 14 piksel; lebar: 660 piksel; tersembunyi; jelas: keduanya; font-family: tahoma, arial, Microsoft YaHei;"><!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Dokumen</title> <link ref=preload href=style.css as=style> <link ref=preload href =main.js as=script> <link ref=stylesheet href=style.css></head><body> <script src=main.js></script></body></html>Dalam contoh ini, file css dan js sudah dimuat sebelumnya, dan akan segera dipanggil setelah digunakan dalam rendering halaman berikutnya.
Anda dapat menentukan jenis as untuk memuat berbagai jenis sumber daya.
- gaya
- naskah
- video
- audio
- gambar
- font
- dokumen
- ...
Metode ini juga dapat melakukan pramuat sumber daya di seluruh domain dengan mengatur atribut crossorigin.
<link rel=pramuat href=fonts/cicle_fina-webfont.woff2 as=font type=font/woff2 crossorigin=anonymous>CSS pemilihPrioritas penyeleksi dari tinggi ke rendah adalah:
- pemilih ID
- pemilih kelas
- pemilih tag
- pemilih yang berdekatan
h1 + p{ margin-atas: 15 piksel;Memilih paragraf yang muncul tepat setelah elemen h1. Elemen h1 dan p memiliki elemen induk yang sama.
pemilih anak
h1 > kuat {warna:merah;}pemilih keturunan
h1 em {warna:merah;}pemilih karakter pengganti
pemilih atribut
*[judul] {warna:merah;}img[alt] {batas: 5 piksel merah solid;}Pemilih kelas semu
Pengalaman penggunaan pemilih:
Kurangi tingkat penyeleksi
- Memprioritaskan penyeleksi kelas, yang dapat menggantikan penyeleksi label berlapis-lapis;
- Gunakan pemilih ID dengan hati-hati. Meskipun efisien, ini unik di halaman dan tidak kondusif untuk kolaborasi dan pemeliharaan tim;
- Memanfaatkan warisan pemilih secara wajar;
- Hindari ekspresi css.
Berdasarkan prioritas pemilih sebelumnya, Anda harus mencoba menghindari beberapa tingkat pemilih yang bersarang, sebaiknya tidak lebih dari 3 tingkat.
.container .text .logo{ warna: merah; }/*Ubah menjadi*/.container .text-logo{ warna: merah }Sederhanakan file gaya halaman dan hapus gaya yang tidak digunakanBrowser akan melakukan pencocokan gaya yang berlebihan, yang akan mempengaruhi waktu rendering. Selain itu, file gaya yang terlalu besar juga akan mempengaruhi kecepatan pemuatan.
Gunakan warisan css untuk mengurangi ukuran kodeDengan menggunakan properti CSS yang dapat diwariskan, elemen induk menyetel gaya, dan elemen turunan tidak perlu menyetelnya lagi.
Atribut umum yang dapat diwariskan meliputi: warna, ukuran font, jenis font, dll.; atribut yang tidak dapat diwariskan meliputi: posisi, tampilan, float, dll.
Jika nilai atributnya 0, tidak ada satuan yang ditambahkan.Ketika nilai atribut css adalah 0, tidak ada unit yang dapat ditambahkan untuk mengurangi jumlah kode.
.teks{ lebar: 0 piksel; tinggi: 0 piksel; }/*Ubah menjadi*/.teks{ lebar: 0;JavaScriptGunakan delegasi acara
Gunakan delegasi acara untuk mengikat acara ke beberapa elemen DOM serupa.
<ul id=container> <li class=list>1</li> <li class=list>2</li> <li class=list>3</li></ul>// Cara yang tidak masuk akal: mengikat peristiwa klik ke setiap elemen $('#container .list').on('click', function() { var text = $(this).text(); console.log(text); });//Metode delegasi acara: Gunakan mekanisme penggelembungan acara untuk mendelegasikan acara ke elemen induk $('#container').on('click', '.list', function() { var text = $(this ).teks(); console.log(teks);Perlu dicatat bahwa meskipun acara dapat didelegasikan ke dokumen saat menggunakan delegasi acara, hal ini tidak masuk akal. Salah satunya karena mudah menyebabkan kesalahan penilaian acara, dan yang lainnya adalah efisiensi pencarian rantai cakupan yang rendah. Elemen induk terdekat harus dipilih sebagai delegasi.
Selain performa yang lebih baik, penggunaan delegasi peristiwa juga menghilangkan kebutuhan untuk mengikat peristiwa ke elemen DOM yang dibuat secara dinamis.
Konten DOM DimuatAnda dapat mulai memproses pohon DOM setelah elemen DOM dimuat (DOMContentLoaded), daripada menunggu hingga semua sumber daya gambar diunduh.
// javascript asli document.addEventListener(DOMContentLoaded, function(event) { console.log(DOM dimuat dan diuraikan sepenuhnya);}, false);// jquery$(document).ready(function() { console.log(ready ! );});// Versi sederhana dari $(document).ready()$(function() { console.log(ready!);});Pramuat dan pemuatan lambat pramuatGunakan waktu idle browser untuk melakukan pramuat sumber daya yang mungkin digunakan di masa mendatang, seperti gambar, gaya, dan skrip.
Pramuat tanpa syaratSetelah onload dipicu, sumber daya yang diperlukan di masa depan akan segera diperoleh.
Sumber daya gambar sudah dimuat sebelumnya. (3 cara untuk mengimplementasikan pramuat gambar).
Pramuat berdasarkan perilaku penggunaNilai kemungkinan pengoperasian berdasarkan perilaku pengguna dan sumber daya yang dimuat sebelumnya yang mungkin diperlukan di masa mendatang.
Pemuatan lambat
- Saat pengguna mengetik di kotak masukan pencarian, sumber daya yang mungkin digunakan pada halaman hasil pencarian sudah dimuat sebelumnya;
- Saat pengguna mengoperasikan Tab, salah satunya akan ditampilkan secara default. Saat mengklik opsi lain, sumber daya yang akan digunakan di masa mendatang dapat dimuat terlebih dahulu saat mouse diarahkan;
Kecuali konten atau komponen yang diperlukan untuk inisialisasi halaman, semua hal lainnya dapat dimuat dengan lambat, seperti pustaka js yang memotong gambar, gambar yang tidak berada dalam jangkauan yang terlihat, dll.
Gambar lambat dimuat. (Tentukan apakah gambar berada dalam area yang terlihat, jika demikian, tetapkan jalur sebenarnya ke gambar tersebut)
Hindari pencarian globalVariabel non-lokal apa pun yang digunakan lebih dari satu kali dalam suatu fungsi harus disimpan sebagai variabel lokal.
fungsi updateUI(){ var imgs = document.getElementsByTagName(img); for (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = document.title + gambar + i; } var msg = document.getElementById(msg);Variabel global dokumen digunakan berkali-kali dalam fungsi di atas, terutama di perulangan for. Oleh karena itu, solusi yang lebih baik adalah menyimpan variabel global dokumen sebagai variabel lokal dan kemudian menggunakannya.
fungsi updateUI(){ var doc = dokumen; var imgs = doc.getElementsByTagName(img); untuk (var i=0, len=imgs.length; i < len; i++){ imgs[i].title = doc.title + gambar + i; } var pesan = doc.getElementById(pesan);Satu hal yang perlu diperhatikan adalah bahwa dalam kode JavaScript, variabel apa pun yang tidak dideklarasikan menggunakan var akan menjadi variabel global, dan penggunaan yang tidak tepat akan menyebabkan masalah kinerja.
Hindari kueri atribut yang tidak diperlukanMenggunakan variabel dan array lebih efisien daripada mengakses properti pada suatu objek karena objek harus mencari rantai prototipe untuk properti dengan nama tersebut.
//Gunakan nilai var array = [5, 10];var sum = nilai[0] + nilai[1];alert(jumlah);//Gunakan nilai var objek = { pertama: 5, kedua: 10 };var jumlah = nilai.pertama + nilai.kedua;peringatan(jumlah);Dalam kode di atas, properti objek digunakan untuk menghitung. Mencari properti sekali atau dua kali tidak akan menyebabkan masalah kinerja, namun jika diperlukan beberapa pencarian, misalnya dalam satu putaran, kinerja akan terpengaruh.
Saat mencari beberapa atribut untuk mendapatkan satu nilai, seperti:
var query = window.location.href.substring(window.location.href.indexOf(?));Pencarian atribut yang tidak diperlukan harus dikurangi dan window.location.href harus di-cache sebagai variabel.
var url = window.location.href;var query = url.substring(url.indexOf(?));pembatasan fungsiMisalkan terdapat kotak pencarian, ikat event onkeyup ke kotak pencarian tersebut, sehingga permintaan akan dikirimkan setiap kali mouse diangkat. Penggunaan fungsi pembatasan dapat memastikan bahwa beberapa operasi berturut-turut oleh pengguna dalam waktu input tertentu hanya memicu satu permintaan.
<tipe masukan=id teks=nilai masukan= />// Mengikat event document.getElementById('input').addEventListener('keyup', function() { throttle(search);}, false);// Fungsi logika function search() { console.log('search. . .');}// Fungsi throttle fungsi throttle(metode, konteks) { clearTimeout(method.tId); }, 300);}Skenario penerapan fungsi pembatasan tidak terbatas pada kotak pencarian. Misalnya, menggulir halaman, mengubah ukuran jendela yang dibentangkan, dll., fungsi pembatasan harus digunakan untuk meningkatkan kinerja.
Minimalkan jumlah pernyataanJumlah pernyataan juga merupakan faktor yang mempengaruhi kecepatan eksekusi operasi.
Gabungkan beberapa deklarasi variabel menjadi satu deklarasi variabel
// Gunakan beberapa deklarasi var var count = 5; var color = blue; var value = [1,2,3]; var now = new Date(); , nilai = [1,2,3], sekarang = Tanggal baru();Versi yang ditingkatkan adalah dengan hanya menggunakan satu deklarasi var, dipisahkan dengan koma. Ketika ada banyak variabel, hanya menggunakan satu deklarasi var jauh lebih cepat daripada mendeklarasikan var individual secara terpisah.
Menggunakan array dan literal objekGunakan literal array dan objek alih-alih penetapan pernyataan demi pernyataan.
var value = new Array();values[0] = 123;values[1] = 456;values[2] = 789;//Setelah perbaikan, var value = [123, 456, 789];var person = new Object();person.name = Jack;person.age = 28;person.sayName = function(){ alert(this.name);};//Setelah perbaikan var person = { name : Jack, age : 28, sayName : function(){ alert(ini.nama }};Pengoptimalan string Penggabungan stringBrowser awal tidak mengoptimalkan cara menggabungkan string dengan tanda plus. Karena string tidak dapat diubah, ini berarti string perantara digunakan untuk menyimpan hasil, sehingga seringnya pembuatan dan penghancuran string menjadi alasan ketidakefisienannya.
var teks = Halo;teks+= ;teks+= Dunia!;Tambahkan string ke array, lalu panggil metode join array untuk mengubahnya menjadi string, sehingga menghindari penggunaan operator penjumlahan.
var arr = [], i = 0;arr[i++] = Halo;arr[i++] = ;arr[i++] = Dunia!;var text = arr.join('');Browser modern telah mengoptimalkan penggabungan string plus tanda, jadi dalam banyak kasus, operator penambahan masih menjadi pilihan pertama.
Kurangi reflow dan redrawDalam proses rendering browser, reflow dan redraw terlibat, yang merupakan proses yang menghabiskan kinerja. Anda harus memperhatikan pengurangan tindakan yang memicu reflow dan redraw selama operasi skrip.
Operasi apa yang memicu reflow atau redraw?
- Reflow: Properti geometris elemen telah berubah dan pohon rendering perlu dibangun kembali. Proses mengubah pohon rendering disebut reflow;
- Gambar Ulang: Ukuran geometris elemen tidak berubah, tetapi gaya CSS (warna atau warna latar belakang) suatu elemen telah berubah.
Bagaimana cara mengurangi reflow dan redraw serta meningkatkan kinerja halaman web?
- Ubah ukuran jendela
- Ubah font
- Menambah atau menghapus style sheet
- Perubahan konten, seperti pengguna memasukkan teks di kotak <input/>
- Memanipulasi atribut kelas
- Skrip untuk memanipulasi DOM (menambah, menghapus, atau mengubah elemen DOM)
- Hitung properti offsetWidth dan offsetHeight
- Tetapkan nilai atribut gaya
1. Manipulasi skrip elemen DOM
- Setel elemen DOM ke display:none. Reflow akan dipicu selama proses pengaturan, tetapi Anda dapat mengubahnya sesuka hati dan menampilkannya setelah modifikasi;
- Kloning elemen ke dalam memori sebelum mengoperasikannya, dan ganti elemen lagi setelah modifikasi.
2. Ubah gaya elemen
- Cobalah untuk melakukan modifikasi batch daripada memodifikasinya satu per satu;
- Tetapkan id dan kelas terlebih dahulu, lalu atur nama kelas elemen.
3. Saat menambahkan animasi ke elemen, atur gaya CSS elemen ke position:fixed atau position:absolute. Elemen tidak akan menyebabkan perubahan posisi setelah meninggalkan alur dokumen.
4. Gunakan fungsi pembatasan (telah disebutkan di atas) saat menyesuaikan ukuran jendela, memasukkan input ke dalam kotak input, menggulir halaman, dll.
HTTP tembolok perambanMengatur cache browser dengan benar adalah salah satu cara penting untuk mengoptimalkan halaman web.
Kedaluwarsa dan Kontrol CacheKedaluwarsa berasal dari HTTP1.0, dan Kontrol Cache berasal dari HTTP1.1. Jika keduanya disetel secara bersamaan, Kontrol Cache akan menggantikan Kedaluwarsa.
ETag dan Terakhir Dimodifikasi
- Kedaluwarsa menentukan tanggal kedaluwarsa sebenarnya, bukan jumlah detik. Namun Expires mempunyai beberapa masalah seperti waktu server yang tidak sinkron atau tidak akurat. Jadi lebih baik menyatakan waktu kedaluwarsa menggunakan detik yang tersisa daripada waktu absolut.
- Kontrol Cache dapat mengatur nilai usia maksimal dalam hitungan detik dan menentukan waktu kedaluwarsa cache. Misalnya: Kontrol Cache: max-age=3600.
ETag dan Last-Modified dikembalikan oleh server di header respons. ETag memiliki prioritas lebih tinggi daripada Last-Modified, yang berarti server akan memprioritaskan nilai ETag.
Caching yang kuat dan caching yang dinegosiasikan
- ETag adalah tag apa pun yang dilampirkan pada dokumen, yang dapat berupa nomor seri atau nomor versi dokumen, atau verifikasi konten dokumen, dll. Ketika dokumen berubah, nilai ETag juga berubah. Terkait dengan ETag adalah If-None-Match. Saat browser memulai permintaan, ia akan membawa nilai ETag di bidang If-None-Match dan mengirimkannya ke server;
- Terakhir Dimodifikasi adalah waktu terakhir kali dokumen diubah di sisi server. Terkait dengan Last-Modified adalah If-Modified- Since. Ketika browser memulai permintaan, itu akan membawa nilai Last-Modified di bidang If-Modified- Since dan mengirimkannya ke server.
Jenis cache adalah cache yang kuat dan cache yang dinegosiasikan. Bedanya keduanya adalah strong cache tidak akan mengirimkan request ke server, namun negosiasi cache akan mengirimkan request. Jika pencocokan berhasil akan mengembalikan 304 Not Modified, jika pencocokan tidak berhasil maka akan kembali 200; browser terlebih dahulu akan memverifikasi cache yang kuat, dan jika cache yang kuat tidak ada, maka Lakukan verifikasi cache negosiasi.
Cara mengkonfigurasi cache browserMengapa mengurangi permintaan HTTP
- Tambahkan Kedaluwarsa dan Kontrol Cache ke respons pengembalian server web;
- Konfigurasikan Expires dan Cache-Control di file konfigurasi nginx atau apache.
Langkah-langkah untuk mengurangi permintaan http berperan besar dalam pengoptimalan kinerja, seperti: menggunakan gambar sprite css untuk menggantikan beberapa permintaan gambar, menghindari gambar src kosong, menggunakan gambar sebaris, menggunakan tautan eksternal css dan js, caching, dll.
Proses dari memasukkan URL hingga menyelesaikan pemuatan halaman meliputi:
- resolusi DNS
- koneksi TCP
- Permintaan dan respons HTTP
- Halaman render browser
- koneksi dekat
Permintaan http yang lengkap harus melalui proses ini, yang memakan waktu dan sumber daya, sehingga jumlah permintaan perlu dikurangi.
Referensi:
"Panduan Tingkat Lanjut untuk Konstruksi Situs Web Berkinerja Tinggi vs. Konstruksi Situs Web Berkinerja Tinggi"
"Praktik Terbaik untuk Mempercepat Situs Web Anda"
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.