Dari mana Anda memasukkan perpustakaan jQuery? Google JSAPI? CDN?

Ada beberapa cara untuk memasukkan jQuery dan jQuery UI dan saya ingin tahu apa yang digunakan orang?

• Google JSAPI
• situs jQuery
• situs / server Anda sendiri
• CDN lain

Saya baru-baru ini menggunakan Google JSAPI, tetapi ternyata butuh waktu lama untuk menyiapkan koneksi SSL atau bahkan hanya untuk menyelesaikan google.com. Saya telah menggunakan yang berikut untuk Google:

<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>

Saya suka gagasan menggunakan Google sehingga di-cache ketika mengunjungi situs lain dan untuk menghemat bandwidth dari server kami, tetapi jika terus menjadi bagian lambat dari situs, saya dapat mengubah termasuk.

Apa yang kamu gunakan? Apakah Anda punya masalah?

Sunting: Baru saja mengunjungi situs jQuery dan mereka menggunakan metode berikut:

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

Edit2: Begini cara saya memasukkan jQuery tanpa masalah selama setahun terakhir:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Perbedaannya adalah penghapusan http:. Dengan menghapus ini, Anda tidak perlu khawatir tentang beralih antara http dan https.

Tanpa ragu saya memilih agar JQuery dilayani oleh server Google API. Saya tidak menggunakan metode jsapi karena saya tidak memanfaatkan API Google lainnya, namun jika itu berubah maka saya akan mempertimbangkannya ...

Pertama: Server Google api didistribusikan di seluruh dunia alih-alih lokasi server tunggal saya: Server yang lebih dekat biasanya berarti waktu respons yang lebih cepat bagi pengunjung.

Kedua: Banyak orang memilih untuk meng-host JQuery di Google, jadi ketika pengunjung datang ke situs saya, mereka mungkin sudah memiliki skrip JQuery di cache lokal mereka. Konten pra-tembolok biasanya berarti waktu muat yang lebih cepat bagi pengunjung.

Ketiga: Perusahaan web hosting saya menagih saya untuk bandwidth yang digunakan. Tidak masuk akal menghabiskan 18k per sesi pengguna jika pengunjung bisa mendapatkan file yang sama di tempat lain.

Saya mengerti bahwa saya menaruh sebagian kepercayaan pada Google untuk menyajikan file skrip yang benar, dan untuk online dan tersedia. Sampai saat ini saya belum kecewa dengan menggunakan Google dan akan melanjutkan konfigurasi ini sampai masuk akal untuk tidak melakukannya.

Satu hal yang patut ditunjukkan ... Jika Anda memiliki campuran halaman aman dan tidak aman di situs Anda, Anda mungkin ingin mengubah sumber Google secara dinamis untuk menghindari peringatan yang biasa Anda lihat saat memuat konten tidak aman di halaman aman:

Inilah yang saya pikirkan:

<script type="text/javascript">
    document.write([
        "\<script src='",
        ("https:" == document.location.protocol) ? "https://" : "http://",
        "ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>" 
    ].join(''));
</script>

UPDATE 9/8/2010 - Beberapa saran telah dibuat untuk mengurangi kompleksitas kode dengan menghapus HTTP dan HTTPS dan cukup menggunakan sintaks berikut:

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

Selain itu Anda juga dapat mengubah url untuk mencerminkan nomor utama jQuery jika Anda ingin memastikan bahwa versi utama terbaru dari perpustakaan jQuery dimuat:

<script type="text/javascript">
    document.write("\<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'>\<\/script>");
</script>

Terakhir, jika Anda tidak ingin menggunakan Google dan lebih suka jQuery, Anda dapat menggunakan jalur sumber berikut (perlu diingat bahwa jQuery tidak mendukung koneksi SSL):

<script type="text/javascript">
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>

Salah satu alasan Anda mungkin ingin meng-host di server eksternal adalah untuk bekerja di sekitar batasan browser koneksi konuren ke server tertentu.

Namun, mengingat bahwa file jQuery yang Anda gunakan kemungkinan tidak akan berubah terlalu sering, cache browser akan masuk dan membuat titik itu bisa diperdebatkan untuk sebagian besar.

Alasan kedua untuk menyimpannya di server eksternal adalah untuk menurunkan lalu lintas ke server Anda sendiri.

Namun, mengingat ukuran jQuery, kemungkinan itu akan menjadi bagian kecil dari lalu lintas Anda. Anda mungkin harus mencoba mengoptimalkan konten Anda yang sebenarnya.

jQuery 1.3.1 mnt hanya berukuran 18k. Saya pikir itu tidak terlalu menarik untuk ditanyakan pada pemuatan halaman awal. Itu akan di-cache setelah itu. Sebagai hasilnya, saya meng-host-nya sendiri.

Jika Anda ingin menggunakan Google, tautan langsung mungkin lebih responsif. Setiap perpustakaan memiliki jalur yang terdaftar untuk file langsung. Ini adalah jalur jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Baca ulang pertanyaan Anda, apakah ada alasan Anda menggunakan https? Ini adalah tag skrip daftar Google dalam contoh mereka

<script src="http://www.google.com/jsapi"></script>

Saya tidak ingin situs publik yang saya kembangkan bergantung pada situs eksternal mana pun, dan karenanya, saya akan meng-host jQuery sendiri.

Apakah Anda bersedia memiliki pemadaman di situs Anda ketika yang lain (Google, jquery.com, dll) turun? Lebih sedikit ketergantungan adalah kuncinya.

Pro: Host di Google memiliki manfaat

• Mungkin lebih cepat (server mereka lebih dioptimalkan)
• Mereka menangani caching dengan benar - 1 tahun (kami berjuang untuk diizinkan membuat perubahan untuk mendapatkan tajuk yang tepat di server kami)
• Pengguna yang telah memiliki tautan ke versi yang dihosting Google di domain lain sudah memiliki file dalam cache mereka

Cons:

• Beberapa browser mungkin melihatnya sebagai domain silang XSS dan melarang file.
• Terutama pengguna yang menjalankan plugin NoScript untuk Firefox

Saya ingin tahu apakah Anda dapat TERMASUK dari Google, dan kemudian memeriksa keberadaan beberapa variabel Global, atau semacamnya, dan apakah tidak adanya memuat dari server Anda?

Ada beberapa masalah di sini. Pertama, metode muat async yang Anda tentukan:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('jquery', '1.3.1');
  google.setOnLoadCallback(function() {
    // do stuff
  });
</script>

memiliki beberapa masalah. Tag skrip menghentikan sementara pemuatan halaman saat diambil (jika perlu). Sekarang jika mereka lambat memuat ini buruk tetapi jQuery kecil. Masalah sebenarnya dengan metode di atas adalah bahwa karena beban jquery.js terjadi secara independen untuk banyak halaman, mereka akan selesai memuat dan merender sebelum jquery dimuat sehingga setiap gaya jquery yang Anda lakukan akan menjadi perubahan yang terlihat bagi pengguna .

Cara lainnya adalah:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Coba beberapa contoh sederhana seperti, miliki tabel sederhana dan ubah latar belakang sel menjadi kuning dengan metode setOnLoadCallback () vs $ (dokumen) .ready () dengan beban jquery.min.js statis. Metode kedua tidak akan memiliki flicker yang terlihat. Surat wasiat pertama. Secara pribadi saya pikir itu bukan pengalaman pengguna yang baik.

Sebagai contoh jalankan ini:

<html>
<head>
  <title>Layout</title>
  <style type="text/css">
    .odd { background-color: yellow; }
  </style>
</head>
<body>
<table>
  <tr><th>One</th><th>Two</th></tr>
  <tr><td>Three</td><td>Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
  <tr><td>Seven</td><td>Nine</td></tr>
  <tr><td>Nine</td><td>Ten</td></tr>
</table> 
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
    $(function() {
      $("tr:odd").addClass("odd");
    });
  });
</script>
</body>
</html>

Anda (harus) melihat tabel muncul dan kemudian baris menjadi kuning.

Masalah kedua dengan metode google.load () adalah hanya menampung sejumlah file terbatas. Ini adalah masalah untuk jquery karena sangat bergantung pada plug-in. Jika Anda mencoba dan menyertakan plugin jquery dengan <script src="...">tag dan google.load()plug-in mungkin akan gagal dengan pesan "jQuery belum ditentukan" karena belum dimuat. Saya tidak benar-benar melihat cara mengatasi ini.

Masalah ketiga (dengan kedua metode) adalah bahwa mereka adalah satu beban eksternal. Dengan anggapan Anda memiliki beberapa plugin dan kode Javascript Anda sendiri, Anda memiliki minimal dua permintaan eksternal untuk memuat Javascript Anda. Anda mungkin lebih baik mendapatkan jquery, semua plug-in yang relevan dan kode Anda sendiri dan memasukkannya ke dalam satu file yang diperkecil.

Dari Haruskah Anda Menggunakan API Perpustakaan Ajax Google untuk Hosting? :

Saat memuat kali, Anda sebenarnya memuat dua skrip - skrip jsapi dan skrip mootools (versi terkompresi dari atas). Jadi itu dua koneksi, bukan satu. Dalam pengalaman saya, saya menemukan bahwa waktu buka sebenarnya 2-3 kali lebih lambat daripada memuat dari server bersama pribadi saya, meskipun itu berasal dari Google, dan versi file terkompresi saya beberapa K lebih besar dari Google. Ini, bahkan setelah file dimuat dan (mungkin) di-cache. Jadi bagi saya, karena bandwidth tidak terlalu menjadi masalah, tidak akan menjadi masalah.

Terakhir Anda memiliki masalah potensial dari browser paranoid yang menandai permintaan sebagai semacam upaya XSS. Ini biasanya bukan masalah dengan pengaturan default tetapi pada jaringan perusahaan di mana pengguna mungkin tidak memiliki kontrol atas browser yang mereka gunakan apalagi pengaturan keamanan Anda mungkin memiliki masalah.

Jadi pada akhirnya saya tidak bisa benar-benar melihat saya menggunakan Google AJAX API untuk jQuery setidaknya (API lebih "lengkap" adalah cerita yang berbeda dalam beberapa hal) banyak kecuali mengirim contoh di sini.

Selain orang yang menyarankan untuk menghostingnya di server sendiri, saya telah mengusulkan untuk menyimpannya di domain terpisah (misalnya static.website.com) untuk memungkinkan browser memuatnya secara terpisah dari utas konten lainnya. Tip ini juga berfungsi untuk semua hal statis, misalnya gambar dan css.

Saya harus memilih -1 untuk perpustakaan yang dihosting di Google. Mereka mengumpulkan data, gaya analitik google, dengan bungkusnya di sekitar perpustakaan ini. Minimal, saya tidak ingin browser klien melakukan lebih dari yang saya minta, apalagi yang ada di halaman. Lebih buruk lagi, ini adalah "versi baru" Google yang tidak jahat - menggunakan javascript tidak mencolok untuk mengumpulkan lebih banyak data penggunaan.

Catatan: jika mereka telah mengubah praktik ini, super. Tetapi terakhir kali saya mempertimbangkan untuk menggunakan pustaka yang dihosting, saya memantau lalu lintas http keluar di situs saya, dan panggilan berkala ke server google bukanlah sesuatu yang saya harapkan.

Saya mungkin jadul tentang hal ini, tetapi saya masih tidak menyukai hotlinking. Mungkin Google adalah pengecualian, tetapi secara umum, itu benar-benar cara yang baik untuk meng-host file di server Anda sendiri.

Saya akan menambahkan ini sebagai alasan untuk meng-host file-file ini secara lokal.

Baru-baru ini sebuah simpul di California Selatan pada TWC belum dapat menyelesaikan domain ajax.googleapis.com (untuk pengguna dengan IPv4) hanya sehingga kami tidak mendapatkan file eksternal. Ini telah terputus-putus sampai kemarin (sekarang tetap.) Karena terputus-putus, saya mengalami banyak masalah untuk memecahkan masalah pengguna SaaS. Menghabiskan berjam-jam mencoba untuk melacak mengapa beberapa pengguna tidak memiliki masalah dengan perangkat lunak, dan yang lainnya mengalami kesulitan. Dalam proses debug saya yang biasa, saya tidak terbiasa bertanya kepada pengguna apakah IPv6nya dimatikan.

Saya tersandung pada masalah karena saya sendiri menggunakan "rute" khusus ini ke file dan saya hanya menggunakan IPV4. Saya menemukan masalah dengan alat pengembang yang memberi tahu saya bahwa jquery tidak dimuat, kemudian mulai melakukan traceroutes dll ... untuk menemukan masalah sebenarnya.

Setelah ini, saya kemungkinan besar tidak akan pernah kembali ke file yang di-host secara eksternal karena: google tidak harus turun untuk ini menjadi masalah, dan ... salah satu dari node ini dapat dikompromikan dengan pembajakan DNS dan mengirimkan js berbahaya bukannya file yang sebenarnya. Selalu berpikir saya aman karena domain google tidak akan pernah turun, sekarang saya tahu ada simpul di antara pengguna dan tuan rumah bisa menjadi titik gagal.

Saya hanya menyertakan versi terbaru dari situs jQuery: http://code.jquery.com/jquery-latest.pack.js Ini sesuai dengan kebutuhan saya dan saya tidak perlu khawatir tentang pembaruan.

EDIT: Untuk aplikasi web utama, tentu mengendalikannya; unduh dan sajikan sendiri. Tetapi untuk situs pribadi saya, saya tidak peduli. Hal-hal tidak secara ajaib menghilang, mereka biasanya ditinggalkan terlebih dahulu. Saya mengikuti cukup banyak untuk tahu apa yang harus diubah untuk rilis mendatang.

Berikut beberapa sumber yang bermanfaat, semoga dapat membantu Anda memilih CDN Anda. MS baru-baru ini menambahkan domain baru untuk pengiriman Perpustakaan melalui CDN mereka.

Format Lama: http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.1.js Format Baru: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

Ini seharusnya tidak mengirim semua cookie untuk microsoft.com. http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_11

Berikut ini beberapa statistik tentang teknologi paling populer yang digunakan di web untuk semua teknologi. http://trends.builtwith.com/

Semoga bisa membantu Anda memilih.

Jika saya bertanggung jawab untuk situs 'langsung' saya lebih baik mengetahui segala sesuatu yang terjadi dan masuk ke situs saya. Untuk alasan itu saya meng-host sendiri versi jquery-min baik di server yang sama atau server statis / eksternal tetapi bagaimanapun juga lokasi di mana hanya saya (atau program / proxy saya) yang dapat memperbarui perpustakaan setelah memverifikasi / menguji setiap perubahan

Di kepala:

  (function() {
    var jsapi = document.createElement('script'); jsapi.type = 'text/javascript'; jsapi.async = true;
    jsapi.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.google.com/jsapi?key=YOUR KEY';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('head')[0]).appendChild(jsapi);
  })();

Ujung tubuh:

<script type="text/javascript">
google.load("jquery", "version");
</script>

Saya meng-host-nya dengan file js saya yang lain di server saya sendiri, dan, pada saat itu, gabungkan dan perkecil mereka (dengan django-compressor, di sini, tapi bukan itu intinya) untuk dilayani sebagai hanya satu file js, dengan semua situsnya kebutuhan dimasukkan ke dalamnya. Anda harus melayani file js Anda sendiri, jadi saya tidak melihat alasan untuk tidak menambahkan byte jquery tambahan di sana juga - beberapa kb lebih jauh lebih murah untuk ditransfer, daripada lebih banyak permintaan yang harus dibuat. Anda tidak bergantung pada siapa pun, dan segera setelah js minified Anda di-cache, Anda juga super cepat.

Pada pemuatan pertama, solusi berbasis CDN mungkin menang, karena Anda harus memuat kilobyte jquery tambahan dari server Anda sendiri (tetapi, tanpa permintaan tambahan). Saya ragu perbedaannya terlihat. Dan kemudian, pada beban pertama dengan cache yang dihapus, solusi Anda sendiri yang dihosting mungkin akan selalu lebih cepat, karena lebih banyak permintaan (dan pencarian DNS) yang diperlukan, untuk mengambil jquery CDN.

Saya bertanya-tanya bagaimana hal ini hampir tidak pernah disebutkan, dan bagaimana CDN tampaknya menguasai dunia :)