Referensi javascript eksternal vs hosting salinan saya sendiri

Katakanlah saya memiliki aplikasi web yang menggunakan jQuery. Apakah praktik yang lebih baik untuk meng-host file javascript yang diperlukan di server saya sendiri bersama dengan file situs web saya, atau merujuknya pada CDN jQuery (contoh: http://code.jquery.com/jquery-1.7.1.min.js ) ?

Saya dapat melihat pro untuk kedua sisi:

• Jika ada di server saya, itu satu ketergantungan eksternal kurang; jika jQuery turun atau mengubah struktur hosting mereka atau sesuatu seperti itu, maka aplikasi saya rusak. Tetapi saya merasa itu tidak akan sering terjadi; pasti ada banyak situs kecil-kecilan melakukan ini, dan tim jQuery ingin menghindari memecahnya.
• Jika ada di server saya, itu satu referensi eksternal kurang bahwa seseorang dapat memanggil masalah keamanan
• Jika dirujuk secara eksternal, maka saya tidak perlu khawatir tentang bandwidth untuk melayani file (meskipun saya tahu itu tidak banyak).
• Jika direferensikan secara eksternal dan saya menyebarkan situs web ini ke banyak server yang perlu memiliki salinan sendiri dari semua file, maka itu adalah satu file yang kurang saya harus ingat untuk menyalin / memperbarui.

Anda harus melakukan keduanya:

Mulailah dengan hosting dari CDN seperti Google karena kemungkinan akan memiliki up-time yang lebih tinggi daripada situs Anda sendiri dan akan dikonfigurasikan untuk waktu respons tercepat. Selain itu, siapa pun yang telah mengunjungi halaman yang menautkan ke CDN akan menggunakan salinan file yang di-cache, sehingga mereka bahkan tidak perlu mengunduh ulang salinan, membuat pemuatan awal lebih cepat.

Kemudian tambahkan referensi fallback ke server Anda sendiri jika CDN kebetulan turun (tidak mungkin, tetapi aman aman). Fallback relatif mudah dimengerti, tetapi perlu disesuaikan agar sesuai dengan skrip yang digunakan:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
    if (!window.jQuery) document.write('<script src="/path/to/jquery-ver.sion.min.js"><\/script>');
</script>

Pastikan Anda tidak menulis di </script>mana pun di dalam <script>elemen, karena elemen itu akan menutup elemen HTML dan menyebabkan skrip gagal. Memperbaiki sederhana adalah dengan menggunakan garis miring terbalik sebagai pelarian: <\/script>.

_{Satu lagi alasan untuk melakukan keduanya:}

Jika Anda memilih populer CDN itu sangat tidak mungkin bahwa itu akan pernah memiliki down-time, namun jauh di jauh di masa depan (~ 18 bulan dari sekarang diberikan hukum Moore ) ketika hosting perubahan format, atau alamat disesuaikan, atau jaringan ditempatkan di belakang paywall, atau apa pun, ada kemungkinan bahwa tautan Anda tidak lagi berfungsi apa adanya. Jika Anda menggunakan fallback, maka itu akan memberi Anda sedikit waktu untuk menyesuaikan dengan format baru apa pun untuk hosting sebelum harus kembali melalui setiap situs web yang pernah Anda buat dan mengubah tautan CDN.

_{alasan lain untuk melakukan keduanya:}

Baru-baru ini saya dipukul dengan serangkaian pemadaman internet. Saya dapat terus bekerja secara lokal pada proyek-proyek di mana saya menautkan salinan sumber daya skrip lokal, dan saya segera menemukan bahwa ada sejumlah proyek yang perlu memiliki salinan lokal yang ditautkan.

Saya memiliki pertanyaan yang sama, kemudian saya membaca artikel ini dan saya dijual dengan ide membiarkan Google meng-host perpustakaan jQuery saya.

Artikel ini menyatakan manfaat utama dari membiarkan perpustakaan Anda dihosting oleh Jaringan Pengiriman Konten Google (CDN):

• Decreased Latency - Pengguna yang tidak secara fisik berada di dekat server Anda akan dapat mengunduh jQuery lebih cepat dari Google daripada jika Anda memaksa mereka untuk mengunduhnya dari server Anda yang berada di tempat sewenang-wenang.
• Peningkatan Paralelisme - Browser membatasi jumlah koneksi yang dapat dilakukan secara bersamaan. Bergantung pada browser mana, batas ini mungkin serendah dua koneksi per nama host. Menggunakan Google AJAX Libraries CDN menghilangkan satu permintaan ke situs Anda, memungkinkan lebih banyak konten lokal Anda diunduh secara paralel.
• Caching Lebih Baik - Menggunakan Perpustakaan Google AJAX, pengguna Anda mungkin tidak perlu mengunduh jQuery sama sekali. Di sisi lain, jika Anda meng-hosting jQuery secara lokal maka pengguna Anda harus mengunduhnya setidaknya sekali. Setiap pengguna Anda mungkin sudah memiliki puluhan salinan jQuery yang identik dalam cache browser mereka, tetapi salinan jQuery tersebut diabaikan ketika mereka mengunjungi situs Anda.

Adapun dua poin yang Anda daftarkan sebagai pro untuk hosting perpustakaan Anda sendiri, ingatlah bahwa itu adalah Google hosting versi cloud, dan Google tahu apa yang mereka lakukan dan dapat dipercaya sejauh ketersediaan dan keamanan berjalan. Namun, @zzzzBov membuat poin yang sangat bagus dalam jawabannya untuk pertanyaan ini, di mana ia merekomendasikan juga menyimpan salinan lokal perpustakaan dan melakukan default pada hal yang tidak mungkin bahwa versi CDN tidak dapat diakses karena alasan apa pun.

Secara pribadi, saya mengambil petunjuk dari http://html5boilerplate.com/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="includes/js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>

Ini menarik file jQuery utama dari Google, tetapi jika tidak memuat karena suatu alasan, baris berikutnya memuatnya dari server Anda sendiri.

Ini adalah praktik yang lebih baik untuk menggunakan CDN, dan jika CDN itu adalah Google, semua akan lebih baik - seperti yang dicatat oleh @CFL_Jeff dan @Morons.

Saya menambahkan jawaban ini untuk menunjukkan sesuatu yang sering diabaikan ketika menunjuk ke tempat lain, yang menghindari peringatan konten campuran . Pertimbangkan untuk menggunakan URL tanpa protokol, misalnya:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript">
</script>

Masih ada beberapa masalah dukungan dalam menggunakan URL tanpa protokol, jadi lihat juga jawaban pada Bisakah saya mengubah semua http: // tautan menjadi hanya //? pada SO, tetapi setidaknya cobalah untuk menangani potensi peringatan konten campuran dalam beberapa cara.

Anda harus merujuknya ke Perpustakaan API Google ..

Alasan utama untuk ini adalah untuk mempercepat pemuatan halaman Anda . Jika pengguna Anda telah mengunjungi situs lain yang mereferensikan perpustakaan yang sama, ia akan disimpan dalam cache browser dan tidak perlu diunduh sama sekali .

Saya bisa saja salah, tetapi menerapkan document.write menimpa apa pun yang dimiliki DOM. Karena praktik yang baik untuk meletakkan file JavaScript di ujung tubuh,

Saya mengusulkan metode berikut berdasarkan jawaban sebelumnya:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

if(!window.jQuery)
{
    //Creates the script element
    var script = document.createElement('script'); 
    //Adds the type attribute with "text/javascript" value
        script.setAttribute('type', 'text/javascript'); 
    //Adds the source attribute and populates it
        script.setAttribute('src', 'Put_The_Relative_Path_To_Your_JavaScript_File_Here'); 
    //Adds it to the end of the body, as it is good practice, to prevent render-blocking.  
    document.body.appendChild(script);

}

//Note that there's no need for you to verify with an onload function, since all scripts
//must be loaded before going to the next one! 

</script>

Saya ingin menambahkan bahwa hosting salinan lokal adalah praktik terbaik karena tidak ada satu pun di atas negara yang terkait dengan postur aman di mana Geo Location dan Daftar Putih ketat sangat penting. Tidak meng-hosting file itu secara lokal dianggap mendorong postur keamanan yang berkurang ke klien Anda.