Ketika webservers mengirim halaman, mengapa mereka tidak mengirim semua CSS, JS, dan gambar yang diperlukan tanpa diminta?

Ketika sebuah halaman web berisi satu file CSS dan sebuah gambar, mengapa browser dan server membuang waktu dengan rute tradisional yang menghabiskan waktu ini:

1. browser mengirimkan permintaan GET awal untuk halaman web dan menunggu respons server.
2. browser mengirimkan permintaan GET lain untuk file css dan menunggu respons server.
3. browser mengirimkan permintaan GET lain untuk file gambar dan menunggu respons server.

Kapan mereka bisa menggunakan rute singkat, langsung, dan hemat waktu ini?

1. Browser mengirimkan permintaan GET untuk halaman web.
2. Server web merespons dengan ( index.html diikuti oleh style.css dan image.jpg )

Jawaban singkatnya adalah "Karena HTTP tidak dirancang untuk itu".

Tim Berners-Lee tidak merancang protokol jaringan yang efisien dan dapat dikembangkan. Satu tujuan desainnya adalah kesederhanaan. (Profesor kelas jaringan saya di perguruan tinggi mengatakan bahwa dia seharusnya menyerahkan pekerjaan kepada para profesional.) Masalah yang Anda garis besarkan hanyalah salah satu dari banyak masalah dengan protokol HTTP. Dalam bentuk aslinya:

• Tidak ada versi protokol, hanya permintaan untuk sumber daya
• Tidak ada header
• Setiap permintaan memerlukan koneksi TCP baru
• Tidak ada kompresi

Protokol kemudian direvisi untuk mengatasi banyak masalah ini:

• Permintaan telah diversi, sekarang permintaan tampak seperti GET /foo.html HTTP/1.1
• Header ditambahkan untuk informasi meta dengan permintaan dan respons
• Koneksi diizinkan untuk digunakan kembali Connection: keep-alive
• Respons terpotong diperkenalkan untuk memungkinkan koneksi untuk digunakan kembali bahkan ketika ukuran dokumen tidak diketahui sebelumnya.
• Kompresi Gzip telah ditambahkan

Pada titik ini HTTP telah diambil sejauh mungkin tanpa merusak kompatibilitas.

Anda bukan orang pertama yang menyarankan bahwa halaman dan semua sumber dayanya harus didorong ke klien. Bahkan, Google merancang protokol yang dapat melakukan hal itu disebut SPDY .

Hari ini baik Chrome dan Firefox dapat menggunakan SPDY alih-alih HTTP ke server yang mendukungnya. Dari situs web SPDY, fitur utamanya dibandingkan dengan HTTP adalah:

• SPDY memungkinkan klien dan server untuk mengompres header permintaan dan respons, yang mengurangi penggunaan bandwidth ketika header yang sama (misalnya cookie) dikirim berulang-ulang untuk beberapa permintaan.
• SPDY memungkinkan beberapa permintaan, secara bersamaan multiplexing melalui satu koneksi, menghemat perjalanan bolak-balik antara klien dan server, dan mencegah sumber daya prioritas rendah dari memblokir permintaan prioritas tinggi.
• SPDY memungkinkan server untuk secara aktif mendorong sumber daya ke klien yang ia tahu akan dibutuhkan oleh klien (mis. JavaScript dan file CSS) tanpa menunggu klien untuk memintanya, memungkinkan server untuk menggunakan bandwidth yang tidak digunakan secara efisien.

Jika Anda ingin melayani situs web Anda dengan SPDY untuk browser yang mendukungnya, Anda dapat melakukannya. Misalnya Apache memiliki mod_spdy .

SPDY telah menjadi dasar untuk HTTP versi 2 dengan teknologi server push.

Peramban web Anda tidak tahu tentang sumber daya tambahan hingga ia mengunduh laman web (HTML) dari server, yang berisi tautan ke sumber daya itu.

Anda mungkin bertanya-tanya, mengapa server tidak mem-parsing HTML-nya sendiri dan mengirim semua sumber daya tambahan ke browser web selama permintaan awal untuk halaman web? Itu karena sumber daya mungkin tersebar di beberapa server, dan peramban web mungkin tidak memerlukan semua sumber daya itu karena sudah ada beberapa dari mereka di-cache, atau mungkin tidak mendukungnya.

Browser web menyimpan cache sumber daya sehingga tidak perlu mengunduh sumber daya yang sama berulang-ulang dari server yang menampungnya. Saat menavigasi halaman berbeda di situs web yang semuanya menggunakan pustaka jQuery yang sama, Anda tidak ingin mengunduh pustaka itu setiap kali, hanya saja pertama kali.

Jadi ketika browser web mendapatkan halaman web dari server, ia memeriksa sumber daya tertaut apa yang sudah TIDAK dimiliki dalam cache, kemudian membuat permintaan HTTP tambahan untuk sumber daya tersebut. Cukup sederhana, sangat fleksibel dan dapat dikembangkan.

Peramban web biasanya dapat membuat dua permintaan HTTP secara paralel. Ini tidak seperti AJAX - keduanya adalah metode asinkron untuk memuat halaman web - memuat file asinkron dan memuat konten asinkron. Dengan tetap-hidup , kita dapat membuat beberapa permintaan menggunakan satu koneksi, dan dengan pipelining kita dapat membuat beberapa permintaan tanpa harus menunggu tanggapan. Kedua teknik ini sangat cepat karena sebagian besar overhead biasanya berasal dari membuka / menutup koneksi TCP:

Sedikit riwayat web ...

Halaman web dimulai sebagai email teks biasa, dengan sistem komputer yang direkayasa di sekitar gagasan ini, membentuk platform komunikasi yang agak bebas untuk semua; server web masih menjadi hak milik pada saat itu. Kemudian, lebih banyak lapisan ditambahkan ke "spesifikasi email" dalam bentuk tipe MIME tambahan, seperti gambar, gaya, skrip, dll. Lagi pula, MIME adalah kepanjangan dari Internet Mail Extension Multi-Purpose . Cepat atau lambat kami memiliki apa yang pada dasarnya komunikasi email multimedia, server web standar, dan halaman web.

HTTP mengharuskan data ditransmisikan dalam konteks pesan seperti email, meskipun data yang paling sering sebenarnya bukan email.

Sebagai teknologi seperti ini berkembang, itu perlu memungkinkan pengembang untuk secara progresif memasukkan fitur-fitur baru tanpa merusak perangkat lunak yang ada. Misalnya, ketika jenis MIME baru ditambahkan ke spesifikasi - katakanlah JPEG - akan membutuhkan waktu bagi server web dan browser web untuk mengimplementasikannya. Anda tidak hanya tiba-tiba memaksakan JPEG ke dalam spesifikasi dan mulai mengirimnya ke semua browser web, Anda mengizinkan browser web untuk meminta sumber daya yang didukungnya, yang membuat semua orang senang dan teknologi bergerak maju. Apakah pembaca layar membutuhkan semua JPEG di halaman web? Mungkin tidak. Haruskah Anda dipaksa untuk mengunduh banyak file Javascript jika perangkat Anda tidak mendukung Javascript? Mungkin tidak. Apakah Googlebot perlu mengunduh semua file Javascript Anda untuk mengindeks situs Anda dengan benar? Nggak.

Sumber: Saya telah mengembangkan server web berbasis acara seperti Node.js. Ini disebut Server Cepat .

Referensi:

• Koneksi persisten HTTP (tetap-hidup)
• Pemipaan HTTP
• Koneksi HTTP / 1.1 (RFC 2616)

Bacaan lebih lanjut:

• Apakah SPDY berbeda dari multiplexing http selama koneksi tetap hidup
• Mengapa HTTP / 2.0 sepertinya tidak menarik

Karena mereka tidak tahu sumber daya apa itu. Aset yang dibutuhkan halaman web dikodekan ke dalam HTML. Hanya setelah parser menentukan apa aset-aset itu, Anda dapat diminta oleh agen-pengguna.

Selain itu, begitu aset-aset itu diketahui, mereka perlu dilayani secara individual sehingga tajuk yang tepat (yaitu tipe konten) dapat dilayani sehingga agen-pengguna tahu bagaimana menanganinya.

Karena, dalam contoh Anda, server web akan selalu mengirim CSS dan gambar terlepas dari apakah klien sudah memilikinya, sehingga sangat membuang bandwidth (dan dengan demikian membuat koneksi lebih lambat , bukannya lebih cepat dengan mengurangi latensi, yang mungkin merupakan niat Anda). Perhatikan bahwa file CSS, JavaScript, dan gambar biasanya dikirim dengan waktu kedaluwarsa yang sangat lama karena alasan itu (seperti ketika Anda perlu mengubahnya, Anda cukup mengubah nama file untuk memaksa salinan baru yang lagi-lagi akan di-cache untuk waktu yang lama).

Sekarang, Anda dapat mencoba mengatasi pemborosan bandwidth dengan mengatakan " OK, tetapi klien dapat mengindikasikan bahwa ia sudah memiliki beberapa sumber daya, sehingga server tidak akan mengirimnya lagi ". Sesuatu seperti:

GET /index.html HTTP/1.1
Host: www.example.com
If-None-Match: "686897696a7c876b7e"
Connection: Keep-Alive

GET /style.css HTTP/1.1
Host: www.example.com
If-None-Match: "70b26618ce2c246c71"

GET /image.png HTTP/1.1
Host: www.example.com
If-None-Match: "16d5b7c2e50e571a46"

Dan kemudian dapatkan hanya file yang tidak berubah yang dikirim melalui satu koneksi TCP (menggunakan pipelining HTTP melalui koneksi persisten). Dan coba tebak? Ini adalah cara yang sudah bekerja (Anda juga bisa menggunakan Jika-Diubah-Sejak bukannya Jika-Tidak-Match ).

Tetapi jika Anda benar-benar ingin mengurangi latensi dengan membuang banyak bandwidth (seperti dalam permintaan awal Anda), Anda dapat melakukannya hari ini menggunakan standar HTTP / 1.1 ketika merancang situs web Anda. Alasan kebanyakan orang tidak melakukannya adalah karena mereka tidak berpikir itu sepadan.

Untuk melakukannya, Anda tidak perlu memiliki CSS atau JavaScript dalam file terpisah, Anda dapat memasukkannya ke dalam file HTML utama dengan menggunakan <style>dan <script>tag (Anda mungkin bahkan tidak perlu melakukannya secara manual, mesin template Anda mungkin dapat melakukannya secara otomatis) . Anda bahkan dapat memasukkan gambar dalam file HTML menggunakan data URI , seperti ini:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Tentu saja, pengkodean base64 sedikit meningkatkan penggunaan bandwidth, tetapi jika Anda tidak peduli dengan bandwidth yang terbuang, itu seharusnya tidak menjadi masalah.

Sekarang, jika Anda benar-benar peduli, Anda bahkan dapat membuat skrip web Anda cukup pintar untuk mendapatkan yang terbaik dari kedua dunia: berdasarkan permintaan pertama (pengguna tidak memiliki cookie), kirim semuanya (CSS, JavaScript, gambar) yang disematkan hanya dalam satu HTML tunggal file seperti dijelaskan di atas, tambahkan tautan tautan = "prefetch" untuk salinan eksternal file, dan tambahkan cookie. Jika pengguna sudah memiliki cookie (mis. Dia telah mengunjungi sebelumnya), maka kirimkan dia hanya HTML biasa dengan <img src="example.jpg">, <link rel="stylesheet" type="text/css" href="style.css">dll.

Jadi pada kunjungan pertama browser akan meminta hanya satu file HTML dan mendapatkan dan menampilkan semuanya. Maka akan (saat idle) memuat gambar CSS, JS, eksternal yang ditentukan. Kali berikutnya pengguna mengunjungi, browser akan meminta dan hanya mendapatkan sumber daya yang diubah (mungkin hanya HTML baru).

Data gambar CSS + JS + tambahan hanya akan dikirim dua kali, bahkan jika Anda mengklik ratusan kali di situs web. Jauh lebih baik daripada ratusan kali seperti yang disarankan solusi Anda. Dan itu tidak akan pernah (bukan pada pertama kali, atau pada kali berikutnya) menggunakan lebih dari satu perjalanan pulang-pergi latensi yang meningkat.

Sekarang, jika itu terdengar seperti terlalu banyak pekerjaan, dan Anda tidak ingin menggunakan protokol lain seperti SPDY , sudah ada modul seperti mod_pagespeed untuk Apache, yang secara otomatis dapat melakukan beberapa pekerjaan itu untuk Anda (menggabungkan beberapa file CSS / JS menjadi satu, masukkan CSS kecil secara otomatis dan minimalkan, buat gambar placeholder kecil bergaris sambil menunggu dokumen asli dimuat, malas memuat gambar dll.) tanpa mengharuskan Anda memodifikasi satu baris halaman web Anda.

HTTP2 didasarkan pada SPDY dan melakukan persis apa yang Anda sarankan:

Pada level tinggi, HTTP / 2:

• biner, bukan tekstual
• sepenuhnya multiplexing, bukannya dipesan dan diblokir
• Karena itu dapat menggunakan satu koneksi untuk paralelisme
• menggunakan kompresi tajuk untuk mengurangi overhead
• memungkinkan server untuk "mendorong" respons secara proaktif ke dalam cache klien

Lebih banyak tersedia di HTTP 2 Faq

Karena tidak menganggap bahwa hal-hal ini sebenarnya diperlukan .

Protokol tidak mendefinisikan penanganan khusus untuk jenis file atau agen-pengguna tertentu. Itu tidak tahu perbedaan antara, katakanlah, file HTML dan gambar PNG. Untuk melakukan apa yang Anda minta, server Web harus mengidentifikasi jenis file, menguraikannya untuk mencari tahu file apa yang dirujuk, dan kemudian menentukan file lain yang benar-benar diperlukan, mengingat apa yang ingin Anda lakukan dengan file . Ada tiga masalah besar dengan ini.

Masalah pertama adalah bahwa tidak ada standar, cara kuat untuk mengidentifikasi tipe file di ujung server . HTTP mengelola melalui mekanisme Tipe-Konten, tetapi itu tidak membantu server, yang harus memikirkan hal ini sendiri (sebagian sehingga ia tahu apa yang harus dimasukkan ke dalam Tipe-Konten). Ekstensi nama file didukung secara luas, tetapi rapuh dan mudah dibodohi, terkadang untuk tujuan jahat. Metadata Filesystem kurang rapuh, tetapi kebanyakan sistem tidak mendukungnya dengan baik, sehingga server bahkan tidak repot. Mengendus konten (seperti yang filecoba dilakukan beberapa browser dan perintah Unix ) bisa menjadi kuat jika Anda bersedia membuatnya mahal, tetapi mengendus yang kuat terlalu mahal untuk praktis di sisi server, dan mengendus murah tidak cukup kuat.

Masalah kedua adalah parsing file itu mahal, secara komputasi . Ini terkait dengan yang pertama, karena Anda perlu mem-parsing file dalam banyak cara berbeda jika Anda ingin mengendus konten dengan kuat, tetapi itu juga berlaku setelah Anda mengidentifikasi jenis file, karena Anda perlu untuk mencari tahu apa referensi tersebut. Ini tidak terlalu buruk ketika Anda hanya melakukan beberapa file sekaligus, seperti browser, tetapi server Web harus menangani ratusan atau ribuan permintaan sekaligus. Ini bertambah, dan jika terlalu jauh, sebenarnya dapat memperlambat segalanya lebih dari beberapa permintaan. Jika Anda pernah mengunjungi tautan dari Slashdot atau situs serupa, hanya untuk mengetahui bahwa server sangat lambat karena penggunaan yang tinggi, Anda telah melihat prinsip ini sedang beraksi.

Masalah ketiga adalah bahwa server tidak memiliki cara untuk mengetahui apa yang ingin Anda lakukan dengan file tersebut . Browser mungkin memerlukan file yang direferensikan dalam HTML, tetapi mungkin tidak, tergantung pada konteks yang tepat di mana file sedang dieksekusi. Itu akan cukup rumit, tetapi ada lebih banyak di Web daripada hanya peramban: antara laba-laba, agregator umpan, dan penghancuran halaman, ada banyak jenis agen-pengguna yang tidak memerlukan file yang direferensikan dalam HTML : mereka hanya peduli tentang HTML itu sendiri. Mengirim file-file ini ke agen-pengguna seperti itu hanya akan membuang-buang bandwidth.

Intinya adalah bahwa mencari tahu dependensi ini di sisi server lebih banyak masalah daripada nilainya . Jadi alih-alih, mereka membiarkan klien mencari tahu apa yang dibutuhkan.