[twitter-bootstrap] CDN에서 부트 스트랩을 사용하거나 서버에서 복사해야합니까?

Twitter 부트 스트랩을 사용하는 가장 좋은 방법은 무엇입니까, CDN에서 참조하거나 서버에 로컬 사본을 만드시겠습니까?

부트 스트랩이 계속 발전하고 있기 때문에 CDN을 참조하면 시간이 지남에 따라 다른 웹 페이지가 표시되고 일부 태그가 손상 될 수 있습니다. 대부분의 사람들의 선택은 무엇입니까?

답변

왜 둘 다 ¯ \ _ (ツ) _ / ¯? Scott Hanselman은 성능 향상을 위해 CDN을 사용하는 방법에 대한 훌륭한 기사를 가지고 있지만 CDN이 다운 된 경우 로컬 복사본으로 우아하게 되돌아갑니다 .

부트 스트랩과 관련하여 다음을 수행하여 로컬 폴 백이있는 CDN에서로드 할 수 있습니다 .

플 런커 작업 데모

<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를 사용하여 동일한 테스트 를 수행 할 수도 있습니다.
당 플래시의 의견 과 이 솔루션 , 확인하기 위해 대답을 업데이트 .visible를 테스트하는 대신 클래스rgb(51, 51, 51)
당 deste의 코멘트를 사용하도록 업데이트, .hidden및 .d-none중 부트 스트랩 3.x 또는 4
스타일 시트가로드되었는지 테스트 할 때 적용 할 스타일을 찾고 요소를 작성하고 적용되었는지 확인해야합니다.
바닐라 js를 사용하여 헤드에 즉시로드되도록 스타일 시트를 업데이트했습니다. 을 사용하여 테스트 요소를 작성하고 Document.createElement()부트 스트랩 클래스를 적용하고을 Window.getComputedStyle()테스트하고 js를 사용하여 display:none조건부 로 스타일 시트 를 삽입해야합니다 .

모범 사례

모범 사례에 대한 질문 에는 프로덕션 환경에서 CDN을 사용해야하는 많은 이유가 있습니다 .

사용 가능한 병렬 처리가 증가합니다 .

캐시 적중 가능성이 높아집니다 .

페이로드가 가능한 작게됩니다 .

서버에서 사용하는 대역폭 의 양을 줄 입니다.

이를 통해 사용자는 지리적으로 가까운 응답을 얻을 수 있습니다 .

버전 관리와 관련하여 소금에 무게가있는 CDN을 사용하면 특정 버전의 라이브러리를 대상으로 할 수 있으므로 각 릴리스마다 실수로 변경 사항이 발생하지 않습니다.

사용 `document.write`

에 mdn에 따르면 document.write

참고 : 같은 document.write문서에 쓰기 스트림 호출, document.write폐쇄 된 (로드) 문서를 자동으로 호출에 document.open, 문서를 삭제합니다 .

그러나 여기에서의 사용법은 의도적 인 것입니다. DOM이 완전히로드되기 전에 올바른 순서로 코드를 실행해야합니다. jQuery가 실패하면 jQuery에 의존하는 부트 스트랩을로드하기 전에 문서를 인라인에 삽입해야합니다.

로드 후 HTML 출력 :

그러나이 두 가지 경우 모두 문서가 열려있는 동안 호출하므로 전체 문서를 바꾸지 않고 내용을 인라인해야합니다. 끝날 때까지 기다리는 경우 document.body.appendChild동적 소스를 삽입 하려면로 교체해야 합니다.

따로 : MVC 6에서는 링크 및 스크립트 태그 도우미를 사용 하여이 작업을 수행 할 수 있습니다.

답변

특정 사이트에 따라 다릅니다.

많은 사용자가 있습니까? 대역폭 사용에 관심이 있습니까? 성능에 문제가 있습니까 (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으로 전송되는 것을 볼 수 있습니다. 이는 강력하고 안전하게 사용할 수 있음을 의미합니다.

답변

KyleMit의 답변 을 편집하려고 시도 했지만 포럼이 잘못 들여 쓰기 된 코드로 표시되어 있지 않았으므로 내 기여도를 다음과 같이 추가합니다.

질문이 태그로 트위터 부트 스트랩 주제 (그리고뿐만 아니라 트위터 부트 스트랩 -3 ), 최신 버전의 Bootstrap에 대한 응답을 업데이트하면 도움이 될 수 있습니다.

프레임 워크가 네 번째 버전에서 요소를 숨기기위한 새 클래스를 추가 했으므로이 경우 .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 링크가 작동하면 ‘window’개체에 ‘jQuery’속성을 사용할 수 있습니다. 그렇지 않으면 스크립트의 두 번째 부분, 즉 document.write가 로컬 사본을 가리키는 실행됩니다.

원래 질문에 대한 답변-CDN을 사용하면 서버 및 대역폭에 영향을주지 않고 빠른 다운로드와 같은 많은 이점이 있습니다. 로컬 사본을 갖는 것은 자체적 인 이점이 있습니다 (대체 방식으로). 인트라넷에서 프록시 설정, 보안 정책, CDN 링크가 작동하지 않거나 CDN 링크가 작동하지 않을 수 있습니다. 정답은 둘 다를 갖는 것입니다.

답변

거의 모든 공개 CDN은 매우 안정적입니다. 그러나 CDN이 다운 될 수있는 시간에 대해 걱정이되는 경우 하나의 부트 스트랩 CDN 에서 부트 스트랩을로드 하고 첫 번째 CDN이 다운 된 경우 대체 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>

두 번째 관심사 정보 :
이 게시물의 링크는 하드 코딩 된 버전의 부트 스트랩 및 jquery입니다. 따라서 부트 스트랩과 jquery 라이브러리가 지속적으로 개발되고 새로운 기능을 사용하더라도 사이트는 시간이 지남에 따라 동일하게 유지됩니다.

답변

플 런커 작업 데모

업데이트

모범 사례

사용 document.write

답변

답변

답변

답변

답변

사용 `document.write`