Memilih Lokasi CDN jQuery Terbaik
Dari permasalahan di atas, tentunya sobat harus pandai memilih lokasi penyimpanan jQuery. Ada beberapa CDN jQuery yang bisa sobat gunakan saat ini (ketika artikel ini dibuat, jQuery terbaru adalah versi 2.0.2), diantaranya :
1. Google (Sangat baik / stabil)
https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js
2. Microsoft (Baik)
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js
3. CDNJS (Sedang)
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js
4. jQuery (Kurang)
http://code.jquery.com/jquery.latest.js
http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.js
5. Yandex (Sangat Kurang)
http://yandex.st/jquery/2.0.2/jquery.js
http://yandex.st/jquery/2.0.2/jquery.min.js
Dari ke lima lokasi CDN tersebut, lokasi yang sering digunakan oleh sahabat adalah Google dan jQuery. Saya pribadi merekomendasikan untuk menggunakan Lokasi CDN Google, karena lebih stabil.
Ada sahabat yang menyatakan lebih baik menggunakan http://code.jquery.com/jquery.latest.js
karena tidak usah update script dan otomatis update. Saya setuju dengan pendapat tersebut, namun saat ini jquery sering down, akhirnya blog tidak bisa dibuka. Bagi sahabat yang lebih suka menggunakan http://code.jquery.com/jquery.latest.js
, saya sarankan membuat jQuery CDN Failover.
jQuery CDN Failover
CDN Failover adalah metode pengalihan lokasi framework jQuery dari satu host menuju ke host alternatif (cadangan). Metode failover sangat bermanfaat ketika host utama mengalami kendala akses baik itu karena limit bandwidth atau karena memang benar-benar mengalami masalah. Jika kita tidak menggunakan metode pengalihan (failover) ketika host utama mengalami kendala maka hal tersebut akan mempengaruhi kondisi situs yang kita kelola, apalagi jika situs tersebut menggunakan jQuery Ajax, jelas situs akan down total atau tidak bisa diakses. Hal ini sangat merugikan dan akan mempengaruhi kenyamanan pengunjung situs, ujung-ujungnya para pengunjung enggan kembali lagi untuk menulusuri situs. Mencegah hal tersebut maka kita perlu menyediakan cadangan framework agar masalah down host utama bisa teratasi. CDN Failover adalah cara terbaik untuk mengatasi masalah diatas.
CDN Failover Metode 1
Script dibawah ini merupakan yang metode failover yang paling sederhana. Script akan melakukan pemeriksaan ketersediaan framework, jika ternyata framework tidak berhasil di-load, maka lokasi framework dialihkan.
<script type="text/javascript" src="http://code.jquery.com/jquery.latest.js"></script>
<script type="text/javascript">
if (jQuery) {
// jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
} else {
// jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
document.write('script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>');
}
</script>
CDN Failover Metode 2
Metode ke-2 ini hampir mirip dengan metode ke-1, perbedaannya hanya pada statement pemeriksaan keadaan. Script hanya akan melakukan pengalihan jika keadaan halaman tidak mampu me-load framework, jika berhasil maka script tidak akan menjalankan perintah pengalihan lokasi framework.
<script type="text/javascript" src="http://code.jquery.com/jquery.latest.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
// jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
document.write('script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>');
} else {
// jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
}
</script>
CDN Failover Metode 3
Metode ke-3 ini merupakan metode yang banyak digunakan oleh situs-situs jejaring sosial media dalam memanggil framework-nya. Metode ini sebenarnya merupakan pengembangan dari CDN Failover metode ke-2.
<script type="text/javascript" src="http://code.jquery.com/jquery.latest.js"></script>
<script type="text/javascript">
if (typeof jQuery === 'undefined') {
var e = document.createElement('script');
e.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js';
e.type='text/javascript';
document.getElementsByTagName("head")[0].appendChild(e);
}
</script>