Saya percaya bahwa internet telah menjadi bagian yang sangat diperlukan dari kehidupan orang. Aplikasi klien kaya seperti Ajax, Flex, dll. Membuat orang lebih senang mengalami banyak fungsi yang hanya dapat diimplementasikan dalam C/S. Misalnya, Google Opportunity telah memindahkan semua aplikasi kantor paling dasar ke Internet. Tentu saja, sambil nyaman, itu tidak diragukan lagi membuat halaman lebih lambat dan lebih lambat. Saya melakukan pengembangan front-end. Dalam hal kinerja, menurut survei Yahoo, backend hanya menyumbang 5%, sedangkan front-end setinggi 95%, di mana 88%dari hal dapat dioptimalkan.
Di atas adalah diagram siklus hidup dari halaman Web2.0. Insinyur itu dengan jelas mengatakan bahwa itu dibagi menjadi empat tahap: kehamilan, kelahiran, kelulusan, dan pernikahan. Jika kita dapat mewujudkan proses ini alih-alih respons permintaan sederhana ketika kita mengklik tautan web, kita dapat menggali banyak detail yang dapat meningkatkan kinerja. Hari ini saya mendengarkan kuliah tentang penelitian kinerja web oleh Xiao Ma ge di Taobao di tim pengembangan Yahoo. Saya merasa banyak memperoleh banyak dan ingin membagikannya di blog.
Saya percaya banyak orang telah mendengar 14 aturan untuk mengoptimalkan kinerja situs web. Informasi lebih lanjut dapat ditemukan di pengembang.yahoo.com
1. Kurangi jumlah permintaan HTTP sebanyak mungkin [konten]
2. Gunakan CDN (Jaringan Pengiriman Konten) [Server]
3. Tambahkan header kedaluwarsa (atau cache-control) [server]
4. Komponen GZIP [Server]
5. Tempatkan gaya CSS di atas halaman [CSS]
6. Pindahkan skrip ke bawah (termasuk inline) [JavaScript]
7. Hindari menggunakan ekspresi di CSS [CSS]
8. Pisahkan JavaScript dan CSS menjadi file eksternal [JavaScript] [CSS]
9. Kurangi kueri DNS [konten]
10. Compress JavaScript dan CSS (termasuk inline) [JavaScript] [CSS]
11. Hindari mengarahkan [server]
12. Hapus skrip duplikat [JavaScript]
13. Mengkonfigurasi Tag Entitas (Etag) [CSS]
14. Buat cache ajax
Ada plug-in yslow di bawah Firefox, yang diintegrasikan ke dalam Firebug. Anda dapat menggunakannya untuk dengan mudah melihat kinerja situs web Anda dalam aspek -aspek ini.
Ini adalah hasil dari menggunakan yslow untuk mengevaluasi situs web saya Xifengfang. Sayangnya, hanya memiliki 51 poin. hehe. Sejumlah situs web utama di Cina tidak tinggi. Saya baru saja mengujinya dan baik Sina dan Netease adalah 31 poin. Maka skor Yahoo (AS) memang 97 poin! Dapat dilihat bahwa Yahoo telah melakukan upaya dalam hal ini. Menilai dari 14 aturan yang telah mereka ringkas, ada banyak detail yang telah ditambahkan kepada kami sekarang, dan beberapa praktik bahkan sedikit sesat.
Pasal 1: Minimalkan jumlah permintaan HTTP sebanyak mungkin (buat lebih sedikit permintaan HTTP)
Permintaan HTTP adalah overhead, dan menemukan cara untuk mengurangi jumlah permintaan secara alami dapat meningkatkan kecepatan halaman web. Metode umum adalah menggabungkan CSS, JS (menggabungkan file CSS dan JS dalam satu halaman), dan peta gambar dan sprite CSS, dll. Tentu saja, mungkin memecah file CSS dan JS adalah karena pertimbangan dalam hal struktur CSS, berbagi, dll. Situs web Alibaba adalah untuk mengembangkan secara terpisah selama pengembangan, dan kemudian menggabungkan JS dan CS di latar belakang. Ini masih merupakan permintaan untuk browser, tetapi masih bisa dikembalikan ke beberapa selama pengembangan, yang nyaman untuk manajemen dan referensi berulang. Yahoo bahkan merekomendasikan menulis halaman beranda CSS dan JS langsung ke file halaman alih -alih referensi eksternal. Karena beranda memiliki terlalu banyak kunjungan, hal itu dapat mengurangi jumlah dua permintaan. Bahkan, banyak portal domestik melakukan ini.
Sprite CSS hanya mengacu pada menggabungkan gambar latar belakang pada halaman menjadi satu, dan kemudian menggunakan nilai yang tidak dapat ditentukan oleh atribut posisi latar belakang CSS untuk mendapatkan latar belakangnya. Situs web Taobao dan Alibaba saat ini sedang melakukan ini. Jika Anda tertarik, Anda dapat melihat gambar latar belakang Taobao dan Alibaba.
http://www.cssssprites.com/ Ini adalah situs web alat yang secara otomatis dapat menggabungkan gambar yang Anda unggah dan memberikan koordinat posisi latar belakang yang sesuai. Dan output hasil dalam format PNG dan GIF.
Pasal 2: Gunakan jaringan pengiriman konten
Sejujurnya, saya tidak tahu banyak tentang CDN. Sederhananya, dengan menambahkan arsitektur jaringan baru ke internet yang ada, menerbitkan konten situs web ke server cache yang paling dekat dengan pengguna. Melalui teknologi penyeimbang beban DNS, dinilai bahwa sumber pengguna mengakses server cache di dekatnya untuk mendapatkan konten yang diperlukan. Pengguna di Hangzhou mengakses konten di server dekat Hangzhou, dan mereka yang berada di Beijing mengakses konten di server dekat Beijing. Ini dapat secara efektif mengurangi waktu transmisi data di jaringan dan meningkatkan kecepatan. Untuk konten yang lebih rinci, Anda dapat merujuk pada penjelasan CDN pada ensiklopedia Baidu. Yahoo! Distribusi konten statis ke CDN mengurangi waktu dampak pengguna sebesar 20% atau lebih.
Diagram Teknologi CDN:
Diagram Jaringan CDN:
Pasal 3: Tambahkan header Expire/cache-control: Tambahkan header yang kedaluwarsa
Sekarang semakin banyak gambar, skrip, CSS, dan Flash tertanam di halaman, dan ketika kita mengaksesnya, kita pasti akan membuat banyak permintaan HTTP. Bahkan, kita dapat menyimpan file -file ini dengan mengatur header kedaluwarsa. Kedaluwarsa sebenarnya menentukan waktu cache dari jenis file tertentu di browser melalui pesan header. Sebagian besar gambar tidak perlu sering dimodifikasi setelah diterbitkan. Setelah di -cache, browser tidak perlu lagi mengunduh file -file ini dari server dan membacanya langsung dari cache. Ini akan sangat mempercepat mengakses halaman lagi. Protokol HTTP 1.1 yang khas mengembalikan informasi header:
HTTP/1.1 200 OK
Tanggal: Jum, 30 Okt 1998 13:19:41 GMT
Server: Apache/1.3.3 (UNIX)
CACHE-CONTROL: MAX-AGE = 3600, harus dikeluarkan
Kedaluwarsa: Jumat, 30 Okt 1998 14:19:41 GMT
Modifikasi Terakhir: Sen, 29 Juni 1998 02:28:12 GMT
Etag: 3E86-410-3596FBBC
Panjang konten: 1040
Tipe konten: teks/html
Ini dapat dilakukan dengan mengatur cache-control dan kedaluwarsa melalui skrip sisi server.
Misalnya, jika diatur dalam PHP, kedaluwarsa setelah 30 hari:
<!-pheader (cache-control: wajib-revalidasi); $ offset = 60 * 60 * 24 * 30; $ expstr = kedaluwarsa :. gmdate (d, d myh: i: s, time () + $ offset). GMT; header ($ expstr);-> juga dapat dilakukan dengan mengonfigurasi server itu sendiri, jadi ini tidak terlalu jelas, haha. Jika Anda ingin tahu lebih banyak, silakan merujuk ke http://www.web-caching.com/
Sejauh yang saya tahu, waktu kedaluwarsa yang kedaluwarsa dari situs web Cina Alibaba adalah 30 hari. Namun, ada masalah selama periode ini, terutama ketika mengatur waktu kedaluwarsa skrip, Anda harus mempertimbangkannya dengan cermat, jika tidak, mungkin perlu waktu lama bagi klien untuk memahami perubahan tersebut setelah fungsi skrip yang sesuai diperbarui. Saya mengalami masalah ini ketika saya sedang mengerjakan [Proyek Sarankan] sebelumnya. Oleh karena itu, kita harus mempertimbangkan dengan cermat mana yang harus di -cache dan mana yang tidak boleh di -cache.
Pasal 4: Aktifkan Kompresi GZIP: Komponen GZIP
Gagasan GZIP adalah untuk mengompres file di sisi server terlebih dahulu dan kemudian mentransfernya. Ini dapat secara signifikan mengurangi ukuran transfer file. Setelah transmisi selesai, browser akan menghapus kembali konten terkompresi dan menjalankannya. Browser saat ini dapat mendukung GZIP dengan baik. Browser tidak hanya dapat mengenalinya, tetapi juga crawler utama juga dapat mengenalinya. Semua Seoers dapat yakin. Selain itu, rasio kompresi GZIP sangat besar, umumnya rasio kompresi adalah 85%, yang berarti bahwa halaman 100k di server dapat dikompresi hingga sekitar 25 ribu sebelum dikirim ke klien. Untuk prinsip kompresi GZIP tertentu, Anda dapat merujuk pada artikel "Algoritma Kompresi GZIP" di CSDN. Yahoo sangat menekankan bahwa semua konten teks harus dikompresi oleh GZIP: HTML (PHP), JS, CSS, XML, TXT ... Situs web kami melakukan pekerjaan yang baik dalam hal ini, itu adalah A. Di masa lalu, beranda kami bukan, karena ada banyak JS di beranda dengan kode iklan. JS dari situs web pemilik kode iklan ini tidak dikompresi oleh GZIP, yang juga akan menyeret situs web kami.
Sebagian besar dari tiga poin di atas adalah konten sisi server, dan saya hanya memiliki pemahaman singkat tentang mereka. Apa yang salah harus diperbaiki.
Pasal 5: Letakkan stylesheet di atas
Letakkan CSS di atas halaman, mengapa ini? Karena browser seperti IE, Firefox tidak akan membuat apa pun sampai semua CSS ditransmisikan sepenuhnya. Alasannya sesederhana yang dikatakan Brother Ma. CSS, Nama Lengkap: Lembar Style Cascading. Cascading berarti bahwa CSS di belakang dapat menutupi CSS sebelumnya, dan CSS dengan level tinggi dapat menutupi CSS dengan level rendah. Di [CSS! Penting] Hubungan hierarki ini telah disebutkan di bagian bawah artikel ini, dan di sini kita hanya perlu tahu bahwa CSS dapat ditimpa. Karena yang sebelumnya dapat ditimpa, tidak diragukan lagi masuk akal bagi browser untuk dirender setelah dimuat sepenuhnya. Di banyak browser, seperti IE, masalah menempatkan lembar gaya di bagian bawah halaman adalah melarang urutan tampilan konten halaman web. Jika browser memblokir tampilan untuk menghindari pengecatan ulang elemen halaman, pengguna hanya dapat melihat halaman kosong. Firefox tidak memblokir tampilan, tetapi ini berarti bahwa ketika stylesheet diunduh, beberapa elemen halaman mungkin perlu dicat ulang, yang menyebabkan masalah yang berkedip -kedip. Jadi kita harus mendapatkan CSS dimuat sesegera mungkin
Mengikuti makna ini, jika kita melihatnya dengan hati -hati, sebenarnya ada beberapa area yang dapat dioptimalkan. Misalnya, dua file CSS yang terkandung di situs ini adalah <tautan rel = stylesheet rev = stylesheet href = http: //www.space007.com/themes/google/style/google.css type = text/css media = layar/> dan <tautan rel = stylesheet = href = http: //www.space007.com/css/print.css type = text/css media = print/>. Dari media, kita dapat melihat bahwa CSS pertama adalah untuk browser, dan file CSS kedua adalah untuk gaya cetak. Dari kebiasaan perilaku pengguna, tindakan untuk mencetak halaman harus terjadi setelah halaman halaman ditampilkan. Oleh karena itu, metode yang lebih baik adalah menambahkan CSS secara dinamis ke halaman setelah halaman dimuat, sehingga dapat meningkatkan kecepatan. (Ha ha)
Pasal 6: Letakkan skrip di bagian bawah
Ada dua tujuan untuk menempatkan skrip di bagian bawah halaman: 1. Karena eksekusi skrip mencegah memblokir unduhan halaman. Selama proses pemuatan halaman, ketika browser membaca pernyataan eksekusi JS, itu pasti akan menjelaskan semuanya dan membaca konten berikut berikutnya. Jika Anda tidak percaya, Anda dapat menulis loop JS untuk melihat apakah hal -hal di bawah halaman akan tetap keluar. (Eksekusi SetTimeout dan SetInterval sedikit mirip dengan multithreading, dan rendering konten berikut akan berlanjut sebelum waktu respons yang sesuai.) Logika di belakang browser adalah bahwa JS dapat mengeksekusi lokasi. Oleh karena itu, meletakkannya di ujung halaman dapat secara efektif mengurangi waktu pemuatan elemen visual halaman. 2. Masalah kedua yang disebabkan oleh skrip adalah memblokir jumlah unduhan paralel. Spesifikasi HTTP/1.1 merekomendasikan bahwa jumlah unduhan paralel untuk setiap host browser tidak boleh melebihi 2 (IE hanya bisa 2, dan browser lain seperti FF diatur ke 2 secara default, tetapi IE8 yang baru dapat mencapai 6). Jadi, jika Anda mendistribusikan file gambar ke beberapa mesin, Anda dapat mencapai lebih dari 2 unduhan paralel. Namun, ketika file skrip diunduh, browser tidak akan memulai unduhan paralel lainnya.
Tentu saja, untuk setiap situs web, kelayakan menempatkan semua skrip di bagian bawah halaman masih dipertanyakan. Misalnya, halaman situs web Cina Alibaba. Ada inline JS di banyak tempat, dan tampilan halaman sangat tergantung pada hal ini. Saya akui bahwa ini jauh dari konsep skrip non-invasif, tetapi banyak masalah historis tidak begitu mudah dipecahkan.
Pasal 7: Hindari menggunakan ekspresi di CSS (hindari ekspresi CSS)
Namun, akan ada dua lapisan bersarang yang tidak berarti, yang jelas tidak baik. Solusi yang lebih baik diperlukan.
Pasal 8: Masukkan JavaScript dan CSS dalam file eksternal (buat JavaScript dan CSS External)
Saya pikir ini masih mudah dimengerti. Ini tidak hanya dilakukan dari perspektif optimasi kinerja, tetapi juga dari perspektif pemeliharaan kode yang mudah. Menulis CSS dan JS pada konten halaman dapat mengurangi 2 permintaan, tetapi juga meningkatkan ukuran halaman. Jika Anda memiliki CSS dan JS yang di -cache, tidak akan ada permintaan HTTP tambahan dua kali. Tentu saja, saya juga mengatakan sebelumnya bahwa beberapa pengembang halaman khusus masih akan memilih file inline CSS dan JS.
Pasal 9: Kurangi pencarian DNS
Ada korespondensi satu-ke-satu antara nama domain dan alamat IP di internet. Nama domain (kuqin.com) mudah diingat, tetapi komputer tidak mengenalinya. Pengakuan antara komputer harus dikonversi menjadi alamat IP. Setiap komputer di jaringan memiliki alamat IP independen. Pekerjaan konversi antara nama domain dan alamat IP disebut resolusi nama domain, juga dikenal sebagai DNS Query. Proses resolusi DNS akan memakan waktu 20-120 milidetik, dan browser tidak akan mengunduh apa pun di bawah nama domain sampai kueri DNS selesai. Oleh karena itu, mengurangi waktu kueri DNS dapat mempercepat kecepatan pemuatan halaman. Yahoo merekomendasikan bahwa jumlah nama domain yang terkandung dalam halaman harus dikontrol pada 2-4 sebanyak mungkin. Ini membutuhkan rencana yang bagus untuk halaman keseluruhan. Kami tidak melakukannya dengan baik saat ini, dan banyak sistem periklanan yang mengelola titik telah menyeret kami ke bawah.
Pasal 10: Compress JavaScript dan CSS (Minify JavaScript)
Jelas untuk mengompres kiri dan kanan JS dan CSS, mengurangi jumlah byte halaman. Kecepatan pemuatan halaman secara alami lebih cepat jika memiliki kapasitas kecil. Selain mengurangi volume, kompresi juga dapat memberikan sejumlah perlindungan. Kami melakukan pekerjaan dengan baik dalam hal ini. Alat kompresi umum termasuk JSmin, kompresor YUI, dll. Selain itu, seperti http://dean.edwards.name/packer/, kami juga memberi kami alat kompresi online yang sangat nyaman. Anda dapat melihat perbedaan kapasitas antara file JS terkompresi dan file JS yang tidak terkompresi di halaman web jQuery:
Tentu saja, salah satu kelemahan kompresi adalah bahwa keterbacaan kode hilang. Saya percaya banyak teman front-end telah mengalami masalah ini: efek melihat Google sangat keren, tetapi ketika melihat kode sumbernya, ada banyak karakter yang penuh sesak, dan bahkan nama fungsi telah diganti. Saya sangat berkeringat! Bukankah sangat tidak nyaman untuk pemeliharaan jika kode Anda sendiri sama? Praktik saat ini dari semua situs web Cina Alibaba adalah untuk mengompresnya di sisi server ketika JS dan CSS dirilis. Dengan cara ini kita dapat dengan mudah mempertahankan kode kita sendiri.
Pasal 11: Hindari pengalihan
Belum lama ini, saya melihat artikel "Internet Explorer dan Batas Koneksi" di IEBLOG. Misalnya, ketika Anda memasukkan http://www.kuqin.com/, server akan secara otomatis menghasilkan server 301 dan beralih ke http://www.kuqin.com/. Anda dapat melihatnya dengan melihat bilah alamat browser. Pengalihan semacam ini secara alami juga membutuhkan waktu. Tentu saja ini hanya sebuah contoh. Ada banyak alasan untuk pengalihan, tetapi hal yang tidak dapat diubah adalah bahwa setiap kali pengalihan ditambahkan, permintaan web akan ditambahkan, sehingga harus diminimalkan.
Pasal 12: Hapus skrip duplikat
Saya tidak ingin mengatakan ini, tetapi juga berlaku dari perspektif kinerja, tetapi juga dari perspektif spesifikasi kode. Tetapi saya harus mengakui bahwa berkali -kali kami akan menambahkan beberapa kode duplikat karena grafiknya cepat. Mungkin kerangka kerja CSS terpadu dan kerangka kerja JS dapat menyelesaikan masalah kita dengan lebih baik. Sudut pandang Xiaozhu benar, tidak hanya tidak dapat diulang, tetapi juga dapat digunakan kembali.
Pasal 13: Mengkonfigurasi Tag Entitas (Etags) (Konfigurasi Etag)
Saya juga tidak mengerti ini, haha. Saya menemukan penjelasan terperinci tentang Inforq "menggunakan etag untuk mengurangi bandwidth dan muatan aplikasi web". Siswa yang tertarik bisa pergi dan melihatnya.
Pasal 14: Buat Ajax Cacheable
Ajax masih perlu di -cache? Saat membuat permintaan AJAX, Anda sering perlu menambahkan cap waktu untuk menghindari cache. Penting untuk diingat bahwa asinkron tidak menyiratkan instan. Ingat, bahkan jika Ajax dihasilkan secara dinamis dan hanya berfungsi untuk satu pengguna, mereka masih dapat di -cache.