Haruskah JavaScript yang dirujuk di bagian kepala disajikan dari nama host yang sama dengan dokumen utama?

12

Saya mendapat kesan bahwa untuk kinerja terbaik, Javascript harus diperlakukan sebagai konten statis dan disajikan dari domain tanpa cookie bersama dengan file CSS, gambar, dll.

Tetapi Google mengatakan di sini: Jangan menyajikan file JS eksternal yang dimuat lebih awal dari domain tanpa masak

Untuk JavaScript yang dirujuk di kepala dokumen dan diperlukan untuk memulai halaman, itu harus dilayani dari nama host yang sama dengan dokumen utama. Karena sebagian besar browser memblokir unduhan dan render lainnya hingga semua file JavaScript diunduh, diuraikan dan dieksekusi, lebih baik untuk menghindari risiko pencarian DNS tambahan pada titik pemrosesan ini.

Jadi sekarang saya berkonflik. Saya tidak jelas tentang apa artinya "diperlukan untuk memulai halaman".

Saya biasanya memiliki dua referensi JavaScript, JQuery yang disajikan dari ajax.googleapis.com dan file master.js yang sebagian besar berisi penangan peristiwa dalam fungsi $ (dokumen) .ready (). Apakah ini diperlukan untuk memulai halaman?

Dengan opsi yang tersedia, (ajax.googleapis.com, domain tanpa cookie statis, nama host asli), di mana seharusnya JavaScript saya disajikan?

— James Lawruk
sumber

5

Jadi sekarang saya berkonflik. Saya tidak jelas tentang apa artinya "diperlukan untuk memulai halaman".

Ini sangat tergantung pada bagaimana fungsi situs Anda. Pada dasarnya, ini adalah JavaScript yang harus dijalankan sebelum seseorang dapat menggunakan halaman web.

Sebagai contoh, jika Anda mengunjungi http://www.weather.com/ , Anda dapat melihat bahwa orang-orang baik-baik saja memutuskan untuk menggunakan beberapa sihir JavaScript untuk memberikan petunjuk untuk formulir pencarian cuaca. Yakni kata-kata Enter Zip, City or Place (e.g. Disney World)muncul di bidang input teks. Sayangnya, ada sedikit keterlambatan saat halaman dimuat, setidaknya di ujung saya. Jadi, jika halaman tersebut cukup lambat untuk dimuat dan Anda cukup cepat untuk mulai mengetik input teks sebelum JavaScript dieksekusi - yang bukan peregangan - input Anda dapat dikacaukan oleh JavaScript yang secara membabi buta menempatkan petunjuk yang teks di kotak input.

Memang, ini bisa dihindari dengan memeriksa input pengguna di kotak teks terlebih dahulu atau hanya menyerah pada teknik anakronistik ini. Namun, itu tidak akan menjadi contoh yang sangat bagus.

Dengan opsi yang tersedia, (ajax.googleapis.com, domain tanpa cookie statis, nama host asli), di mana seharusnya JavaScript saya disajikan?

Ini tidak bisa dijawab tanpa mengetahui apa yang dilakukan JavaScript Anda. Juga, seperti disinggung oleh bpeterson76, itu tergantung pada situasi spesifik situs Anda. Yaitu seberapa besar halaman? seberapa baik tuan rumah Anda memenuhi permintaan? berapa banyak file CSS, gambar, dll yang dimuat? berapa banyak sumber daya eksternal yang dimuatnya?

Bergantung pada situasi spesifik Anda, ini mungkin optimasi prematur.

— George Marian
sumber

4

Aturan "apa pun yang diperlukan sebelum halaman akan mulai render harus berasal dari server yang sama" biasanya berlaku untuk aturan Andaserver atau sumber daya lain yang lebih kecil - situasi di mana pencarian DNS itu dapat mengambil sepersekian detik (yang dapat bertambah dengan cepat jika objek Anda berserakan di banyak domain). Dengan sumber daya publik yang umum seperti cache Google dari jQuery dan perpustakaan lain ada kemungkinan besar browser pengunjung Anda telah melakukan pencarian DNS hari ini (karena situs lain mereferensikan konten dari layanan itu) dan mungkin memiliki file dalam cache juga jadi tidak ada transfer harus dilakukan (atau jika permintaan dibuat, mungkin saja akan mendapat respons pendek "304 - tidak dimodifikasi"). Bahkan jika pengunduhan penuh diperlukan untuk objek tersebut, jaringan pengiriman konten Google akan lebih cepat untuk sebagian besar pengguna daripada operasi skala kecil Anda.

Satu aturan terkait: objek yang tidak diperlukan untuk fungsi halaman yang benar (seperti yang dilihat pengguna) harus dirujuk selambat mungkin dalam respons HTTP utama. Misalnya, hal-hal seperti skrip yang diperlukan untuk layanan iklan / statistik (mis. Google Analytics dan sejenisnya) - beri pengguna konten Anda secepat mungkin, lalu muatkan hal-hal latar belakang yang hanya benar-benar menarik minat Anda. Saya telah memblokir beberapa layanan iklan / statistik (dengan memetakannya ke 127.0.0.1 dalam file host saya) karena mereka sering terlalu lambat dan situs yang merujuk mereka lebih awal hanya memberi saya halaman kosong sementara skrip ditunggu sebagai gantinya merujuk mereka terlambat sehingga saya dapat membaca konten saya di sana untuk sementara hal-hal lain bergolak di latar belakang.

Kegunaan domain tanpa cookie untuk konten statis adalah masalah skala. Jika semua yang Anda miliki adalah satu ID sesi 10-byte di cookie dan sepuluh ribu pengunjung per hari meminta ~ 20 objek statis per kunjungan, Anda hanya menghemat ~ 118Mbyte bandwidth per bulan (20 * 20 * 10000 * 31/1024/1024). Jika di sisi lain situs Anda menyimpan satu atau dua Kbytes barang dalam cookie perbedaannya bisa jauh lebih signifikan, terutama jika ada pengguna Anda mengakses situs melalui koneksi yang lambat (yaitu GPRS melalui tethering ke ponsel, atau lebih - tautan wifi penuh di area interferensi tinggi) atau jika Anda mendapat jutaan kunjungan per hari.

Untuk meringkas, untuk skrip yang harus dimuat sebelum halaman dapat membuat preferensi saya akan:

ajax.googleapis.com, atau serupa
nama host asli dari halaman panggilan
domain tanpa cookie statis

Untuk sumber daya yang tidak penting untuk rendering halaman awal, lihat selambat-lambatnya dan balikkan daftar preferensi di atas (meskipun perbedaan antara nama host asli dan domain tanpa cookie kemungkinan besar tidak signifikan kecuali Anda beroperasi dalam skala besar ).

— David Spillett
sumber

With common public resources ... there is a good chance that your visitor's browser has already done that DNS lookup today

Secara pribadi, saya tidak akan merasa nyaman mengandalkan ini untuk situs saya . Saya ingin itu secepat mungkin dalam situasi sebanyak mungkin. Apapun, Anda membuat poin bagus. +1

— George Marian

1

Google menjalankan jaringan konten besar yang didistribusikan di seluruh dunia yang menempatkan konten lebih dekat kepada pengguna daripada server tunggal mana pun yang kemungkinan Anda jalankan (pikirkan Akami, tetapi dimiliki oleh Google) Jadi, dari sudut pandang kecepatan, masuk akal bahwa Google akan memberikan file Anda kepada pengguna lebih cepat dari server lokal Anda ... kecuali mereka berada sangat dekat dengan server pribadi Anda.

Pertanyaan ini telah berputar-putar di Stackoverflow, dan jawaban di atas tampaknya selalu menjadi konsensus. Tapi dari sudut pandang yang realistis, keuntungan yang didapat dari hosting di satu vs yang lain akan menjadi sangat minim dalam jangka panjang. Anda akan mendapatkan manfaat yang jauh lebih baik dari meminimalkan, mengoptimalkan, dan mengurangi permintaan http keseluruhan daripada Anda akan meneliti di mana segala sesuatu berada secara fisik. Dalam situasi di mana itu mulai menjadi masalah (saya melakukan pekerjaan di mana sebuah halaman memuat 1,5+ juta kali / hari, jadi peningkatan 5k berarti 5 gigs dalam penghematan bandwidth) biasanya ada tim pembuat keputusan yang ditugaskan untuk meneliti keputusan-keputusan ini.

Secara pribadi, saya biasanya meng-host di Google dengan satu-satunya alasan bahwa mereka akan memberi saya salinan terbaru dari apa yang saya cari.

— bpeterson76
sumber

Di mana Anda meng-host JavaScript khusus Anda? Domain tanpa cookie yang statis atau nama host asli?

— James Lawruk

Jujur saja, di luar (kebanyakan) Jquery in-line, benar-benar tidak banyak yang tidak dapat dihubungkan secara dinamis. Saya cenderung menjaga voodoo seminimal mungkin, menggunakan (terutama) core Jquery dan Jquery UI, dengan kemungkinan pengecualian dari plugin Datatables. Saya sangat percaya pada konsep Keep it simple (bodoh) dan tidak akan mengeluarkan kode jika tidak kompatibel, yang mengesampingkan banyak pilihan. Seperti yang saya katakan di atas, meletakkan satu file pada domain non-tidak-masak bukanlah masalah besar.

— bpeterson76

1

Satu hal penting untuk diingat adalah bahwa browser memiliki batasan pada berapa banyak sumber daya yang akan diunduh secara bersamaan dari domain yang sama, biasanya antara 2 dan 6 tergantung pada browser. Menggunakan domain yang berbeda memungkinkan browser mengunduh lebih banyak hal secara bersamaan dari domain Anda.

Jadi solusi terbaik adalah dengan menggunakan CDN populer seperti ajax.googleapis.com karena tidak ada cookie. Pengguna mungkin sudah melakukan pencarian DNS dan bahkan mungkin telah men-cache sumber daya. CDN dioptimalkan untuk kecepatan dan mungkin memiliki server yang dekat dengan pengguna Anda.

Jika CDN bukan pilihan maka jika Anda memiliki banyak cookie atau memiliki banyak sumber daya untuk mengunduh (gambar dll.) Maka gunakan domain bebas cookie (hanya perlu melakukan pencarian DNS sekali saja).

Jika Anda memiliki sedikit sumber daya (hanya satu file javascript khusus) dan beberapa cookie (hanya id sesi kecil) yang dihosting dari domain yang sama.

Sumber daya yang baik:

http://www.phpied.com/free-falling-waterfalls/

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

http://developer.yahoo.com/performance/rules.html

— Adam
sumber

1

Meskipun jawaban di atas telah membedah sebagian besar pertanyaan Anda, saya akan berkontribusi pada "diperlukan untuk memulai halaman" Saya menerjemahkan ini ke: apakah skrip ini penting untuk menggunakan situs web? Dari pengalaman, biasanya jawabannya tidak. Namun, kasus ketika saya akan:

Validasi formulir
Navigasi berbasis JavaScript (toh tidak ideal)
Jika tata letak tergantung pada JavaScript
Jika JavaScript, atau perpustakaan (seperti jQuery) digunakan untuk modifikasi DOM yang sangat penting

Dan pedoman kinerja Yahoo YSlow untuk referensi.

— Taylor Edmiston
sumber