Mengapa Tidak Keduanya ¯ \ _ (ツ) _ / ¯? Scott Hanselman memiliki artikel bagus tentang menggunakan CDN untuk peningkatan kinerja tetapi dengan anggun kembali ke salinan lokal jika CDN tidak aktif .
Khusus untuk bootstrap, Anda dapat melakukan hal berikut untuk memuat dari CDN dengan fallback lokal :
<head>
<link rel="stylesheet" href="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script>
var test = document.createElement("div")
test.className = "hidden d-none"
document.head.appendChild(test)
var cssLoaded = window.getComputedStyle(test).display === "none"
document.head.removeChild(test)
if (!cssLoaded) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "lib/bootstrap.min.css";
document.head.appendChild(link);
}
</script>
</head>
<body>
<script src="~https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="lib/jquery.min.js"><\/script>')</script>
<script src="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="lib/bootstrap.min.js"><\/script>')}</script>
</body>
Pembaruan
- Anda juga dapat melakukan pengujian yang sama menggunakan YepNope atau fallback.js
- per komentar Flash dan solusi ini , jawaban yang diperbarui untuk memeriksa
.visiblekelas alih-alih mengujirgb(51, 51, 51)
- per komentar deste , diperbarui untuk digunakan
.hiddendan .d-noneuntuk Boostrap 3.x atau 4
- saat menguji apakah sebuah lembar gaya dimuat , Anda harus mencari gaya yang akan diterapkan, membuat elemen, dan melihat apakah itu telah diterapkan.
- Memperbarui lembar gaya agar segera dimuat di kepala dengan menggunakan vanilla js. Anda perlu membuat elemen pengujian menggunakan
Document.createElement(), menerapkan kelas bootstrap, menggunakan Window.getComputedStyle()untuk menguji display:none, lalu memasukkan lembar gaya secara bersyarat menggunakan js.
Praktik terbaik
Untuk pertanyaan Anda tentang Praktik Terbaik, ada banyak alasan yang sangat bagus untuk menggunakan CDN dalam lingkungan produksi :
- Ini meningkatkan paralelisme yang tersedia.
- Ini meningkatkan kemungkinan terjadinya cache-hit .
- Ini memastikan bahwa muatan akan sekecil mungkin .
- Ini mengurangi jumlah bandwidth yang digunakan oleh server Anda.
- Ini memastikan bahwa pengguna akan mendapatkan respons yang dekat secara geografis .
Untuk masalah pembuatan versi Anda, CDN apa pun yang sepadan dengan bobotnya memungkinkan Anda menargetkan versi pustaka tertentu sehingga Anda tidak secara tidak sengaja memasukkan perubahan yang merusak pada setiap rilis.
Menggunakan document.write
Menurut mdn on document.write
Catatan : saat document.writemenulis ke aliran dokumen , memanggil dokumen document.writetertutup (dimuat) secara otomatis memanggil document.open, yang akan menghapus dokumen .
Namun, penggunaannya di sini disengaja. Kode harus dijalankan sebelum DOM dimuat sepenuhnya dan juga dalam urutan yang benar. Jika jQuery gagal, kita perlu memasukkannya ke dalam dokumen secara inline sebelum kita mencoba memuat bootstrap, yang bergantung pada jQuery.
Output HTML Setelah Dimuat :
Namun, dalam kedua contoh ini, kami memanggil saat dokumen masih terbuka sehingga harus menyebariskan konten, daripada mengganti seluruh dokumen. Jika Anda menunggu sampai akhir, Anda harus mengganti dengan document.body.appendChilduntuk memasukkan sumber dinamis.
Selain : Di MVC 6, Anda dapat melakukan ini dengan pembantu tautan dan tag skrip
rgb(51, 51, 51)tampaknya berisiko - bagaimana jika seseorang mengubah warna dan lupa mengupdatenya? Apakah ada properti yang lebih stabil yang dapat digunakan?<body>elemen. Jawaban ini menambahkan beberapa markup dengan.hiddendiv dan kemudian melakukan tes untuk melihat apakah itu terlihat:$('#bootstrapCssTest').is(':visible'). Kelas itu mungkin jauh lebih kecil kemungkinannya untuk mengalami perubahan yang melanggar dari waktu ke waktu.Tergantung pada situs tertentu.
Apakah Anda memiliki banyak pengguna? Apakah Anda peduli dengan penggunaan bandwidth? Apakah kinerja menjadi masalah (CDN dapat mempercepat respons)?
Anda dapat menautkan ke versi tertentu:
Atau
Dengan begitu Anda tidak perlu khawatir tentang pembaruan perpustakaan, ini praktik yang lebih baik untuk terus diperbarui.
Saya tidak yakin apa statistik yang tepat tentang pilihan pengembang, tetapi Anda dapat melihat di sini dan melihat Miliaran permintaan dikirim ke Bootstrap CDN, yang berarti ini kuat dan aman untuk digunakan.
sumber
Saya mencoba mengedit jawaban KyleMit tetapi forum menandai sebagai kode indentasi yang salah, bahkan bukan, jadi saya menambahkan kontribusi saya tepat di bawah:
Karena pertanyaannya ditandai sebagai a twitter-bootstrap topik (dan tidak hanya twitter-bootstrap-3 ), mungkin berguna untuk memperbarui respons untuk versi Bootstrap yang lebih baru.
Karena kerangka kerja menambahkan kelas baru untuk menyembunyikan elemen pada versi keempatnya, kita harus menggunakan
.d-nonesebagai ganti.hiddendalam kasus ini.Yang lainnya tetap sama dalam kasus itu, kecuali versi lib (tentu saja!)
sumber
Terima kasih kepada @Kit. Cara lain untuk mundur adalah menggunakan objek 'jendela' seperti di bawah -
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script> <script> window.jQuery || document.write("<script src='js/jquery.min.js'><\/script>"); </script>Ini bekerja seperti ini - Jika tautan CDN berfungsi, objek 'window' akan memiliki properti 'jQuery' yang tersedia, jika tidak, bagian kedua dari skrip yaitu document.write akan dieksekusi yang menunjuk ke salinan lokal.
Jawaban untuk pertanyaan awal - Memiliki CDN memiliki banyak manfaat seperti download cepat tanpa mempengaruhi server dan bandwidth Anda. Memiliki salinan lokal memiliki keuntungan tersendiri (sebagai pengaturan mundur). Di intranet, karena pengaturan proxy, kebijakan keamanan, tautan CDN mungkin tidak berfungsi atau jika tautan CDN tidak aktif, mungkin tidak berfungsi. Jawaban langsungnya adalah memiliki keduanya.
sumber
Hampir semua CDN publik cukup andal. Namun, jika Anda khawatir tentang fraksi waktu saat CDN mungkin tidak aktif, Anda dapat memuat Bootstrap dari satu CDN Bootstrap , dan kembali ke CDN alternatif jika CDN pertama tidak berfungsi.
<html> <head> <!-- Bootstrap CSS CDN with Fallback --> <link rel="stylesheet" href="https://pagecdn.io/lib/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous"> <script> var test = document.createElement("div") test.className = "hidden d-none" document.head.appendChild(test) var cssLoaded = window.getComputedStyle(test).display === "none" document.head.removeChild(test) if (!cssLoaded) { var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"; document.head.appendChild(link); } </script> </head> <body> <!-- APP CONTENT --> <!-- jQuery CDN with Fallback --> <script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');</script> <!-- Bootstrap JS CDN with Fallback --> <script src="https://pagecdn.io/lib/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script> <script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"><\/script>')}</script> </body> </html>Tentang perhatian kedua Anda: Tautan dalam posting ini adalah versi hard code dari bootstrap dan jquery. Jadi, meskipun pustaka bootstrap dan jquery terus dikembangkan dan mendapatkan fitur baru, situs Anda akan tetap sama dari waktu ke waktu.
sumber