Baru -baru ini, saya telah mempelajari buku "Panduan untuk Konstruksi Situs Web Kinerja Tinggi". Artikel ini adalah catatan studi. Saya akan memilah apa yang telah saya pelajari untuk menonton dengan mudah nanti.
Performance Golden Rule menjelaskan bahwa hanya 10% hingga 20% dari waktu respons pengguna akhir yang dihabiskan untuk menerima dokumen HTML pengguna yang diminta, sedangkan sisanya 80% hingga 90% dari waktu dihabiskan untuk permintaan HTTP untuk semua komponen (gambar, skrip, stylesheet, dll.) Referensi oleh dokumen HTML, dan waktu tanggapan pengguna yang dikeluarkan.
--Steve Sounders
1 Gabungan File (Kurangi jumlah permintaan HTTP)
Sprite CSS
Gunakan sprite CSS untuk menggabungkan gambar yang digunakan di situs web menjadi satu gambar, dan gunakan ikon melalui posisi latar belakang, lebar, dan tinggi untuk mengontrol posisi gambar latar belakang. Metode ini dapat mengurangi beberapa permintaan gambar menjadi satu kali. Ada banyak alat untuk menghasilkan sprite CSS. Ada plug-in terkait di Grunt dan Gulp, dan CSSGAGA juga bagus.
Gabungkan JS dan CSS
Seperti peta Sprite, menggabungkan file CSS dan JS juga merupakan cara penting untuk mengurangi permintaan HTTP. Tidak ada kontroversi tentang penggabungan file CSS saat ini, tetapi untuk prevalensi modularitas JS saat ini, menggabungkan semua file JS menjadi satu file tampaknya menjadi mundur. Cara yang benar adalah mematuhi pola bahasa yang dikompilasi, mempertahankan modularitas JS, dan menghasilkan file target hanya untuk file JS yang digunakan dalam permintaan awal selama proses pembuatan.
2 Gunakan konten untuk mempublikasikan jaringan (kurangi waktu permintaan HTTP)
Faktor lain yang mempengaruhi waktu permintaan HTTP adalah jarak Anda dari server web situs web. Jelas, semakin lama jarak, semakin lama permintaan yang dibutuhkan, yang dapat sangat meningkat melalui CDN.
CDN adalah server web yang didistribusikan di beberapa lokasi geografis, yang digunakan untuk mempublikasikan konten kepada pengguna secara lebih efektif. Fungsi utama CDN adalah menyimpan file statis untuk pengguna akhir, dan juga menyediakan unduhan, layanan keamanan, dan fungsi lainnya.
3 Set Cache Browser (hindari permintaan HTTP duplikat)
Menggunakan kedaluwarsa/cache-control
Browser dapat menghindari permintaan berulang setiap kali dengan menggunakan cache. HTTP 1.0 dan HTTP 1.1 memiliki metode implementasi cache yang berbeda, kedaluwarsa (1.0) dan kontrol cache (1.1). Server web menggunakan kedaluwarsa untuk memberi tahu klien bahwa semua salinan file yang di -cache akan digunakan dalam waktu yang ditentukan dan tidak lagi berulang kali membuat permintaan ke server, misalnya:
Kedaluwarsa: Kamis, 01 Des 2016 16:00:00 GMT (Format GMT)
Pengaturan ini berarti bahwa pada 1 Desember 2016, salinan yang di -cache tersedia tanpa mengajukan permintaan lebih lanjut.
Kedaluwarsa memiliki batasan pada cara melewati tenggat waktu: itu membutuhkan sinkronisasi ketat antara jam klien dan server, sedangkan kontrol cache yang diperkenalkan oleh HTTP 1.1 menentukan tanggal cache dengan menentukan waktu dalam detik, jadi batasan ini tidak ada, misalnya: misalnya:
CACHE-CONTROL: MAX-AGE = 31536000
Pengaturan ini berarti bahwa waktu cache adalah satu tahun, dan disarankan untuk menggunakan cache-control, tetapi ketika HTTP 1.1 didukung, hal lain yang perlu diperhatikan: kontrol cache dan kedaluwarsa ada pada saat yang sama, kontrol cache memiliki prioritas yang lebih tinggi.
Konfigurasikan atau hapus Etag
Menggunakan Expire/Cache-Control dapat menghindari kunjungan kedua, menggunakan cache lokal untuk menghindari permintaan HTTP duplikat, dan meningkatkan kecepatan situs web. Namun, jika pengguna mengklik penyegaran browser atau kedaluwarsa, permintaan HTTP GET masih akan dikeluarkan ke server. Jika file tidak berubah saat ini, server tidak akan mengembalikan seluruh file tetapi akan mengembalikan kode status 304 yang tidak dimodifikasi.
Ada dua basiss untuk server untuk menentukan apakah file telah berubah: dimodifikasi terakhir (tanggal modifikasi terbaru) dan ETAG (tag entitas);
Etag (tag entitas) diperkenalkan di HTTP 1.1 dan memiliki prioritas yang lebih tinggi ketika ada pada saat yang sama dengan yang dimodifikasi terakhir. Server membandingkan ETAG (IF-none-match) yang dikirim oleh klien dengan ETAG saat ini, dan mengembalikan 304 tidak dimodifikasi jika hal yang sama benar, jika tidak seluruh file dan 200 OK akan dikembalikan.
Ada masalah dengan ETAG: Ketika browser mengirim permintaan GET ke satu server dan kemudian meminta komponen dari server lain, Etag tidak cocok. Tentu saja, jika situs web Anda di -host di satu server, dan sekarang banyak situs web menggunakan banyak server, keberadaan ETAG sangat mengurangi tingkat keberhasilan validitas verifikasi.
Solusi untuk masalah ini adalah untuk mengonfigurasi ETAG, menghapus nilai server Innode dan hanya mempertahankan stempel waktu dan ukuran modifikasi sebagai nilai ETAG, atau secara langsung menghapus ETAG, dan menggunakan dimodifikasi terakhir untuk memverifikasi validitas file.
4 komponen kompres (mengurangi ukuran permintaan HTTP)
Dengan mengompresi file yang ditransmitasikan HTTP, mengurangi ukuran permintaan HTTP dan meningkatkan kecepatan permintaan, GZIP adalah metode kompresi yang paling umum digunakan dan paling efektif saat ini.
Namun, tidak semua file sumber daya perlu dikompresi. Biaya kompresi termasuk bahwa server perlu menghabiskan siklus CPU untuk dikompres, dan klien juga perlu mendekompresi file terkompresi, yang harus ditimbang dalam kombinasi dengan situs webnya sendiri. Sekarang sebagian besar situs web memampatkan dokumen HTML mereka, dan beberapa situs web memilih untuk mengompres JS dan CSS. Hampir tidak ada situs web yang menggunakan kompresi GZIP untuk gambar, PDF, dan file lainnya. Alasannya adalah bahwa file -file ini telah dikompresi, dan menggunakan HTTP untuk mengompres hal -hal yang telah dikompresi berlebihan tidak dapat membuatnya lebih kecil. Faktanya, menambahkan header, mengkompresi kamus, dan memverifikasi badan respons sebenarnya membuatnya lebih besar, dan juga membuang -buang CPU.
Cara mengaktifkan GZIP di situs web memerlukan pengaturan di server web (IIS, nginx, apache, dll.).
5 file CSS ditempatkan terlebih dahulu
Menempatkan file CSS di yang pertama dan yang terakhir tidak mempengaruhi permintaan HTTP, sehingga konsisten dalam hal waktu permintaan. Namun, dari perspektif pengalaman pengguna, menempatkan file CSS di yang pertama akan memberi Anda pengalaman pengguna yang lebih baik.
Alasannya adalah bahwa browser mem -parsing dokumen HTML dari atas ke bawah dan menempatkan file CSS di kepala. Halaman pertama -tama akan mengajukan permintaan ke file CSS, lalu memuat pohon DOM dan membuatnya. Halaman secara bertahap akan disajikan kepada pengguna.
Sebaliknya, jika file CSS ditempatkan di akhir, halaman memuat DOM penuh dan meminta file CSS, dan kemudian membuat seluruh pohon DOM dan menyajikannya kepada pengguna. Dari perspektif pengguna, sebelum file CSS diminta, seluruh halaman dalam keadaan layar putih. Layar putih adalah perilaku browser. Penjelasan David Hyatt untuk ini seperti ini
Sebelum pohon gaya dimuat sepenuhnya, membuat pohon DOM adalah sia -sia, karena akan diterjemahkan lagi setelah pohon gaya dimuat, dan masalah fouc (tidak ada kandungan gaya berkedip).
Hal lain yang perlu diperhatikan adalah menggunakan tautan alih -alih @import untuk memperkenalkan stylesheet CSS. Bahkan jika gaya yang diperkenalkan oleh @import ditulis di header, itu akan dimuat di akhir dokumen.
6 JS File ditempatkan di akhir
Permintaan HTTP paralel, dan jumlah unduhan paralel dari browser yang berbeda berbeda (2, 4, atau 8). Unduhan paralel meningkatkan kecepatan permintaan HTTP. Menempatkan file JS di tempat pertama tidak hanya akan memblokir unduhan file berikutnya tetapi juga memblokir rendering halaman.
Mengapa ini terjadi? Ada dua alasan:
Document.write mungkin ada di file JS untuk memodifikasi konten halaman, sehingga halaman tidak akan diberikan setelah skrip dieksekusi.
File JS yang berbeda mungkin memiliki dependensi terlepas dari ukuran, sehingga harus dieksekusi secara berurutan, sehingga mereka dilarang saat memuat skrip.
Oleh karena itu, cara terbaik adalah menempatkan file JS di akhir dan tunggu sampai semua komponen visual halaman dimuat sebelum membuat permintaan untuk meningkatkan pengalaman pengguna.
Di atas adalah beberapa saran untuk meningkatkan kinerja situs web oleh JavaScript yang diperkenalkan editor kepada Anda (1). Saya harap ini akan membantu Anda. Jika Anda ingin tahu lebih banyak, harap perhatikan wulin.com. Pada artikel berikutnya, editor akan memperkenalkan kepada Anda saran untuk meningkatkan optimalisasi kinerja situs web JavaScript (II)