Apa praktik terbaik menggunakan Twitter Bootstrap, lihat dari CDN atau buat salinan lokal di server saya?
Karena Bootstrap terus berkembang, saya khawatir jika saya merujuk ke CDN, pengguna akan melihat halaman web yang berbeda dari waktu ke waktu, dan beberapa tag bahkan mungkin rusak. Apa pilihan kebanyakan orang?
Jawaban:
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>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap CSS local fallback -->
<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>
<!-- APP CONTENT -->
<!-- jQuery CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- jQuery local fallback -->
<script>window.jQuery || document.write('<script src="lib/jquery.min.js"><\/script>')</script>
<!-- Bootstrap JS CDN -->
<script src="~https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="lib/bootstrap.min.js"><\/script>')}</script>
</body>
.visiblekelas alih-alih mengujirgb(51, 51, 51) .hiddendan .d-noneuntuk Boostrap 3.x atau 4 Document.createElement(), menerapkan kelas bootstrap, menggunakan Window.getComputedStyle()untuk menguji display:none, lalu memasukkan lembar gaya secara bersyarat menggunakan js.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.
document.writeMenurut mdn on document.write
Catatan : saat
document.writemenulis ke aliran dokumen , memanggil dokumendocument.writetertutup (dimuat) secara otomatis memanggildocument.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
<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:
//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
Atau
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
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.
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!)
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.
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.
rgb(51, 51, 51)tampaknya berisiko - bagaimana jika seseorang mengubah warna dan lupa mengupdatenya? Apakah ada properti yang lebih stabil yang dapat digunakan?