1개의 CDN 또는 여러 개의 CDNS에서 파일 로드

1개의 CDN 또는 여러 개의 CDNS에서 파일 로드

일반적인 웹 페이지에서는 CDN에서 다음을 로드합니다.

• j쿼리
• 각진
• 부트스트랩
• 이코문
• 몇 개의 앵귤러 플러그인

1개의 CDN(가능한 경우)에서 로드하는 것이 좋습니까, 아니면 다른 CDN에서 로드하는 것이 좋습니까?이를 위한 베스트 프랙티스가 있습니까?아니면 차이가 없습니까?

Yahoo UI Team의 이 기사에 따르면 1개 또는 여러 개의 CDN을 사용하는 경우 동일한 호스트 이름에서 다운로드하는 구성 요소의 수에 따라 문제가 되지 않습니다.HTTP/1.1은 브라우저가 호스트 이름당 병렬 다운로드를 2개로 제한해야 한다고 제안합니다.따라서, 복수의 CDN 송신원을 사용하는 경우는, 다른 호스트명을 사용하는 것이 좋습니다.

예를 들어 angular 및 angular-router와 같은 우발적인 버전 불일치를 피하기 위해 관련 컴포넌트를 사용하는 경우 동일한 CDN을 사용할 수 있지만 호스트 이름별 다운로드가 증가하면 동일한 방식으로 로딩 누수가 발생합니다(적어도 사양을 따르는 브라우저의 경우).

CDN을 사용하면 웹 사이트의 로드 성능을 향상시킬 수 있습니다.단, 보다 일반적인 CDN을 사용하는 것이 좋습니다.이것에 의해, 같은 파일을 사용하는 다른 사이트에서 사용하고 있는 파일의 캐시 버전을 취득할 가능성이 높아져, Web 사이트의 로드 퍼포먼스가 한층 향상됩니다.

@JeffPuckett이 코멘트에서 지적한 바와 같이 오늘날 브라우저는 서버/프록시별로 동시 다운로드가 더 많이 제한되어 있습니다.

Firefox 2:  2
Firefox 3+: 6
Opera 9.26: 4
Opera 12:   6
Safari 3:   4
Safari 5:   6
IE 7:       2
IE 8:       6
IE 10:      8
Chrome:     6

참조: https://stackoverflow.com/a/985704/4488121

유감스럽지만 이 질문에 대한 답은 보통 있는 일이기 때문에 없습니다.여기 제 2센트입니다.동시접속이나 브라우저/표준의 양에 초점을 맞추는 것에 반대하여 다른 관점에서 보고 싶습니다.

사용자와 서버 모두에게 가장 중요한 것은 페이지 로드 시간과 서비스 가용성입니다.가장 빠른 로드 시간은 캐시에서 로드됩니다.사용자가 특정 CDN의 특정 파일을 많이 사용할수록 캐시가 히트할 가능성이 높아집니다.

이 목표를 바탕으로 하면

• 자주 사용하는 CDN에서 자주 사용하는 라이브러리를 로드합니다.이 라이브러리는 라이브러리 목록에 따라 같은 CDN 또는 다른 CDN일 수 있습니다.브라우저의 병렬HTTP 접속의 수는 2차적인 인수라고 생각합니다.
• 커스텀 스크립트와 거의 사용되지 않는 서드파티 라이브러리를 가능한 한 적은 수의 파일(예를 들어 단일 CSS 및 단일 JS)로 결합하여 자신의 호스트 또는 자신의 CDN에서 로드합니다(다른 장소 또는 대륙에서 수많은 사용자가 오는 경우 CDN은 그다지 사치스럽지 않을 수 있습니다).
• 어떤 이유로든 CDN 기반 스크립트가 CDN에서 로드되지 않은 경우 로컬복사로 폴백합니다
• 이 옵션이 있는 경우 가장 많이 사용되는 버전의 라이브러리를 선택합니다.이 라이브러리는 최신 버전이 아닐 가능성이 높습니다.

CDN과 사용현황 통계가 인기 있는 라이브러리를 분류합니다.다만, 그 외의 라이브러리에서는, 다른 권장 사항에 근거해 로컬로 호스트 하는 것을 스스로 결정할 수 있습니다.

통계정보의 경우 w3techs와 같은 것을 사용할 수 있습니다.

• j쿼리
• 각도 JS
• 부트스트랩

「고도의 트래픽」과 「고도의 트래픽」의 사이트 중 하나를 선택하는 것은, Web 사이트의 대상 유저에 관한 지식을 가지는 추측에 근거해 실시할 수 있습니다만, 확실히 하고 싶은 경우는, 캐시 적중율을 측정할 수 있습니다.간단하지는 않지만, 여기에 몇 가지 아이디어가 있습니다.

버전의 경우 버전을 변경할 수 있는 옵션이 있는지 확인합니다.첫 번째 옵션인 "트래픽이 많은" 사이트를 선택할 경우 CDN에서 사용하는 라이브러리의 버전을 확인하는 것이 좋습니다.그렇지 않으면 "많은 낮은 트래픽" 옵션의 경우 가장 일반적인 버전이 선호됩니다.같은 w3tech에 통계정보가 있어야 합니다.

많은 문제처럼 들릴 수 있지만 통계는 매우 느리게 변화하기 때문에 (한 번이 아니더라도) 거의 이루어지지 않습니다.

승인된 답변은 너무 오래되어 Yahoo의 레퍼런스 문서는 2007년에 발행되었으며 특히 HTTP/1.1과 관련이 있습니다.HTTP/2 의 올바른 정보를 참조해 주세요.호스트 단위의 접속 제한은 HTTP/2 로 증가합니까?

나는 정반대라고 말할 것이다.HTTP/2 를 서포트하고 있는 경우는, 같은 호스트(이 경우는 CDN)로부터 한층 더 많은 자원을 로드하는 것이 가장 좋습니다.HTTP/2에 대한 브라우저 지원은 매우 높으며 앞으로 몇 년 안에 거의 100%에 이를 것입니다(HTTP/3와 결합할 경우).

또한 더 많은 CDN을 사용하여 파일을 로드하면 다음과 같은 비용이 발생합니다.

1. 여러 DNS 룩업
2. 페이지 로드당 다중 연결 수.
3. 모바일 기기에는 적합하지 않습니다.

이제 구체적인 질문에 답합니다.

1개의 CDN에서 로드하는 것이 좋습니까, 아니면 다른 CDN에서 로드하는 것이 좋습니까?현재 모든 CDN은 기본적으로 HTTP/2를 지원하므로 가능하면 1개의 CDN을 사용하여 더 많은 콘텐츠를 로드하는 것이 좋습니다.덧붙여서, 이 부수적인 도메인 샤딩 문제를 해결하기 위해서 작성된 CDN Page CDN이 있습니다.단일 호스트 상에서 javascript 라이브러리, Fonts 및 Private CDN을 제공하여 단일 HTTP/2 연결을 최대한 활용합니다.

이를 위한 베스트 프랙티스가 있습니까?베스트 프랙티스는 1. DNS 룩업을 줄인다.2. 접속을 줄인다.더 많은 CDN/호스트보다 더 적은 CDN/호스트를 선호합니다. 3. 파일을 번들하지 마십시오.많은 개발자가 파일을 번들하는 것을 추천하지만 Google Chrome V8 팀은 이것을 추천하지 않습니다.4 .사전 연결 메타 태그를 사용하여 연결 시간을 절약합니다.

차이가 없나요?네, CDN을 사용하면 사용자의 목적에 맞게 다른 웹 사이트의 브라우저 캐시를 사용할 수 있기 때문에 처음 방문하는 방문자라도 매우 빠른 페이지 로드를 얻을 수 있습니다.

성능에 영향을 미치기 때문에 1페이지에 여러 CDN 링크를 직접 사용하지 마십시오.여러 CDN 링크를 추가하려면 아래 코드를 사용해 보십시오.

bundles.UseCdn = true;
bundles.Add(new ScriptBundle("~/bundles/jquery",
@"//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.js"
).Include(
"~/Scripts/jquery-{version}.js"));

여러 파일을 하나의 파일로 결합하여 웹 페이지를 검색 및 표시하는 데 필요한 서버에 대한 요청 수를 줄입니다.

CDN을 사용하는 것은 다른 사용자가 이미 대답한 대로 할 수 있지만 CDN을 추가하는 것은 각 CDN의 DNS 검색 시간이 총 다운로드 시간을 지배하기 시작할 때까지만 확장됩니다.

따라서 최소 2~6개의 리소스를 로드하여 각 CDN을 최대한 활용하려고 하는 것이 최선의 트레이드오프일 수 있습니다.

대부분의 브라우저가 HTTP2를 지원하므로 먼저 물어보는 것이 좋습니다: CDN이 HTTP2를 지원합니까? 그렇다면 CDN을 통해 이러한 요청을 연결하는 것이 더 빠를 수 있습니다.다른 CDN이 아직 캐시되지 않은 경우에도 DNS 조회를 저장할 수 있습니다.CDN이 푸시를 지원하는 경우 많은 라이브러리가 여러 파일을 필요로 하기 때문에 속도가 향상될 수 있습니다.

베스트 프랙티스는 CDN과 폴백(로컬 파일)을 모두 사용하는 것입니다.질문에 답하려면 1개의 CDN이 다운된 것처럼 여러 개의 CDN 경로를 사용해야 합니다.다운된 CDN은 폴백이 효과가 있을 것입니다.

간단히 말하면, 그것은 내가 내 프로젝트에서 따르는 최고의 관행이다.

cdn을 사용하여 데이터를 쉽게 가져올 수 있습니다.

CDN은 다음과 같이 사용하지 않도록 해야 합니다.

1. 어떤 이유로 CDN이 실행되면 앱에도 영향을 미쳐 프로덕션 코드에서는 절대 발생하지 않는 다운타임이 발생할 수 있습니다.
2. CDN의 경우 브라우저는 다른 도메인에 대해 크롤링한 후 필요한 파일을 다운로드해야 합니다.이것에 의해, 시간이 걸립니다.
3. 다른 도메인에 대한 요청 수가 많으면 앱 로드 시간도 느려집니다.

브라우저는 한 번에 6개의 요청으로 제한되어 있기 때문에 한 번에 많은 요청을 하면 대기열에 들어가 시간이 더 걸리므로 요청 수를 최소화하도록 하십시오.

권장 사항 -

어플리케이션 내 사용자 Bower/Grunt 또는 Webpack -

1. Bower는 어플리케이션의 모든 의존관계를 로컬 서버/머신에 가져옵니다.따라서 필요한 파일을 얻기 위해 다른 도메인을 검색할 필요가 없습니다.
2. Grunt는 모든 다른 파일을 하나의 파일로 연결하고 병합하므로 크기가 줄어들고 브라우저에서 파일을 다운로드하기 위한 요청 수가 줄어듭니다.

bower/grunt에 대해 궁금한 점이 있으시면 제가 도와드리겠습니다.

언급URL : https://stackoverflow.com/questions/46039202/load-files-from-one-cdn-or-multiple-cdns