Warum nicht beide ¯ \ _ (ツ) _ / ¯? Scott Hanselman hat einen großartigen Artikel über die Verwendung eines CDN für Leistungssteigerungen, greift jedoch auf eine lokale Kopie zurück, falls das CDN ausfällt .
Speziell für Bootstrap können Sie Folgendes tun, um von einem CDN mit lokalem Fallback zu laden :
<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>
Aktualisierung
- Sie können denselben Test auch mit YepNope oder fallback.js durchführen
- gemäß Flashs Kommentar und dieser Lösung , aktualisierte Antwort, um nach
.visibleKlasse zu suchen , anstatt nach zu testenrgb(51, 51, 51)
- per destes Kommentar , aktualisiert für die Verwendung
.hiddenund .d-noneentweder für Boostrap 3.x oder 4
- Wenn Sie testen, ob ein Stylesheet geladen wurde , müssen Sie nach einem Stil suchen, der angewendet wurde, ein Element erstellen und prüfen , ob es angewendet wurde.
- Das Stylesheet wurde aktualisiert, um mithilfe von Vanilla Js sofort in den Kopf geladen zu werden. Sie müssen ein Testelement mit erstellen
Document.createElement(), Bootstrap-Klassen anwenden, Window.getComputedStyle()zum Testen verwenden display:noneund dann ein Stylesheet mit js bedingt einfügen .
Empfohlene Vorgehensweise
Für Ihre Frage zu Best Practices gibt es viele sehr gute Gründe, ein CDN in einer Produktionsumgebung zu verwenden :
- Es erhöht die verfügbare Parallelität .
- Es erhöht die Wahrscheinlichkeit, dass es zu einem Cache-Treffer kommt .
- Es stellt sicher, dass die Nutzlast so klein wie möglich ist .
- Dies reduziert die von Ihrem Server verwendete Bandbreite .
- Es stellt sicher, dass der Benutzer eine geografisch enge Antwort erhält .
Für Ihr Versionsproblem können Sie mit jedem CDN, das sein Gewicht in Salz wert ist, eine bestimmte Version der Bibliothek auswählen, damit Sie nicht versehentlich mit jeder Version Änderungen vornehmen.
Verwenden von document.write
Nach dem mdn auf document.write
Hinweis : als document.writeSchreibvorgänge in dem Dokument Strom , Aufruf document.writeauf einem geschlossenen (geladen) Dokument automatisch aufruft document.open, die das Dokument klar wird .
Die Verwendung hier ist jedoch beabsichtigt. Der Code muss ausgeführt werden, bevor das DOM vollständig geladen ist und auch in der richtigen Reihenfolge. Wenn jQuery fehlschlägt, müssen wir es inline in das Dokument einfügen, bevor wir versuchen, Bootstrap zu laden, das auf jQuery basiert.
HTML-Ausgabe nach dem Laden :
In beiden Fällen rufen wir jedoch auf, während das Dokument noch geöffnet ist, sodass der Inhalt eingefügt werden sollte, anstatt das gesamte Dokument zu ersetzen. Wenn Sie bis zum Ende warten, müssen Sie diese ersetzen document.body.appendChild, um dynamische Quellen einzufügen.
Nebenbei : In MVC 6 können Sie dies mit Hilfe von Link- und Skript-Tags tun
rgb(51, 51, 51)scheint riskant - was ist, wenn jemand die Farbe ändert und vergisst, sie zu aktualisieren? Gibt es eine stabilere Eigenschaft, die man nutzen könnte?<body>Element. Diese Antwort fügt ein Markup mit einem.hiddendiv hinzu und führt dann einen Test durch, um festzustellen, ob es sichtbar ist :$('#bootstrapCssTest').is(':visible'). Es ist wahrscheinlich viel weniger wahrscheinlich, dass diese Klasse im Laufe der Zeit brechende Veränderungen aufweist.Hängt von der jeweiligen Site ab.
Haben Sie viele Benutzer? Interessieren Sie sich für die Bandbreitennutzung? Ist die Leistung ein Problem (CDNs können die Antworten beschleunigen )?
Sie können auf eine bestimmte Version verlinken:
Oder
Auf diese Weise müssen Sie sich keine Gedanken über Bibliotheksaktualisierungen machen. Es ist besser, auf dem neuesten Stand zu bleiben.
Ich bin nicht sicher, wie die genauen Statistiken zur Auswahl der Entwickler lauten, aber Sie können hier einen Blick darauf werfen , wie Milliarden von Anforderungen an Bootstrap CDN gesendet werden, was bedeutet, dass es robust und sicher zu verwenden ist.
quelle
Ich habe versucht, die Antwort von KyleMit zu bearbeiten , aber das Forum wurde als falsch eingerückter Code markiert, auch wenn dies nicht der Fall war. Deshalb füge ich meinen Beitrag unten hinzu:
Da die Frage als markiert ist Twitter-Bootstrap Thema (und nicht nur Twitter-Bootstrap-3 ), vielleicht ist es hilfreich, die Antwort für die neuere Version von Bootstrap zu aktualisieren.
Da der Rahmen eine neue Klasse für das Verstecken Elemente auf ihrer vierten Version hinzugefügt, sollten wir verwenden ,
.d-noneanstatt.hiddenin diesem Fall.Alles andere bleibt in diesem Fall gleich, außer der lib-Version (natürlich!)
quelle
Danke an @KyleMit. Eine andere Möglichkeit zum Zurückgreifen ist die Verwendung des 'Fenster'-Objekts wie unter -
Dies funktioniert folgendermaßen: Wenn die CDN-Verknüpfung funktioniert, steht für das Objekt 'window' die Eigenschaft 'jQuery' zur Verfügung, andernfalls wird der zweite Teil des Skripts, dh document.write, ausgeführt, der auf die lokale Kopie verweist.
Antwort auf die ursprüngliche Frage - CDN bietet viele Vorteile, z. B. schnelle Downloads, ohne den Server und die Bandbreite zu beeinträchtigen. Eine lokale Kopie zu haben, hat seinen eigenen Vorteil (als Ersatzvereinbarung). Im Intranet funktioniert die CDN-Verbindung aufgrund von Proxy-Einstellungen und Sicherheitsrichtlinien möglicherweise nicht. Wenn die CDN-Verbindung unterbrochen ist, funktioniert sie möglicherweise nicht. Die klare Antwort ist, beides zu haben.
quelle
Fast alle öffentlichen CDNs sind ziemlich zuverlässig. Wenn Sie sich jedoch Sorgen über den Bruchteil der Zeit machen, in der ein CDN möglicherweise nicht verfügbar ist, können Sie Bootstrap von einem Bootstrap-CDN laden und auf ein alternatives CDN zurückgreifen, falls das erste nicht verfügbar ist.
Zu Ihrem zweiten Anliegen: Die Links in diesem Beitrag sind fest codierte Versionen von Bootstrap und JQuery. Selbst wenn die Bootstrap- und JQuery-Bibliotheken ständig weiterentwickelt werden und neue Funktionen erhalten, bleibt Ihre Site im Laufe der Zeit dieselbe.
quelle