Advertisement
Mengurangi Cookie Ukuran
Cookie HTTP digunakan untuk berbagai alasan seperti otentikasi dan personalisasi. Informasi tentang cookie dipertukarkan dalam header HTTP antara server web dan browser. Sangat penting untuk menjaga ukuran cookie serendah mungkin untuk meminimalkan dampak pada waktu respon pengguna.
Untuk informasi lebih lanjut, periksa "Ketika Cookie runtuh" oleh Tenni Theurer dan Patty Chi. The dibawa pulang dari penelitian ini:
Menghilangkan cookies yang tidak perlu
Jauhkan ukuran kue serendah mungkin untuk meminimalkan dampak pada waktu respon pengguna
Berhati-hati pengaturan cookie pada tingkat domain yang sesuai sehingga sub-domain lainnya tidak terpengaruh
Menetapkan tanggal Habis tepat. Sebuah sebelumnya Habis tanggal atau tidak menghapus cookie cepat, meningkatkan waktu respon pengguna
Gunakan Domain Cookie bebas untuk Komponen
Ketika browser membuat permintaan untuk gambar statis dan mengirimkan cookies bersama-sama dengan permintaan, server tidak memiliki gunakan untuk cookie. Jadi mereka hanya membuat lalu lintas jaringan tanpa alasan yang baik. Anda harus memastikan komponen statis diminta dengan permintaan cookie-bebas. Membuat subdomain dan tuan rumah semua komponen statis Anda di sana.
Jika domain Anda adalah www.example.org , Anda dapat meng-host komponen statis Anda pada static.example.org . Namun, jika Anda sudah mengatur cookie pada top-level domain example.org sebagai lawan www.example.org , maka semua permintaan untuk static.example.org akan termasuk orang-orang cookies. Dalam hal ini, Anda dapat membeli domain baru, tuan komponen statis Anda di sana, dan menjaga domain ini cookie-bebas. Yahoo! menggunakan yimg.com , YouTube menggunakan ytimg.com , Amazon menggunakan gambar-amazon.com dan sebagainya.
Manfaat lain hosting komponen statis pada domain cookie-bebas adalah bahwa beberapa proxy mungkin menolak untuk cache komponen yang diminta dengan cookie. Pada catatan terkait, jika Anda bertanya-tanya apakah Anda harus menggunakan example.org atau www.example.org untuk halaman rumah Anda, mempertimbangkan dampak kue. Menghilangkan www membuat Anda tidak punya pilihan selain untuk menulis cookie untuk *. example.org , jadi untuk alasan kinerja yang terbaik untuk menggunakan subdomain www dan menulis cookie ke subdomain tersebut.
Minimalkan Access DOM
Mengakses elemen DOM dengan JavaScript lambat agar dapat memiliki halaman lebih responsif, Anda harus:
Cache referensi ke elemen diakses
Perbarui node "offline" dan kemudian menambahkannya ke pohon
Hindari memperbaiki tata letak dengan JavaScript
Untuk informasi lebih lanjut memeriksa YUI teater "High Performance Ajax Aplikasi" oleh Julien Lecomte.
Mengembangkan Cerdas Acara Handlers
Kadang-kadang halaman merasa kurang responsif karena terlalu banyak event handler yang melekat pada unsur-unsur yang berbeda dari pohon DOM yang kemudian dieksekusi terlalu sering. Itu sebabnya menggunakan delegasi event adalah pendekatan yang baik. Jika Anda memiliki 10 tombol di dalam div , melampirkan hanya satu event handler untuk pembungkus div, bukan satu handler untuk setiap tombol. Acara meluap sehingga Anda akan dapat menangkap acara tersebut dan mencari tahu tombol mana ia berasal dari.
Anda juga tidak perlu menunggu untuk acara onload untuk mulai melakukan sesuatu dengan pohon DOM. Seringkali semua yang Anda butuhkan adalah elemen yang ingin Anda akses akan tersedia di pohon. Anda tidak perlu menunggu untuk semua gambar yang akan didownload. DOMContentLoaded adalah acara Anda mungkin mempertimbangkan untuk menggunakan bukannya onload, tapi sampai ini tersedia di semua browser, Anda dapat menggunakan YUI acara utilitas, yang memiliki onAvailable metode.
Untuk informasi lebih lanjut memeriksa YUI teater "High Performance Ajax Aplikasi" oleh Julien Lecomte.
Pilih <link> lebih @ import
Salah satu praktik terbaik sebelumnya menyatakan bahwa CSS harus di atas dalam rangka untuk memungkinkan render progresif.
Dalam IE @ import berperilaku sama dengan menggunakan <link> di bagian bawah halaman, jadi yang terbaik untuk tidak menggunakannya.
Hindari Filter
The IE-proprietary AlphaImageLoader penyaring bertujuan untuk memperbaiki masalah dengan semi-transparan benar PNGs warna dalam versi IE <7. Masalah dengan filter ini adalah bahwa hal itu blok rendering dan membeku browser saat gambar sedang didownload. Hal ini juga meningkatkan konsumsi memori dan diterapkan per elemen, bukan per image, sehingga masalah dikalikan.
Pendekatan terbaik adalah untuk menghindari AlphaImageLoader sepenuhnya dan menggunakan PNG8 anggun merendahkan sebaliknya, yang baik-baik saja di IE. Jika Anda benar-benar membutuhkan AlphaImageLoader , gunakan garis bawah hack _filter untuk tidak menghukum Anda IE7 + pengguna.
Optimalkan Images
Setelah desainer ini dilakukan dengan menciptakan gambar untuk halaman web Anda, masih ada beberapa hal yang dapat Anda coba sebelum Anda FTP gambar-gambar ke server web Anda.
Anda dapat memeriksa GIF dan melihat apakah mereka menggunakan ukuran palet yang sesuai dengan jumlah warna dalam gambar. Menggunakan ImageMagick mudah untuk memeriksa menggunakan mengidentifikasi-verbose image.gif Ketika Anda melihat gambar menggunakan 4 warna dan 256 warna "slot" di palet, ada ruang untuk perbaikan.
Cobalah mengubah GIF ke PNG dan melihat apakah ada penghematan a. Lebih sering daripada tidak, ada. Pengembang sering ragu-ragu untuk menggunakan PNGs karena dukungan terbatas dalam browser, tapi ini sekarang menjadi sesuatu dari masa lalu. Satu-satunya masalah adalah alpha-PNG transparansi dalam true color, tapi sekali lagi, GIF tidak warna yang benar dan tidak mendukung transparansi variabel baik. Jadi apa pun yang bisa dilakukan GIF, PNG palet (PNG8) bisa melakukan terlalu (kecuali untuk animasi). Ini hasil perintah ImageMagick sederhana benar-benar aman digunakan PNGs: mengkonversi image.gif image.png "Semua yang kami katakan adalah: Berikan PING Chance!"
Jalankan pngcrush (atau alat optimasi PNG lainnya) pada semua PNGs Anda. Contoh: pngcrush image.png-rem result.png alla-mengurangi-brute
Jalankan jpegtran pada semua file JPEG Anda. Alat ini dapat melakukan operasi JPEG lossless seperti rotasi dan juga dapat digunakan untuk mengoptimalkan dan menghapus komentar dan informasi berguna lainnya (seperti informasi EXIF) dari gambar Anda. jpegtran-copy none-mengoptimalkan-sempurna src.jpg dest.jpg
Optimalkan CSS Sprite
Mengatur gambar dalam sprite horizontal sebagai lawan vertikal biasanya menghasilkan ukuran file yang lebih kecil.
Menggabungkan warna yang sama dalam sprite akan membantu Anda menjaga warna count rendah, idealnya di bawah 256 warna sehingga untuk masuk dalam PNG8 a.
"Jadilah ponsel-friendly" dan tidak meninggalkan kesenjangan besar antara gambar dalam sprite. Ini tidak mempengaruhi ukuran file sebanyak tetapi membutuhkan lebih sedikit memori untuk agen pengguna untuk dekompresi gambar ke peta pixel. 100x100 gambar adalah 10 ribu piksel, di mana 1000x1000 adalah 1 juta piksel
Jangan Skala Gambar dalam HTML
Jangan gunakan gambar yang lebih besar dari yang Anda butuhkan hanya karena Anda dapat mengatur lebar dan tinggi dalam HTML. Jika Anda perlu <img width="100" height="100" src="mycat.jpg" alt="Teman Cat" /> maka gambar Anda (mycat.jpg) harus 100x100px daripada skala bawah gambar 500x500px.
Membuat favicon.ico Kecil dan Cacheable
Favicon.ico adalah gambar yang tetap di root server Anda. Ini adalah kejahatan yang diperlukan karena bahkan jika Anda tidak peduli tentang hal itu browser masih akan meminta itu, jadi lebih baik tidak menanggapi dengan 404 Not Found . Juga karena itu pada server yang sama, cookie akan dikirim setiap kali itu diminta. Gambar ini juga mengganggu urutan download, misalnya di IE ketika Anda meminta komponen tambahan di onload, favicon akan di-download sebelum ini komponen tambahan.
Jadi untuk mengurangi kelemahan memiliki favicon.ico pastikan:
Ini kecil, sebaiknya di bawah 1K.
Set Expires header dengan apa yang Anda merasa nyaman (karena Anda tidak dapat mengubah nama jika Anda memutuskan untuk mengubahnya). Anda mungkin dapat dengan aman mengatur Habis tajuk beberapa bulan ke depan. Anda dapat memeriksa tanggal diubah terakhir favicon.ico Anda saat ini untuk membuat keputusan.
ImageMagick dapat membantu Anda membuat Favicons kecil
Jauhkan Komponen bawah 25K
Pembatasan ini berkaitan dengan fakta bahwa iPhone tidak akan komponen cache yang lebih besar dari 25K. Catatan bahwa ini adalah terkompresi ukuran. Di sinilah minification penting karena gzip saja mungkin tidak cukup.
Untuk informasi lebih lanjut cek " Penelitian Kinerja, Bagian 5: iPhone ynd Bisa - Sehingga Tetap "oleh Wayne Shea dan Tenni Theurer.
Komponen Pack ke dalam Dokumen Multipart
Packing komponen ke dalam dokumen multipart seperti email dengan attachment, ada baiknya Anda mengambil beberapa komponen dengan satu permintaan HTTP (ingat: HTTP request mahal). Bila Anda menggunakan teknik ini, pertama-tama memeriksa apakah user agent mendukungnya (iPhone tidak).
Hindari Kosong Gambar src
Gambar dengan string kosong src atribut terjadi lebih dari satu akan mengharapkan. Ini muncul dalam dua bentuk:
HTML lurus
<img src="">
JavaScript
var img = new Image ();
img.src = "";
Kedua bentuk menyebabkan efek yang sama: Browser membuat permintaan lain ke server Anda.
Internet Explorer membuat permintaan ke direktori di mana halaman berada.
Safari dan Chrome membuat permintaan ke halaman itu sendiri.
Firefox 3 dan versi sebelumnya berperilaku sama seperti Safari dan Chrome, tapi versi 3.5 membahas masalah ini [bug 444931] dan tidak lagi mengirimkan permintaan.
Opera tidak melakukan apa-apa ketika gambar src kosong ditemui.
Mengapa perilaku buruk ini?
Melumpuhkan server Anda dengan mengirimkan sejumlah besar lalu lintas yang tak terduga, terutama untuk halaman yang mendapatkan jutaan tampilan halaman per hari.
Siklus komputasi Server Limbah menghasilkan halaman yang tidak akan pernah dilihat.
Data pengguna mungkin korup. Jika Anda negara pelacakan dalam permintaan, baik oleh cookie atau dengan cara lain, Anda memiliki kemungkinan merusak data. Meskipun permintaan gambar tidak mengembalikan gambar, semua header dibaca dan diterima oleh browser, termasuk semua cookie. Sementara sisa respon dibuang, kerusakan mungkin sudah bisa dilakukan.
Akar penyebab perilaku ini adalah cara bahwa resolusi URI dilakukan dalam browser. Perilaku ini didefinisikan dalam RFC 3986 - Uniform Resource Identifier. Ketika string kosong ditemui sebagai URI, itu dianggap sebagai URI relatif dan diselesaikan sesuai dengan algoritma didefinisikan dalam bagian 5.2. Ini contoh spesifik, string kosong, terdaftar dalam bagian 5.4. Firefox, Safari, dan Chrome semua menyelesaikan string kosong dengan benar sesuai spesifikasi, sementara Internet Explorer menyelesaikan itu salah, ternyata sejalan dengan versi sebelumnya dari spesifikasi, RFC 2396 - Uniform Resource Identifier (ini usang oleh RFC 3986) . Jadi secara teknis, browser melakukan apa yang seharusnya mereka lakukan untuk menyelesaikan URI relatif. Masalahnya adalah bahwa dalam konteks ini, string kosong jelas tidak disengaja.
HTML5 menambah deskripsi tag src atribut untuk menginstruksikan browser untuk tidak membuat permintaan tambahan dalam bagian 4.8.2:
The src atribut harus hadir, dan harus berisi URL yang valid referensi non-interaktif, animasi opsional, sumber daya gambar yang tidak paged atau scripted. Jika basis URI dari elemen adalah sama dengan alamat dokumen, maka nilai src atribut itu tidak harus menjadi string kosong.
Mudah-mudahan, browser tidak akan memiliki masalah ini di masa depan. Sayangnya, tidak ada klausul tersebut untuk <script src=""> dan <link href="">. Mungkin masih ada waktu untuk membuat penyesuaian untuk memastikan bahwa browser tidak sengaja menerapkan perilaku ini.
Cookie HTTP digunakan untuk berbagai alasan seperti otentikasi dan personalisasi. Informasi tentang cookie dipertukarkan dalam header HTTP antara server web dan browser. Sangat penting untuk menjaga ukuran cookie serendah mungkin untuk meminimalkan dampak pada waktu respon pengguna.
Untuk informasi lebih lanjut, periksa "Ketika Cookie runtuh" oleh Tenni Theurer dan Patty Chi. The dibawa pulang dari penelitian ini:
Menghilangkan cookies yang tidak perlu
Jauhkan ukuran kue serendah mungkin untuk meminimalkan dampak pada waktu respon pengguna
Berhati-hati pengaturan cookie pada tingkat domain yang sesuai sehingga sub-domain lainnya tidak terpengaruh
Menetapkan tanggal Habis tepat. Sebuah sebelumnya Habis tanggal atau tidak menghapus cookie cepat, meningkatkan waktu respon pengguna
Gunakan Domain Cookie bebas untuk Komponen
Ketika browser membuat permintaan untuk gambar statis dan mengirimkan cookies bersama-sama dengan permintaan, server tidak memiliki gunakan untuk cookie. Jadi mereka hanya membuat lalu lintas jaringan tanpa alasan yang baik. Anda harus memastikan komponen statis diminta dengan permintaan cookie-bebas. Membuat subdomain dan tuan rumah semua komponen statis Anda di sana.
Jika domain Anda adalah www.example.org , Anda dapat meng-host komponen statis Anda pada static.example.org . Namun, jika Anda sudah mengatur cookie pada top-level domain example.org sebagai lawan www.example.org , maka semua permintaan untuk static.example.org akan termasuk orang-orang cookies. Dalam hal ini, Anda dapat membeli domain baru, tuan komponen statis Anda di sana, dan menjaga domain ini cookie-bebas. Yahoo! menggunakan yimg.com , YouTube menggunakan ytimg.com , Amazon menggunakan gambar-amazon.com dan sebagainya.
Manfaat lain hosting komponen statis pada domain cookie-bebas adalah bahwa beberapa proxy mungkin menolak untuk cache komponen yang diminta dengan cookie. Pada catatan terkait, jika Anda bertanya-tanya apakah Anda harus menggunakan example.org atau www.example.org untuk halaman rumah Anda, mempertimbangkan dampak kue. Menghilangkan www membuat Anda tidak punya pilihan selain untuk menulis cookie untuk *. example.org , jadi untuk alasan kinerja yang terbaik untuk menggunakan subdomain www dan menulis cookie ke subdomain tersebut.
Minimalkan Access DOM
Mengakses elemen DOM dengan JavaScript lambat agar dapat memiliki halaman lebih responsif, Anda harus:
Cache referensi ke elemen diakses
Perbarui node "offline" dan kemudian menambahkannya ke pohon
Hindari memperbaiki tata letak dengan JavaScript
Untuk informasi lebih lanjut memeriksa YUI teater "High Performance Ajax Aplikasi" oleh Julien Lecomte.
Mengembangkan Cerdas Acara Handlers
Kadang-kadang halaman merasa kurang responsif karena terlalu banyak event handler yang melekat pada unsur-unsur yang berbeda dari pohon DOM yang kemudian dieksekusi terlalu sering. Itu sebabnya menggunakan delegasi event adalah pendekatan yang baik. Jika Anda memiliki 10 tombol di dalam div , melampirkan hanya satu event handler untuk pembungkus div, bukan satu handler untuk setiap tombol. Acara meluap sehingga Anda akan dapat menangkap acara tersebut dan mencari tahu tombol mana ia berasal dari.
Anda juga tidak perlu menunggu untuk acara onload untuk mulai melakukan sesuatu dengan pohon DOM. Seringkali semua yang Anda butuhkan adalah elemen yang ingin Anda akses akan tersedia di pohon. Anda tidak perlu menunggu untuk semua gambar yang akan didownload. DOMContentLoaded adalah acara Anda mungkin mempertimbangkan untuk menggunakan bukannya onload, tapi sampai ini tersedia di semua browser, Anda dapat menggunakan YUI acara utilitas, yang memiliki onAvailable metode.
Untuk informasi lebih lanjut memeriksa YUI teater "High Performance Ajax Aplikasi" oleh Julien Lecomte.
Pilih <link> lebih @ import
Salah satu praktik terbaik sebelumnya menyatakan bahwa CSS harus di atas dalam rangka untuk memungkinkan render progresif.
Dalam IE @ import berperilaku sama dengan menggunakan <link> di bagian bawah halaman, jadi yang terbaik untuk tidak menggunakannya.
Hindari Filter
The IE-proprietary AlphaImageLoader penyaring bertujuan untuk memperbaiki masalah dengan semi-transparan benar PNGs warna dalam versi IE <7. Masalah dengan filter ini adalah bahwa hal itu blok rendering dan membeku browser saat gambar sedang didownload. Hal ini juga meningkatkan konsumsi memori dan diterapkan per elemen, bukan per image, sehingga masalah dikalikan.
Pendekatan terbaik adalah untuk menghindari AlphaImageLoader sepenuhnya dan menggunakan PNG8 anggun merendahkan sebaliknya, yang baik-baik saja di IE. Jika Anda benar-benar membutuhkan AlphaImageLoader , gunakan garis bawah hack _filter untuk tidak menghukum Anda IE7 + pengguna.
Optimalkan Images
Setelah desainer ini dilakukan dengan menciptakan gambar untuk halaman web Anda, masih ada beberapa hal yang dapat Anda coba sebelum Anda FTP gambar-gambar ke server web Anda.
Anda dapat memeriksa GIF dan melihat apakah mereka menggunakan ukuran palet yang sesuai dengan jumlah warna dalam gambar. Menggunakan ImageMagick mudah untuk memeriksa menggunakan mengidentifikasi-verbose image.gif Ketika Anda melihat gambar menggunakan 4 warna dan 256 warna "slot" di palet, ada ruang untuk perbaikan.
Cobalah mengubah GIF ke PNG dan melihat apakah ada penghematan a. Lebih sering daripada tidak, ada. Pengembang sering ragu-ragu untuk menggunakan PNGs karena dukungan terbatas dalam browser, tapi ini sekarang menjadi sesuatu dari masa lalu. Satu-satunya masalah adalah alpha-PNG transparansi dalam true color, tapi sekali lagi, GIF tidak warna yang benar dan tidak mendukung transparansi variabel baik. Jadi apa pun yang bisa dilakukan GIF, PNG palet (PNG8) bisa melakukan terlalu (kecuali untuk animasi). Ini hasil perintah ImageMagick sederhana benar-benar aman digunakan PNGs: mengkonversi image.gif image.png "Semua yang kami katakan adalah: Berikan PING Chance!"
Jalankan pngcrush (atau alat optimasi PNG lainnya) pada semua PNGs Anda. Contoh: pngcrush image.png-rem result.png alla-mengurangi-brute
Jalankan jpegtran pada semua file JPEG Anda. Alat ini dapat melakukan operasi JPEG lossless seperti rotasi dan juga dapat digunakan untuk mengoptimalkan dan menghapus komentar dan informasi berguna lainnya (seperti informasi EXIF) dari gambar Anda. jpegtran-copy none-mengoptimalkan-sempurna src.jpg dest.jpg
Optimalkan CSS Sprite
Mengatur gambar dalam sprite horizontal sebagai lawan vertikal biasanya menghasilkan ukuran file yang lebih kecil.
Menggabungkan warna yang sama dalam sprite akan membantu Anda menjaga warna count rendah, idealnya di bawah 256 warna sehingga untuk masuk dalam PNG8 a.
"Jadilah ponsel-friendly" dan tidak meninggalkan kesenjangan besar antara gambar dalam sprite. Ini tidak mempengaruhi ukuran file sebanyak tetapi membutuhkan lebih sedikit memori untuk agen pengguna untuk dekompresi gambar ke peta pixel. 100x100 gambar adalah 10 ribu piksel, di mana 1000x1000 adalah 1 juta piksel
Jangan Skala Gambar dalam HTML
Jangan gunakan gambar yang lebih besar dari yang Anda butuhkan hanya karena Anda dapat mengatur lebar dan tinggi dalam HTML. Jika Anda perlu <img width="100" height="100" src="mycat.jpg" alt="Teman Cat" /> maka gambar Anda (mycat.jpg) harus 100x100px daripada skala bawah gambar 500x500px.
Membuat favicon.ico Kecil dan Cacheable
Favicon.ico adalah gambar yang tetap di root server Anda. Ini adalah kejahatan yang diperlukan karena bahkan jika Anda tidak peduli tentang hal itu browser masih akan meminta itu, jadi lebih baik tidak menanggapi dengan 404 Not Found . Juga karena itu pada server yang sama, cookie akan dikirim setiap kali itu diminta. Gambar ini juga mengganggu urutan download, misalnya di IE ketika Anda meminta komponen tambahan di onload, favicon akan di-download sebelum ini komponen tambahan.
Jadi untuk mengurangi kelemahan memiliki favicon.ico pastikan:
Ini kecil, sebaiknya di bawah 1K.
Set Expires header dengan apa yang Anda merasa nyaman (karena Anda tidak dapat mengubah nama jika Anda memutuskan untuk mengubahnya). Anda mungkin dapat dengan aman mengatur Habis tajuk beberapa bulan ke depan. Anda dapat memeriksa tanggal diubah terakhir favicon.ico Anda saat ini untuk membuat keputusan.
ImageMagick dapat membantu Anda membuat Favicons kecil
Jauhkan Komponen bawah 25K
Pembatasan ini berkaitan dengan fakta bahwa iPhone tidak akan komponen cache yang lebih besar dari 25K. Catatan bahwa ini adalah terkompresi ukuran. Di sinilah minification penting karena gzip saja mungkin tidak cukup.
Untuk informasi lebih lanjut cek " Penelitian Kinerja, Bagian 5: iPhone ynd Bisa - Sehingga Tetap "oleh Wayne Shea dan Tenni Theurer.
Komponen Pack ke dalam Dokumen Multipart
Packing komponen ke dalam dokumen multipart seperti email dengan attachment, ada baiknya Anda mengambil beberapa komponen dengan satu permintaan HTTP (ingat: HTTP request mahal). Bila Anda menggunakan teknik ini, pertama-tama memeriksa apakah user agent mendukungnya (iPhone tidak).
Hindari Kosong Gambar src
Gambar dengan string kosong src atribut terjadi lebih dari satu akan mengharapkan. Ini muncul dalam dua bentuk:
HTML lurus
<img src="">
JavaScript
var img = new Image ();
img.src = "";
Kedua bentuk menyebabkan efek yang sama: Browser membuat permintaan lain ke server Anda.
Internet Explorer membuat permintaan ke direktori di mana halaman berada.
Safari dan Chrome membuat permintaan ke halaman itu sendiri.
Firefox 3 dan versi sebelumnya berperilaku sama seperti Safari dan Chrome, tapi versi 3.5 membahas masalah ini [bug 444931] dan tidak lagi mengirimkan permintaan.
Opera tidak melakukan apa-apa ketika gambar src kosong ditemui.
Mengapa perilaku buruk ini?
Melumpuhkan server Anda dengan mengirimkan sejumlah besar lalu lintas yang tak terduga, terutama untuk halaman yang mendapatkan jutaan tampilan halaman per hari.
Siklus komputasi Server Limbah menghasilkan halaman yang tidak akan pernah dilihat.
Data pengguna mungkin korup. Jika Anda negara pelacakan dalam permintaan, baik oleh cookie atau dengan cara lain, Anda memiliki kemungkinan merusak data. Meskipun permintaan gambar tidak mengembalikan gambar, semua header dibaca dan diterima oleh browser, termasuk semua cookie. Sementara sisa respon dibuang, kerusakan mungkin sudah bisa dilakukan.
Akar penyebab perilaku ini adalah cara bahwa resolusi URI dilakukan dalam browser. Perilaku ini didefinisikan dalam RFC 3986 - Uniform Resource Identifier. Ketika string kosong ditemui sebagai URI, itu dianggap sebagai URI relatif dan diselesaikan sesuai dengan algoritma didefinisikan dalam bagian 5.2. Ini contoh spesifik, string kosong, terdaftar dalam bagian 5.4. Firefox, Safari, dan Chrome semua menyelesaikan string kosong dengan benar sesuai spesifikasi, sementara Internet Explorer menyelesaikan itu salah, ternyata sejalan dengan versi sebelumnya dari spesifikasi, RFC 2396 - Uniform Resource Identifier (ini usang oleh RFC 3986) . Jadi secara teknis, browser melakukan apa yang seharusnya mereka lakukan untuk menyelesaikan URI relatif. Masalahnya adalah bahwa dalam konteks ini, string kosong jelas tidak disengaja.
HTML5 menambah deskripsi tag src atribut untuk menginstruksikan browser untuk tidak membuat permintaan tambahan dalam bagian 4.8.2:
The src atribut harus hadir, dan harus berisi URL yang valid referensi non-interaktif, animasi opsional, sumber daya gambar yang tidak paged atau scripted. Jika basis URI dari elemen adalah sama dengan alamat dokumen, maka nilai src atribut itu tidak harus menjadi string kosong.
Mudah-mudahan, browser tidak akan memiliki masalah ini di masa depan. Sayangnya, tidak ada klausul tersebut untuk <script src=""> dan <link href="">. Mungkin masih ada waktu untuk membuat penyesuaian untuk memastikan bahwa browser tidak sengaja menerapkan perilaku ini.
