Abstrak: Baik di tempat kerja maupun saat wawancara, mengoptimalkan kinerja web front-end sangatlah penting. Lalu aspek apa saja yang kita perlukan untuk memulai optimasi? Anda bisa mengikuti 34 Catch-Rules Yahoo untuk optimasi front-end, tapi sekarang sudah 35, jadi bisa dikatakan Catch-35 Yahoo untuk optimasi front-end. Sudah diklasifikasikan, mana yang bagus. Dengan cara ini kami memiliki arah optimasi yang lebih jelas.
bagian konten 1. Minimalkan jumlah permintaan HTTP80% waktu respons pengguna akhir dihabiskan di front-end, dan sebagian besar waktu tersebut digunakan untuk mengunduh berbagai komponen pada halaman: gambar, stylesheet, skrip, Flash, dll. Mengurangi jumlah komponen pasti akan mengurangi jumlah permintaan HTTP yang dikirimkan oleh halaman tersebut. Ini adalah kunci untuk membuat halaman Anda lebih cepat.
Salah satu cara untuk mengurangi jumlah komponen halaman adalah dengan menyederhanakan desain halaman. Namun apakah ada cara untuk membuat halaman yang rumit sekaligus mempercepat waktu respons? Memang ada cara untuk mendapatkan kue Anda dan memakannya juga.
Menggabungkan file mengurangi jumlah permintaan dengan meletakkan semua skrip dalam satu file. Tentu saja, Anda juga dapat menggabungkan semua CSS. Menggabungkan file bisa menjadi tugas yang rumit jika skrip dan gaya setiap halaman berbeda, namun melakukan hal ini sebagai bagian dari proses penerbitan situs memang dapat meningkatkan waktu respons. Sprite CSS adalah cara yang disukai untuk mengurangi jumlah permintaan gambar. Integrasikan semua gambar latar belakang ke dalam satu gambar, lalu gunakan properti CSS background-image dan background-position untuk memposisikan bagian yang akan ditampilkan. Pemetaan gambar dapat menggabungkan beberapa gambar menjadi satu gambar, ukuran totalnya sama, namun mengurangi jumlah permintaan dan mempercepat pemuatan halaman. Pemetaan gambar hanya berguna jika gambar terus menerus berada di halaman, seperti bilah navigasi. Proses pengaturan koordinat peta gambar membosankan dan rawan kesalahan, serta penggunaan peta gambar untuk navigasi tidak mudah, sehingga cara ini tidak disarankan. Gambar sebaris (dikodekan Base64) menggunakan data: pola URL untuk menyematkan gambar ke dalam halaman. Ini akan meningkatkan ukuran file HTML. Menempatkan gambar sebaris dalam style sheet (cache) adalah ide yang bagus dan berhasil menghindari membuat halaman menjadi berat. Namun, browser mainstream saat ini tidak mendukung gambar inline dengan baik.Mengurangi jumlah permintaan HTTP untuk suatu halaman adalah titik awal. Ini adalah prinsip panduan penting untuk meningkatkan kecepatan kunjungan pertama ke situs.
2. Kurangi pencarian DNSSistem nama domain menetapkan pemetaan antara nama host dan alamat IP, seperti pemetaan antara nama dan nomor dalam buku telepon. Saat Anda memasukkan www.yahoo.com di browser, browser akan menghubungi pemecah DNS untuk mengembalikan alamat IP server. DNS mempunyai biaya, dibutuhkan 20 hingga 120 milidetik untuk mencari alamat IP untuk nama host tertentu. Browser tidak dapat mengunduh apa pun dari nama host hingga pencarian DNS selesai.
Pencarian DNS di-cache dengan lebih efisien, di server caching khusus oleh ISP (Penyedia Layanan Internet) atau jaringan lokal pengguna, namun juga dapat di-cache di komputer pengguna individual. Informasi DNS disimpan dalam cache DNS sistem operasi (layanan klien DNS pada Microsoft Windows). Sebagian besar browser memiliki cache sendiri yang tidak bergantung pada sistem operasi. Selama browser menyimpan catatan ini dalam cache-nya, browser tidak akan menanyakan DNS pada sistem operasi.
IE menyimpan cache pencarian DNS selama 30 menit secara default, seperti yang tertulis dalam pengaturan registri DnsCacheTimeout. Firefox melakukan cache selama 1 menit, yang dapat diatur menggunakan item konfigurasi network.dnsCacheExpiration. (Fasterfox mengubah waktu cache menjadi 1 jam PS Fasterfox adalah plug-in percepatan untuk FF)
Jika cache DNS klien kosong (termasuk browser dan sistem operasi), jumlah pencarian DNS sama dengan jumlah nama host berbeda pada halaman, termasuk URL halaman, gambar, file skrip, style sheet, objek Flash, dan lainnya komponen Nama Host, mengurangi nama host yang berbeda dapat mengurangi pencarian DNS.
Mengurangi jumlah nama host yang berbeda juga mengurangi jumlah komponen yang dapat diunduh suatu halaman secara paralel. Menghindari pencarian DNS akan mengurangi waktu respons, sementara mengurangi jumlah unduhan paralel akan meningkatkan waktu respons. Aturan saya adalah menyebarkan komponen ke 2 hingga 4 nama host, yang merupakan kompromi antara mengurangi pencarian DNS dan memungkinkan pengunduhan bersamaan yang tinggi.
3. Hindari pengalihanPengalihan menggunakan kode status 301 dan 302. Berikut adalah header HTTP dengan kode status 301:
HTTP/1.1 301 Dipindahkan Secara PermanenLokasi: http://example.com/newuriContent-Type: text/html
Browser akan secara otomatis melompat ke URL yang ditentukan di kolom Lokasi. Semua informasi yang diperlukan untuk pengalihan ada di header HTTP, dan isi respons biasanya kosong. Faktanya, header HTTP tambahan seperti Expires dan Cache-Control juga mewakili pengalihan. Ada cara lain untuk mengalihkan: menyegarkan tag meta dan JavaScript, tetapi jika Anda harus melakukan pengalihan, sebaiknya gunakan kode status HTTP 3xx standar, terutama agar tombol kembali dapat berfungsi dengan baik.
Ingatlah bahwa pengalihan dapat memperlambat pengalaman pengguna. Memasukkan pengalihan antara pengguna dan dokumen HTML akan menunda semua yang ada di laman. Laman tidak akan dirender dan komponen tidak akan mulai diunduh hingga dokumen HTML disajikan ke peramban.
Ada pengalihan umum yang sangat membuang-buang sumber daya, dan pengembang web umumnya tidak menyadarinya, dan saat itulah URL tidak memiliki garis miring di bagian akhir. Misalnya, melompat ke http://astrology.yahoo.com/astrology akan menghasilkan respons 301 yang mengalihkan ke http://astrology.yahoo.com/astrology/ (perhatikan garis miring di akhir). Di Apache, Anda dapat menggunakan instruksi Alias, mod_rewrite atau DirectorySlash untuk membatalkan pengalihan yang tidak perlu.
Penggunaan pengalihan yang paling umum adalah untuk menghubungkan situs lama ke situs baru. Ini juga dapat menghubungkan bagian berbeda dari situs yang sama dan melakukan beberapa pemrosesan sesuai dengan situasi pengguna yang berbeda (jenis browser, jenis akun pengguna, dll.) . Menghubungkan dua situs web menggunakan pengalihan adalah yang paling sederhana dan hanya memerlukan sedikit kode tambahan. Meskipun penggunaan pengalihan pada saat ini mengurangi kompleksitas pengembangan bagi pengembang, hal ini mengurangi pengalaman pengguna. Alternatifnya adalah dengan menggunakan Alias dan mod_rewrite, asalkan kedua jalur kode berada di server yang sama. Jika pengalihan digunakan karena perubahan nama domain, Anda dapat membuat CNAME (membuat data DNS yang menunjuk ke nama domain lain sebagai alias) yang dikombinasikan dengan direktif Alias atau mod_rewrite.
4. Jadikan Ajax dapat di-cacheSalah satu kelebihan Ajax adalah dapat memberikan umpan balik langsung kepada pengguna karena dapat meminta informasi secara asynchronous dari server backend. Namun, dengan Ajax tidak ada jaminan bahwa pengguna tidak akan bosan saat menunggu respons JavaScript dan XML asinkron kembali. Dalam banyak aplikasi, kemampuan pengguna untuk menunggu bergantung pada bagaimana Ajax digunakan. Misalnya, dalam klien email berbasis web, pengguna akan tetap fokus pada hasil yang dikembalikan oleh permintaan Ajax untuk menemukan pesan email yang sesuai dengan kriteria pencarian mereka. Penting untuk diingat bahwa asynchronous tidak berarti instan.
Untuk meningkatkan kinerja, mengoptimalkan respons Ajax ini sangatlah penting. Cara paling penting untuk meningkatkan kinerja Ajax adalah membuat respons dapat di-cache, seperti yang dibahas dalam Menambahkan header HTTP Kedaluwarsa atau Kontrol Cache. Aturan tambahan berikut ini berlaku untuk Ajax:
Mari kita lihat contoh klien email Web 2.0 yang menggunakan Ajax untuk mengunduh buku alamat pengguna untuk fungsi pelengkapan otomatis. Jika pengguna belum mengubah buku alamatnya sejak penggunaan terakhir, dan respons Ajax dapat disimpan dalam cache serta memiliki header HTTP Kedaluwarsa atau Kontrol Cache yang belum kedaluwarsa, maka buku alamat sebelumnya dapat dibaca dari cache. Browser harus diberi tahu apakah harus terus menggunakan respons buku alamat yang di-cache sebelumnya atau meminta yang baru. Hal ini dapat dicapai dengan menambahkan stempel waktu ke URL Ajax buku alamat yang menunjukkan waktu modifikasi terakhir buku alamat pengguna, misalnya &t=1190241612. Jika buku alamat belum diubah sejak pengunduhan terakhir dan stempel waktu tetap tidak berubah, buku alamat akan dibaca langsung dari cache browser, sehingga menghindari perjalanan bolak-balik HTTP tambahan. Jika pengguna telah mengubah buku alamat, stempel waktu juga memastikan bahwa URL baru tidak akan cocok dengan respons yang di-cache dan browser akan meminta entri buku alamat baru.
Meskipun respons Ajax dibuat secara dinamis dan mungkin hanya tersedia untuk satu pengguna, respons tersebut dapat di-cache, yang akan membuat aplikasi Web 2.0 Anda lebih cepat.
5. Pemuatan komponen yang lambatPerhatikan halaman tersebut lebih dekat dan tanyakan pada diri Anda: Apa yang diperlukan untuk merender halaman tersebut? Sisanya bisa menunggu.
JavaScript adalah pilihan ideal untuk memisahkan sebelum dan sesudah acara onload. Misalnya, jika Anda memiliki kode dan pustaka JavaScript yang mendukung drag-and-drop dan animasi, hal ini dapat menunggu karena elemen drag-and-drop terjadi setelah halaman pertama kali dirender. Bagian lain yang dapat dimuat dengan lambat mencakup konten tersembunyi (konten yang muncul setelah interaksi) dan gambar yang diciutkan.
Alat dapat membantu mengurangi beban kerja Anda: YUI Image Loader dapat memuat gambar yang diciutkan dengan lambat, dan utilitas YUI Get adalah cara mudah untuk memasukkan JS dan CSS. Beranda Yahoo! adalah contohnya. Anda dapat membuka panel jaringan Firebug dan melihat lebih dekat.
Sebaiknya selaraskan sasaran kinerja dengan praktik terbaik pengembangan web lainnya, seperti peningkatan progresif. Jika klien mendukung JavaScript, pengalaman pengguna dapat ditingkatkan, namun Anda harus memastikan bahwa halaman berfungsi dengan baik saat JavaScript tidak didukung. Jadi, setelah Anda yakin halaman Anda berfungsi dengan baik, Anda dapat menyempurnakannya dengan beberapa skrip pemuatan lambat untuk mendukung beberapa efek mewah seperti drag-and-drop dan animasi.
6. Pramuat komponen
Pramuat mungkin tampak seperti kebalikan dari pemuatan lambat, namun sebenarnya memiliki tujuan yang berbeda. Dengan melakukan pramuat komponen, Anda dapat memanfaatkan sepenuhnya waktu idle browser untuk meminta komponen (gambar, gaya, dan skrip) yang akan digunakan di masa mendatang. Saat pengguna mengakses halaman berikutnya, sebagian besar komponen sudah ada di cache, sehingga halaman akan dimuat lebih cepat dari sudut pandang pengguna.
Dalam aplikasi sebenarnya, ada jenis pramuat berikut:
Halaman yang kompleks berarti lebih banyak byte untuk diunduh, dan mengakses DOM dengan JavaScript akan lebih lambat. Misalnya, saat Anda ingin menambahkan event handler, ada perbedaan antara mengulang 500 elemen DOM pada halaman dan 5.000 elemen DOM.
Banyaknya elemen DOM merupakan tanda adanya beberapa markup tidak relevan pada halaman yang perlu dibersihkan. Apakah Anda menggunakan tabel bersarang untuk tata letak? Atau apakah Anda menambahkan banyak <div> hanya untuk memperbaiki masalah tata letak? Mungkin markup semantik yang lebih baik harus digunakan.
Utilitas YUI CSS sangat membantu untuk tata letak: grids.css untuk tata letak keseluruhan, dan font.css serta reset.css dapat digunakan untuk menghapus format default browser. Ini adalah kesempatan yang baik untuk mulai membersihkan dan memikirkan markup Anda, seperti hanya menggunakan <div> jika masuk akal secara semantik, bukan karena membuat baris baru.
Jumlah elemen DOM mudah untuk diuji, cukup ketik di konsol Firebug:
dokumen.getElementsByTagName('*').panjangJadi berapa banyak elemen DOM yang terlalu banyak? Anda dapat merujuk ke halaman serupa lainnya yang ditandai dengan baik. Misalnya, halaman beranda Yahoo! adalah halaman yang cukup sibuk, namun memiliki kurang dari 700 elemen (tag HTML).
8. Pemisahan komponen lintas domainMemisahkan komponen dapat memaksimalkan pengunduhan paralel, namun pastikan Anda hanya menggunakan tidak lebih dari 2-4 domain, karena ada penalti pencarian DNS. Misalnya, Anda dapat menerapkan HTML dan konten dinamis di www.example.org, dan memisahkan komponen statis menjadi static1.example.org dan static2.example.org.
9. Gunakan iframe sesedikit mungkinAnda dapat menggunakan iframe untuk menyisipkan dokumen HTML ke dalam dokumen induk. Penting untuk memahami cara kerja iframe dan menggunakannya secara efisien.
Keuntungan <iframe>:
Kekurangan <iframe>:
Permintaan HTTP mahal. Tidak perlu menggunakan permintaan HTTP untuk mendapatkan respons yang tidak berguna (seperti 404 Not Found) Ini hanya akan memperlambat pengalaman pengguna tanpa manfaat apa pun.
Beberapa situs menggunakan 404 yang bermanfaat - Maksud Anda xxx? , Ini bermanfaat bagi pengalaman pengguna, tetapi juga membuang sumber daya server (seperti database, dll.). Yang terburuk adalah JavaScript eksternal yang Anda tautkan mengalami kesalahan dan hasilnya adalah 404. Pertama, unduhan ini akan memblokir unduhan paralel. Kedua, browser akan mencoba mengurai isi respons 404 karena ini adalah kode JavaScript dan perlu mencari tahu bagian mana yang tersedia.
bagian css 11. Hindari penggunaan ekspresi CSSMenggunakan ekspresi CSS untuk menyetel properti CSS secara dinamis adalah cara yang ampuh dan berbahaya. Didukung dari IE5, tetapi tidak digunakan lagi di IE8. Misalnya, Anda dapat menggunakan ekspresi CSS untuk mengatur warna latar belakang agar bergantian berdasarkan jam:
warna latar belakang: ekspresi( (Tanggal baru()).getHours()%2 ? #B8D4FF : #F08A00 );12. Pilih <link> untuk membuang @import
Praktik terbaik telah disebutkan sebelumnya: untuk mencapai rendering progresif, CSS harus ditempatkan di bagian atas.
Menggunakan @import di IE memiliki efek yang sama dengan menggunakan <link> di bagian bawah, jadi sebaiknya tidak menggunakannya.
13. Hindari penggunaan filterFilter AlphaImageLoader milik IE dapat digunakan untuk memperbaiki masalah gambar PNG tembus pandang di versi sebelum IE7. Selama proses pemuatan gambar, filter ini akan memblokir rendering, membekukan browser, meningkatkan konsumsi memori, dan diterapkan pada setiap elemen, bukan setiap gambar, sehingga akan banyak masalah.
Cara terbaiknya adalah dengan tidak menggunakan AlphaImageLoader, dan turunkan versinya dengan menggunakan gambar PNG8 yang didukung dengan baik di IE. Jika Anda harus menggunakan AlphaImageLoader, Anda harus menggunakan garis bawah hack:_filter agar tidak memengaruhi pengguna IE7 dan lebih tinggi.
14. Letakkan style sheet di bagian atasKetika mempelajari kinerja di Yahoo!, kami menemukan bahwa menempatkan style sheet di bagian HEAD dokumen membuat halaman tampak dimuat lebih cepat. Ini karena menempatkan style sheet di kepala memungkinkan halaman dirender secara bertahap.
Teknisi front-end yang peduli dengan performa ingin halaman dirender secara bertahap. Dengan kata lain, kami ingin browser menampilkan konten yang ada secepat mungkin, yang khususnya penting ketika ada banyak konten di halaman atau ketika koneksi Internet pengguna sangat lambat. Pentingnya menunjukkan umpan balik kepada pengguna (seperti indikator kemajuan) telah dipelajari dan didokumentasikan secara luas. Dalam kasus kami, halaman HTML adalah indikator kemajuan! Ketika browser secara bertahap memuat header halaman, bilah navigasi, logo atas, dll., ini digunakan sebagai umpan balik oleh pengguna yang menunggu halaman dimuat, yang dapat meningkatkan pengalaman pengguna secara keseluruhan.
bagian js 15. Hapus skrip duplikatHalaman yang berisi file skrip duplikat dapat berdampak lebih besar pada kinerja daripada yang Anda kira. Dalam tinjauan terhadap 10 situs web teratas di Amerika Serikat, hanya dua situs yang ditemukan berisi skrip duplikat. Dua alasan utama meningkatkan kemungkinan duplikat skrip muncul di satu halaman: ukuran tim dan jumlah skrip. Dalam hal ini, skrip duplikat membuat permintaan HTTP yang tidak perlu, mengeksekusi kode JavaScript yang tidak berguna, dan memengaruhi kinerja halaman.
IE menghasilkan permintaan HTTP yang tidak diperlukan, tetapi Firefox tidak. Di IE, jika skrip eksternal yang tidak dapat di-cache dimasukkan dua kali oleh halaman, maka akan menghasilkan dua permintaan HTTP saat halaman dimuat. Meskipun skrip dapat di-cache, skrip akan menghasilkan permintaan HTTP tambahan saat pengguna memuat ulang halaman.
Selain menghasilkan permintaan HTTP yang tidak berarti, mengevaluasi skrip berkali-kali juga membuang-buang waktu. Karena terlepas dari apakah skrip dapat di-cache atau tidak, kode JavaScript yang berlebihan akan dieksekusi di Firefox dan IE.
Salah satu cara untuk menghindari impor skrip yang sama dua kali secara tidak sengaja adalah dengan mengimplementasikan modul manajemen skrip dalam sistem templat. Cara umum untuk memperkenalkan skrip adalah dengan menggunakan tag SCRIPT di halaman HTML:
<skrip tipe=teks/javascript src=menu_1.0.17.js></script>16. Minimalkan akses DOM
Mengakses elemen DOM dengan JavaScript sangat lambat, jadi untuk membuat halaman lebih responsif, Anda harus:
Terkadang halaman terasa kurang responsif karena terlalu banyak event handler yang sering dieksekusi telah ditambahkan ke berbagai elemen pohon DOM. Inilah sebabnya mengapa delegasi event direkomendasikan. Jika ada 10 tombol dalam sebuah div, Anda sebaiknya hanya menambahkan satu event handler ke wadah div, bukan satu untuk setiap tombol. Acara dapat muncul dalam gelembung, sehingga Anda dapat mengabadikan acara tersebut dan mengetahui tombol mana yang menjadi sumber acara tersebut.
18. Letakkan scriptnya di bagian bawahSkrip akan memblokir pengunduhan paralel. Dokumentasi resmi HTTP/1.1 menyarankan agar browser tidak mengunduh lebih dari dua komponen secara paralel per nama host. Jika gambar berasal dari beberapa nama host, jumlah pengunduhan paralel dapat melebihi dua. Jika skrip sedang diunduh, browser tidak akan memulai tugas pengunduhan lainnya, bahkan dengan nama host yang berbeda.
Terkadang, tidak mudah untuk memindahkan skrip ke bawah. Misalnya, jika skrip dimasukkan ke dalam konten halaman menggunakan document.write, tidak ada cara untuk memindahkannya lebih jauh ke bawah. Mungkin juga terdapat masalah pelingkupan, yang pada sebagian besar kasus dapat diselesaikan.
Saran yang umum adalah menggunakan skrip yang ditangguhkan. Skrip dengan atribut DEFER berarti skrip tersebut tidak dapat berisi document.write dan meminta browser untuk memberi tahu skrip tersebut bahwa mereka dapat melanjutkan rendering. Sayangnya, Firefox tidak mendukung atribut DEFER. Di IE, skrip mungkin ditunda, tetapi tidak seperti yang diharapkan. Jika skrip dapat ditunda, kita dapat memindahkannya ke bagian bawah halaman dan halaman akan dimuat lebih cepat.
javascript, css 19. Simpan JavaScript dan CSS di luarBanyak prinsip kinerja berkaitan dengan cara mengelola komponen eksternal, namun sebelum kekhawatiran ini muncul, Anda harus mengajukan pertanyaan yang lebih mendasar: Haruskah JavaScript dan CSS ditempatkan di file eksternal atau ditulis langsung di halaman?
Faktanya, menggunakan file eksternal bisa membuat halaman menjadi lebih cepat karena file JavaScript dan CSS akan di-cache di browser. JavaScript dan CSS sebaris dalam dokumen HTML diunduh ulang setiap kali dokumen HTML diminta. Melakukan hal ini akan mengurangi jumlah permintaan HTTP yang diperlukan namun meningkatkan ukuran dokumen HTML. Sebaliknya, jika JavaScript dan CSS berada di file eksternal dan telah di-cache oleh browser, maka kita telah berhasil memperkecil dokumen HTML tanpa menambah jumlah permintaan HTTP.
20. Perkecil JavaScript dan CSSKompresi secara khusus menghapus karakter yang tidak perlu dari kode untuk mengurangi ukuran dan dengan demikian meningkatkan kecepatan pemuatan. Minimalkan kode berarti menghapus semua komentar dan karakter spasi yang tidak perlu (spasi, baris baru, dan tab). Melakukan hal ini dalam JavaScript dapat meningkatkan daya tanggap karena file yang akan diunduh lebih kecil. Dua alat kompresi kode JavaScript yang paling umum digunakan adalah JSMin dan Kompresor YUI. Kompresor YUI juga dapat mengompresi CSS.
Kebingungan adalah tindakan pengoptimalan kode sumber opsional yang lebih kompleks daripada kompresi, sehingga proses kebingungan juga lebih mungkin menghasilkan bug. Dalam survei terhadap sepuluh situs web teratas di Amerika Serikat, kompresi dapat mengurangi ukuran sebesar 21%, dan kebingungan dapat mengurangi ukuran sebesar 25%. Meskipun pengaburan memberikan tingkat pengurangan yang lebih tinggi, hal ini lebih berisiko dibandingkan kompresi.
Selain mengompresi skrip dan gaya eksternal, blok <script> dan <style> sebaris juga dapat dikompresi. Meskipun modul gzip diaktifkan, kompresi terlebih dahulu dapat mengurangi ukuran sebesar 5% atau lebih. JavaScript dan CSS semakin banyak digunakan, sehingga mengompresi kode akan memberikan efek yang baik.
gambar 21. Optimalkan gambarCoba ubah format GIF ke format PNG dan lihat apakah itu menghemat ruang. Jalankan pngcrush (atau alat pengoptimalan PNG lainnya) pada semua gambar PNG
22. Optimalkan Sprite CSSJangan gunakan gambar yang lebih besar dari yang Anda perlukan hanya karena Anda dapat mengatur lebar dan tinggi dalam HTML. jika diperlukan
<img width=100 height=100 src=mycat.jpg Host: us.yimg.com Jika-Dimodifikasi-Sejak: Sel, 12 Des 2006 03:03:59 GMT Jika-Tidak Ada-Match: 10c24bc-4ab-457e1c1f HTTP/ 1.1 304 Tidak Dimodifikasi32. Gunakan permintaan GET untuk Ajax
Tim Yahoo! Mailbox menemukan bahwa ketika menggunakan XMLHttpRequest, permintaan POST browser diimplementasikan melalui proses dua langkah: pertama mengirimkan header HTTP, dan kemudian mengirim data. Jadi yang terbaik adalah menggunakan permintaan GET, yang hanya perlu mengirim pesan TCP (kecuali jika cookie terlalu banyak). Panjang URL IE maksimal adalah 2K, sehingga jika data yang akan dikirim melebihi 2K maka GET tidak dapat digunakan.
Efek samping yang menarik dari permintaan POST adalah tidak ada data yang dikirim, seperti permintaan GET. Seperti yang dijelaskan dalam dokumentasi HTTP, permintaan GET digunakan untuk mengambil informasi. Jadi semantiknya hanya menggunakan permintaan GET untuk meminta data, bukan untuk mengirim data yang perlu disimpan ke server.
33. Hapus buffer sedini mungkinSaat pengguna meminta suatu halaman, server memerlukan waktu sekitar 200 hingga 500 milidetik untuk menyusun halaman HTML, selama waktu tersebut browser menganggur dan menunggu data tiba. Ada fungsi flush() di PHP, yang memungkinkan Anda mengirim sebagian dari respons HTML yang telah disiapkan ke browser, sehingga browser dapat mulai mendapatkan komponen sambil mempersiapkan sisanya di latar belakang di latar belakang yang sangat sibuk atau bagian depan yang sangat terang. Di halaman (PS Dengan kata lain, keunggulannya paling baik tercermin ketika waktu respons sebagian besar berada di latar belakang).
Tempat ideal untuk menghapus buffer adalah setelah HEAD, karena bagian HEAD dari HTML biasanya lebih mudah dibuat dan memungkinkan pengenalan file CSS dan JavaScript apa pun, memungkinkan browser untuk mulai mengambil komponen secara paralel saat latar belakang masih diproses. .
Misalnya:
... <!-- css, js --> </head> <?php flush(); ?> <body> ... <!-- konten -->34. Gunakan CDN (Jaringan Pengiriman Konten)
Jarak fisik pengguna dari server juga berdampak pada waktu respons. Menyebarkan konten di beberapa server yang tersebar secara geografis memungkinkan pengguna memuat halaman lebih cepat. Tapi bagaimana cara melakukannya?
Langkah pertama dalam mencapai konten yang terdistribusi secara geografis adalah: Jangan mencoba mendesain ulang aplikasi web Anda untuk mengakomodasi struktur terdistribusi. Tergantung pada aplikasinya, mengubah struktur mungkin mencakup tugas-tugas berat seperti menyinkronkan status sesi dan mereplikasi transaksi database di seluruh server (terjemahan mungkin tidak akurat). Proposal untuk memperpendek jarak antara pengguna dan konten mungkin tertunda atau tidak mungkin diloloskan karena kesulitan ini.
Ingatlah bahwa 80% hingga 90% waktu respons pengguna akhir dihabiskan untuk mengunduh komponen halaman: gambar, gaya, skrip, Flash, dll. Ini adalah aturan emas kinerja. Lebih baik menyebarkan konten statis terlebih dahulu daripada mendesain ulang struktur aplikasi dari awal. Hal ini tidak hanya mengurangi waktu respons secara signifikan, namun juga mempermudah mendemonstrasikan kontribusi CDN.
Jaringan pengiriman konten (CDN) adalah sekelompok server web yang tersebar di lokasi geografis berbeda untuk mengirimkan konten ke pengguna dengan lebih efisien. Biasanya, server yang dipilih untuk mengirimkan konten didasarkan pada ukuran jarak jaringan. Misalnya: pilih server dengan jumlah hop terkecil atau waktu respons tercepat.
35. Tambahkan header HTTP Kedaluwarsa atau Kontrol CacheAda dua aspek dalam aturan ini:
Desain web semakin kaya, yang berarti semakin banyak skrip, gambar, dan Flash di halaman. Pengunjung baru ke situs mungkin masih harus mengirimkan beberapa permintaan HTTP, namun dengan menggunakan tanggal kedaluwarsa, komponen menjadi dapat di-cache, sehingga menghindari permintaan HTTP yang tidak perlu selama sesi penjelajahan berikutnya. Header HTTP kedaluwarsa biasanya digunakan pada gambar, namun harus digunakan pada semua komponen, termasuk skrip, gaya, dan komponen Flash.
Browser (dan proxy) menggunakan caching untuk mengurangi jumlah dan ukuran permintaan HTTP sehingga halaman dimuat lebih cepat. Server web menggunakan header respons HTTP Kedaluwarsa untuk memberi tahu klien berapa lama setiap komponen halaman harus di-cache. Menggunakan waktu di masa depan sebagai tanggal kedaluwarsa memberi tahu browser bahwa respons ini tidak akan berubah sebelum tanggal 15 April 2010.
Kedaluwarsa: Kam, 15 Apr 2010 20:00:00 GMT
Jika Anda menggunakan server Apache, gunakan direktif ExpiresDefault untuk mengatur tanggal kedaluwarsa relatif terhadap tanggal saat ini. Contoh berikut menetapkan masa berlaku 10 tahun sejak waktu permintaan:
KedaluwarsaAkses default ditambah 10 tahun
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.