Beranda>Tutorial Desain Web>tutorial HTML

Diskusi singkat tentang aturan dasar pengoptimalan kinerja halaman web

Penulis：Eve Cole Waktu Pembaruan：2025-03-12 06:32:01

Beberapa aturan optimasi untuk halaman web browser

Pengoptimalan halaman

Kompresi sumber daya statis

Gunakan alat konstruksi (webpack, gulp) untuk mengompresi sumber daya statis halaman web dengan tepat seperti gambar, skrip, dan gaya.

Gambar sprite CSS, gambar sebaris base64

Gabungkan 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 bawah

Laman 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 eksternal

Beberapa halaman mereferensikan sumber daya statis publik, dan penggunaan kembali sumber daya mengurangi permintaan http tambahan.

Hindari gambar dengan src kosong

Hindari 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. 
  1.  gaya
  2.  naskah
  3.  video
  4.  audio
  5.  gambar
  6.  font
  7.  dokumen
  8.  ...
 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
 pemilih
 Prioritas penyeleksi dari tinggi ke rendah adalah: 
  1.  pemilih ID
  2.  pemilih kelas
  3.  pemilih tag
  4.  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: 
  1.  Memprioritaskan penyeleksi kelas, yang dapat menggantikan penyeleksi label berlapis-lapis;
  2.  Gunakan pemilih ID dengan hati-hati. Meskipun efisien, ini unik di halaman dan tidak kondusif untuk kolaborasi dan pemeliharaan tim;
  3.  Memanfaatkan warisan pemilih secara wajar;
  4.  Hindari ekspresi css.
 Kurangi tingkat penyeleksi
 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 digunakan
 Browser 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 kode
 Dengan 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;
 JavaScript
 Gunakan 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 Dimuat
 Anda 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
 pramuat
 Gunakan waktu idle browser untuk melakukan pramuat sumber daya yang mungkin digunakan di masa mendatang, seperti gambar, gaya, dan skrip.
 Pramuat tanpa syarat
 Setelah 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 pengguna
 Nilai kemungkinan pengoperasian berdasarkan perilaku pengguna dan sumber daya yang dimuat sebelumnya yang mungkin diperlukan di masa mendatang. 
  1.  Saat pengguna mengetik di kotak masukan pencarian, sumber daya yang mungkin digunakan pada halaman hasil pencarian sudah dimuat sebelumnya;
  2.  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;
 Pemuatan lambat
 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 global
 Variabel 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 diperlukan
 Menggunakan 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 fungsi
 Misalkan 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 pernyataan
 Jumlah 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 objek
 Gunakan 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 string
 Browser 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 redraw
 Dalam 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. 
  1.  Reflow: Properti geometris elemen telah berubah dan pohon rendering perlu dibangun kembali. Proses mengubah pohon rendering disebut reflow;
  2.  Gambar Ulang: Ukuran geometris elemen tidak berubah, tetapi gaya CSS (warna atau warna latar belakang) suatu elemen telah berubah.
 Operasi apa yang memicu reflow atau redraw? 
  1.  Ubah ukuran jendela
  2.  Ubah font
  3.  Menambah atau menghapus style sheet
  4.  Perubahan konten, seperti pengguna memasukkan teks di kotak <input/>
  5.  Memanipulasi atribut kelas
  6.  Skrip untuk memanipulasi DOM (menambah, menghapus, atau mengubah elemen DOM)
  7.  Hitung properti offsetWidth dan offsetHeight
  8.  Tetapkan nilai atribut gaya
 Bagaimana cara mengurangi reflow dan redraw serta meningkatkan kinerja halaman web?
 1. Manipulasi skrip elemen DOM 
  1.  Setel elemen DOM ke display:none. Reflow akan dipicu selama proses pengaturan, tetapi Anda dapat mengubahnya sesuka hati dan menampilkannya setelah modifikasi;
  2.  Kloning elemen ke dalam memori sebelum mengoperasikannya, dan ganti elemen lagi setelah modifikasi.
 2. Ubah gaya elemen 
  1.  Cobalah untuk melakukan modifikasi batch daripada memodifikasinya satu per satu;
  2.  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 peramban
 Mengatur cache browser dengan benar adalah salah satu cara penting untuk mengoptimalkan halaman web.
 Kedaluwarsa dan Kontrol Cache
 Kedaluwarsa berasal dari HTTP1.0, dan Kontrol Cache berasal dari HTTP1.1. Jika keduanya disetel secara bersamaan, Kontrol Cache akan menggantikan Kedaluwarsa. 
  1.  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.
  2.  Kontrol Cache dapat mengatur nilai usia maksimal dalam hitungan detik dan menentukan waktu kedaluwarsa cache. Misalnya: Kontrol Cache: max-age=3600.
 ETag dan Terakhir Dimodifikasi
 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. 
  1.  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;
  2.  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.
 Caching yang kuat dan caching yang dinegosiasikan
 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 browser 
  1.  Tambahkan Kedaluwarsa dan Kontrol Cache ke respons pengembalian server web;
  2.  Konfigurasikan Expires dan Cache-Control di file konfigurasi nginx atau apache.
 Mengapa mengurangi permintaan HTTP
 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: 
  1.  resolusi DNS
  2.  koneksi TCP
  3.  Permintaan dan respons HTTP
  4.  Halaman render browser
  5.  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.
Artikel Terkait