Why Not Both ¯\_(ツ)_/¯ ? Scott Hanselman hat einen großen Artikel über die Verwendung eines CDN für Leistungssteigerungen, aber anmutig falling back to a local copy in case the CDN is down.
Spezifische Bootstrap, können Sie die folgenden Funktionen load from a CDN with a local fallback tun:
<head>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- jQuery local fallback -->
<script>window.jQuery || document.write('<script src="/local/jquery.min.js"><\/script>')</script>
<!-- Bootstrap JS CDN -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback -->
<script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="/local/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap CSS local fallback -->
<div id="bootstrapCssTest" class="hidden"></div>
<script>
$(function() {
if ($('#bootstrapCssTest').is(':visible')) {
$("head").prepend('<link rel="stylesheet" href="/local/bootstrap.min.css">');
}
});
</script>
</body>
* Sie können auch den gleichen Test using YepNope or fallback.js
* pro Flash's comment und this solution, aktualisiert Antwort für .visible Klasse tun, anstatt zu prüfen, der Prüfung für rgb(51, 51, 51)
* wenn testing if a stylesheet loaded, müssen Sie nach einem Stil suchen, der würde wurde angewendet, erstellen Sie ein Element und sehen Sie, ob es angewendet wurde.
Um Ihre Frage zu Best Practices, es gibt eine Menge von very good reasons to use a CDN in a production environment:
- Es erhöht die Parallelität zur Verfügung.
- Es erhöht die Chance, dass es einen Cache-Hit wird.
- Es stellt sicher, dass die Nutzlast so klein wie möglich sein wird.
- Es reduziert die Menge Bandbreite von Ihrem Server verwendet.
- Es stellt sicher, dass der Benutzer eine geographisch nahe Antwort erhält.
Um die Versionierung Sorge, jede CDN wert sein Gewicht in Salz mit können Sie eine bestimmte Version der Bibliothek Ziel, so dass Sie nicht versehentlich mit jedem Release brechen Änderungen einzuführen.
Hardcoding 'rgb (51, 51, 51)' scheint riskant - was, wenn jemand die Farbe ändert und vergisst, sie zu aktualisieren? Gibt es eine stabilere Eigenschaft, die man verwenden könnte? – Flash
@Flash, Yeah, stimme ich zu, das scheint knifflig. Es ist schwierig, CSS-Änderungen in globalen JavaScript-Variablen oder direkt über CSS zu testen. Wir müssen nur Elemente testen, um zu sehen, ob sie so formatiert sind, wie das CSS sie beschreiben wird, und wir haben immer ein "
" -Element. [Diese Antwort] (http://stackoverflow.com/a/17232679/1366033) fügt ein Markup mit einem '.hidden' div hinzu und führt dann einen Test durch, um zu sehen, ob es sichtbar ist:' $ ('# bootstrapCssTest') (': sichtbar') '. Diese Klasse ist wahrscheinlich weniger wahrscheinlich, dass sie im Laufe der Zeit Änderungen aufweist. – KyleMit@KyleMit, Wie kann ich das für [Google Material Icons] (https://material.io/icons) tun? –