CDNのBootstrapを使用するか、サーバーにコピーを作成する必要がありますか？
回答:
なぜ両方Not \ _（ツ）_ /¯ではないのですか？ Scott Hanselmanは、パフォーマンス向上のためにCDNを使用することに関する優れた記事を持っていますが、CDNがダウンした場合に備えて、ローカルコピーに適切にフォールバックします。ます。
ブートストラップに固有の方法は、次のようにして、ローカルフォールバックを使用してCDNからロードできます。
Plunkerでの作業デモ
<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>アップデート
- YepNopeまたはfallback.jsを使用して同じテストを行うこともできます
- Flashのコメントおよびこのソリューションごと
.visibleに、テストではなくクラスをチェックするための更新された回答rgb(51, 51, 51) - あたりdesteさんのコメント使用するように更新、
.hiddenおよび.d-noneブートストラップ3.xまたは4のいずれかのために - ときスタイルシートがロードされた場合にテストを、あなたはそのスタイルを探す必要がだろうは、適用される、要素を作成して、適用されているかどうかを確認する必要があります。
- バニラjsを使用してスタイルシートを更新し、すぐにヘッドにロードするようにしました。を使用してテスト要素を作成し
Document.createElement()、ブートストラップクラスを適用し、を使用してWindow.getComputedStyle()をテストしdisplay:none、jsを使用してスタイルシートを条件付きで挿入する必要があります。
ベストプラクティス
ベストプラクティスに関する質問には、実稼働環境でCDNを使用する非常に十分な理由があります。
- 利用可能な並列処理が増加します。
- キャッシュヒットが発生する可能性が高くなります。
- ペイロードは可能な限り小さくなりますます。
- サーバーが使用する帯域幅の量を減らします。
- これにより、ユーザーは地理的に近い応答を得ることができます。
バージョン管理の問題として、その重要な価値があるCDNを使用すると、ライブラリの特定のバージョンを対象にできるため、リリースごとに誤って重大な変更を導入することはありません。
使用する document.write
上のMDNによると document.write
注：として
document.writeのドキュメントへの書き込みストリーム呼び出し、document.write閉じた状態（ロード）文書を自動的に呼び出してdocument.open、ドキュメントをクリアします。
ただし、ここでの使用は意図的なものです。コードは、DOMが完全に読み込まれる前に、正しい順序で実行する必要があります。jQueryが失敗した場合は、jQueryに依存するブートストラップをロードする前に、ドキュメントにインラインで挿入する必要があります。
ロード後のHTML出力：
ただし、どちらの場合でも、ドキュメントが開いている間に呼び出しているため、ドキュメント全体を置き換えるのではなく、コンテンツをインライン化する必要があります。最後まで待っている場合は、document.body.appendChild動的ソースを挿入するためにに置き換える必要があります。
余談：MVC 6では、リンクおよびスクリプトタグヘルパーを使用してこれを行うことができます
<body>ます。常に要素があります。 この答えは、.hiddendivを使用していくつかのマークアップを追加し、それが表示されるかどうかを確認するテストを実行します$('#bootstrapCssTest').is(':visible')。そのクラスは、時間の経過とともに重大な変更を行う可能性がはるかに低くなります。
特定のサイトに依存します。
多くのユーザーがいますか？帯域幅の使用について気にしますか？パフォーマンスに問題はありますか（CDN は応答を高速化できます）？
特定のバージョンにリンクできます。
//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
または
//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
そうすれば、ライブラリの更新について心配する必要がなくなります。更新を維持することをお勧めします。
開発者の選択に関する正確な統計が何であるかはわかりませんが、ここを見ると、何十億ものリクエストがBootstrap CDNに送信されていることがわかります。つまり、堅牢で安全に使用できます。
カイルミットの回答を編集しようとしましたが、フォーラムは間違ったインデントコードとしてマークされていましたが、そうではなかったので、以下のように投稿を追加しています。
質問は さえずりブートストラップ トピック（そしてだけでなく twitter-bootstrap-3 ）、Bootstrapの新しいバージョンの応答を更新すると役立つ場合があります。
フレームワークは4番目のバージョンで要素を非表示にするための新しいクラスを追加したので、この場合.d-noneで.hiddenはなくを使用する必要があります。
libバージョンを除いて、他のすべてはその場合同じままです（もちろん！）
@KyleMitに感謝します。フォールバックの別の方法は、以下のように「ウィンドウ」オブジェクトを使用することです-
<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>このように機能します-CDNリンクが機能する場合、「ウィンドウ」オブジェクトは「jQuery」プロパティを使用できます。それ以外の場合は、スクリプトの2番目の部分、つまりローカルコピーを指すdocument.writeが実行されます。
元の質問への回答-CDNを使用すると、サーバーや帯域幅に影響を与えずにすばやくダウンロードできるなど、多くの利点があります。ローカルコピーを持つことには、独自の利点があります（フォールバック構成として）。イントラネットでは、プロキシ設定、セキュリティポリシーにより、CDNリンクが機能しないか、CDNリンクがダウンしていると機能しない可能性があります。正解は、両方を用意することです。
ほとんどすべてのパブリックCDNはかなり信頼できます。ただし、CDNがダウンする可能性がある時間の一部が心配な場合は、1つのBootstrap CDNからBootstrapをロードし、最初のものがダウンした場合に代替CDNにフォールバックできます。
<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>2番目の懸念事項について： この投稿のリンクは、ハードコードされたバージョンのブートストラップとjqueryです。したがって、ブートストラップライブラリとjqueryライブラリが絶えず開発されて新しい機能が追加されたとしても、サイトは長期にわたって同じままです。
rgb(51, 51, 51)は危険に思われます-誰かが色を変更し、それを更新するのを忘れた場合はどうなりますか？使用できるより安定したプロパティはありますか？