Qual è la migliore pratica di utilizzare Twitter Bootstrap, fare riferimento ad esso da CDN o fare una copia locale sul mio server?
Poiché Bootstrap continua a evolversi, temo che se mi riferissi alla CDN, l'utente vedrebbe diverse pagine Web nel tempo e alcuni tag potrebbero persino non funzionare. Qual è la scelta della maggior parte delle persone?
Risposte:
Perché non entrambi ¯ \ _ (ツ) _ / ¯? Scott Hanselman ha pubblicato un ottimo articolo sull'uso di una CDN per ottenere prestazioni migliori, ma ricadendo con grazia su una copia locale nel caso in cui la CDN sia inattiva .
Specifico per bootstrap, è possibile effettuare le seguenti operazioni per caricare da un CDN con un fallback locale :
<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>.visibleclasse anziché testarergb(51, 51, 51) .hiddene .d-nonesia per 3.x bootstarp o 4 Document.createElement(), applicare le classi bootstrap, usare Window.getComputedStyle()per testare display:nonee quindi inserire condizionalmente un foglio di stile usando js.Alla tua domanda sulle migliori pratiche, ci sono molte ottime ragioni per usare una CDN in un ambiente di produzione :
- Aumenta il parallelismo disponibile.
- Aumenta la possibilità che si verifichi un hit nella cache .
- Assicura che il carico utile sia il più piccolo possibile .
- Riduce la quantità di larghezza di banda utilizzata dal server.
- Assicura che l'utente abbia una risposta geograficamente vicina .
Per quanto riguarda il controllo delle versioni, qualsiasi CDN che valga il suo peso in termini di sale ti consente di scegliere come target una versione specifica della libreria in modo da non introdurre accidentalmente modifiche che si interrompono ad ogni versione.
document.writeSecondo il mdn in poi document.write
Nota : mentre
document.writescrive nel flusso di documenti , la chiamatadocument.writea un documento chiuso (caricato) chiama automaticamentedocument.open, il che cancella il documento .
Tuttavia, l'uso qui è intenzionale. Il codice deve essere eseguito prima che il DOM sia completamente caricato e anche nell'ordine corretto. Se jQuery fallisce, dobbiamo iniettarlo nel documento in linea prima di provare a caricare bootstrap, che si basa su jQuery.
Output HTML dopo il caricamento :
In entrambi i casi, però, chiamiamo mentre il documento è ancora aperto, quindi dovrebbe incorporare il contenuto, anziché sostituire l'intero documento. Se stai aspettando fino alla fine, dovrai sostituirlo con document.body.appendChildper inserire fonti dinamiche.
A parte : in MVC 6, puoi farlo con gli helper dei link e dei tag di script
<body>elemento. Questa risposta aggiunge un po 'di markup con un .hiddendiv e poi fa un test per vedere se è visibile: $('#bootstrapCssTest').is(':visible'). È probabile che questa classe abbia molte meno probabilità di subire cambiamenti nel tempo.
Dipende dal sito specifico.
Hai molti utenti? Ti interessa l'utilizzo della larghezza di banda? Le prestazioni sono un problema (le CDN possono accelerare le risposte)?
Puoi collegarti a una versione specifica:
//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
O
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
In questo modo non devi preoccuparti degli aggiornamenti della libreria, è una pratica migliore per rimanere aggiornato.
Non sono sicuro di quali siano le statistiche esatte sulla scelta degli sviluppatori, ma puoi dare un'occhiata qui e vedere miliardi di richieste inviate a Bootstrap CDN, il che significa che è robusto e sicuro da usare.
Ho provato a modificare la risposta di KyleMit ma il forum stava marcando come un codice rientrato errato, anche se non lo era, quindi sto aggiungendo il mio contributo qui sotto:
Poiché la domanda è contrassegnata come a twitter-bootstrap argomento (e non solo twitter-bootstrap-3 ), forse è utile aggiornare la risposta per la versione più recente di Bootstrap.
Dato che il framework ha aggiunto una nuova classe per nascondere elementi nella sua quarta versione, dovremmo usare .d-noneinvece che .hiddenin questo caso.
Tutto il resto rimane lo stesso in quel caso, tranne la versione lib (ovviamente!)
Grazie a @KyleMit. Un altro modo di ripiegare è usare l'oggetto 'finestra' come sotto -
<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>Funziona così: se il collegamento CDN funziona, l'oggetto 'window' avrà la proprietà 'jQuery' disponibile altrimenti la seconda parte dello script, cioè document.write, verrà eseguita che punta alla copia locale.
Risposta alla domanda originale - Avere CDN ha molti vantaggi come download rapidi senza influire sul server e sulla larghezza di banda. Avere una copia locale ha i suoi vantaggi (come accordi di fallback). Sull'Intranet, a causa delle impostazioni del proxy, delle politiche di sicurezza, il collegamento CDN potrebbe non funzionare o se il collegamento CDN non funziona potrebbe non funzionare. La risposta diretta è avere entrambi.
Quasi tutti i CDN pubblici sono abbastanza affidabili. Tuttavia, se sei preoccupato per quella frazione del tempo in cui un CDN potrebbe essere inattivo, puoi caricare Bootstrap da un CDN Bootstrap e fallback in un CDN alternativo nel caso in cui il primo sia inattivo.
<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>Informazioni sulla seconda preoccupazione: i collegamenti in questo post sono versioni hard coded di bootstrap e jquery. Quindi, anche se le librerie bootstrap e jquery sono costantemente sviluppate e ottengono nuove funzionalità, il tuo sito rimarrà lo stesso nel tempo.
rgb(51, 51, 51)sembra rischioso: cosa succede se qualcuno cambia colore e si dimentica di aggiornarlo? C'è una proprietà più stabile che si potrebbe usare?