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 라이브러리가 지속적으로 개발되고 새로운 기능을 사용하더라도 사이트는 시간이 지남에 따라 동일하게 유지됩니다.
rgb(51, 51, 51)은 위험 해 보입니다. 누군가 색상을 변경하고 업데이트를 잊어 버린 경우 어떻게해야합니까? 보다 안정적인 속성을 사용할 수 있습니까?