헤드 섹션에서 참조 된 JavaScript가 기본 문서와 동일한 호스트 이름에서 제공되어야합니까?

최고의 성능을 얻으려면 Javascript를 정적 콘텐츠로 취급하고 CSS 파일, 이미지 등과 함께 쿠키가없는 도메인에서 제공해야한다는 인상을 받았습니다.

그러나 구글은 여기에 말합니다 : 쿠키가없는 도메인에서 조기로드 된 외부 JS 파일을 제공하지 마십시오

문서 헤드에서 참조되고 페이지 시작에 필요한 JavaScript의 경우 기본 문서와 동일한 호스트 이름에서 제공되어야합니다. 대부분의 브라우저는 모든 JavaScript 파일이 다운로드, 파싱 및 실행될 때까지 다른 다운로드 및 렌더링을 차단하므로이 처리 시점에서 추가 DNS 조회의 위험을 피하는 것이 좋습니다.

그래서 지금 나는 갈등합니다. "페이지 시작에 필요한"의 의미가 확실하지 않습니다.

필자는 일반적으로 ajax.googleapis.com에서 제공되는 JQuery와 $ (document) .ready () 함수에 이벤트 핸들러가 포함 된 master.js 파일이라는 두 개의 JavaScript 참조를 가지고 있습니다. 이것이 페이지 시작에 필요합니까?

사용 가능한 옵션 (ajax.googleapis.com, 정적 쿠키없는 도메인, 원래 호스트 이름)이 주어지면 JavaScript를 어디서 제공해야합니까?

그래서 지금 나는 갈등합니다. "페이지 시작에 필요한"의 의미가 확실하지 않습니다.

이것은 사이트의 작동 방식에 따라 다릅니다. 기본적으로 누군가가 웹 페이지를 사용하기 전에 실행해야하는 JavaScript입니다.

예를 들어 http://www.weather.com/으로 이동 하면 훌륭한 사람들이 JavaScript 검색을 사용하여 날씨 검색 양식에 대한 힌트를 제공하기로 결정했음을 알 수 있습니다. 즉, 단어 Enter Zip, City or Place (e.g. Disney World)가 텍스트 입력 필드에 나타납니다. 불행히도, 적어도 내 말에는 페이지가로드 될 때 약간의 지연이 있습니다. 따라서 페이지가로드 속도가 느리고 JavaScript가 실행되기 전에 텍스트 입력을 시작하기에 충분히 빠르면 ( 확장 되지 는 않음) JavaScript를 사용 하여 입력을 맹목적으로 묶을 수 있습니다. 입력 상자에 텍스트.

물론, 텍스트 상자에서 사용자 입력을 먼저 확인하거나이 비동기 기술을 포기함으로써이를 피할 수 있습니다. 그러나, 그것은 좋은 예가되지 않을 것입니다.

사용 가능한 옵션 (ajax.googleapis.com, 정적 쿠키없는 도메인, 원래 호스트 이름)이 주어지면 JavaScript를 어디서 제공해야합니까?

JavaScript가 무엇을하는지 모르면 대답 할 수 없습니다. 또한 bpeterson76이 암시하는 것처럼 사이트의 특정 상황에 따라 다릅니다. 즉, 페이지가 얼마나 큽니까? 호스트는 수요를 얼마나 잘 충족합니까? 얼마나 많은 CSS 파일, 이미지 등이로드됩니까? 얼마나 많은 외부 리소스가로드됩니까?

특정 상황에 따라 이는 조기 최적화 일 수 있습니다.

은 "렌더링을 시작 페이지 전에 필요한 것도이 같은 서버에서해야한다"규칙은 일반적으로 적용 하여서버 또는 기타 소규모 리소스-DNS 조회가 눈에 띄게 1 초의 시간이 걸릴 수있는 상황 (객체가 많은 도메인에 흩어져있는 경우 빠르게 추가 될 수 있음). Google의 jQuery 캐시 및 기타 라이브러리와 같은 일반적인 공공 리소스를 사용하면 방문자의 브라우저가 이미 다른 사이트에서 해당 서비스의 콘텐츠를 참조하기 때문에 DNS 조회를 이미 수행했을 가능성이 높습니다. 전송을 수행해야합니다 (또는 요청이있는 경우 짧은 "304-수정되지 않음"응답을 다시 얻을 수 있음). 개체에 전체 다운로드가 필요한 경우에도 대부분의 사용자는 소규모 콘텐츠보다 Google 콘텐츠 전송 네트워크가 더 빠릅니다.

하나의 관련 규칙 : 사용자가 보는대로 페이지의 올바른 기능에 필요하지 않은 객체는 기본 HTTP 응답에서 가능한 한 늦게 참조되어야합니다. 예를 들어 광고 / 통계 서비스 (예 : Google 웹 로그 분석 및 ilk)에 필요한 스크립트와 같은 것-사용자에게 가능한 한 빨리 콘텐츠를 제공 한 다음 관심있는 배경 만로드하십시오. 나는 종종 너무 느리고 일찍 참조하는 사이트가 스크립트를 기다리는 동안 빈 페이지를 제공하기 때문에 두 개의 광고 / 통계 서비스 (호스트 파일에서 127.0.0.1에 매핑하여)를 차단했습니다 내가 늦게 언급 한 내용을 읽을 수 있도록 내가있는 내용을 읽을 수있는 반면 다른 내용은 배경에서 계속 진행됩니다.

정적 콘텐츠에 쿠키가없는 도메인의 유용성은 규모의 문제입니다. 쿠키에 하나의 10 바이트 세션 ID와 하루에 10 만 명의 방문자가 방문당 ~ 20 개의 정적 오브젝트를 요청하는 경우 한 달에 ~ 118Mbyte의 대역폭 만 절약합니다 (20 * 20 * 10000 * 31 / 1024 / 1024). 반면에 귀하의 사이트가 쿠키에 1-2 킬로바이트 상당의 물건을 보관하는 경우 특히 사용자가 느린 연결을 통해 사이트에 액세스하는 경우 (예 : 모바일에 테 더링을 통한 GPRS 또는 그 이상) 차이가 훨씬 더 클 수 있습니다 간섭이 심한 지역에서 혼잡 한 Wi-Fi 링크) 또는 하루에 수백만 번 방문하는 경우.

요약하면 페이지에서 내 환경 설정을 렌더링하기 전에로드해야하는 스크립트의 경우 다음과 같습니다.

1. ajax.googleapis.com 또는 유사
2. 호출 페이지의 원래 호스트 이름
3. 정적 쿠키없는 도메인

초기 페이지 렌더링에 필수적이지 않은 리소스의 경우 가능한 한 늦은 리소스를 참조하고 위의 기본 설정 목록을 반대로하십시오 (대규모 규모로 운영하지 않는 한 원래 호스트 이름과 쿠키가없는 도메인의 차이는 중요하지 않을 가능성이 높지만) ).

Google은 전 세계에 분산 된 거대한 콘텐츠 네트워크를 운영하여 사용자가 실행중인 단일 서버보다 콘텐츠를 사용자에게 더 가깝게 배치합니다 (아카 미는 있지만 Google 소유). 따라서 속도 측면에서 볼 때 Google은 개인 서버와 매우 가까이 있지 않는 한 파일을 로컬 서버보다 빠르게 사용자에게 제공합니다.

이 질문은 Stackoverflow에서 계속해서 돌아 왔으며 위의 대답은 항상 합의 된 것으로 보입니다. 그러나 현실적인 관점에서 볼 때 한 대 다른 대를 호스팅함으로써 얻는 이익은 장기적으로 상당히 최소화 될 것입니다. 물리적 인 위치를 자세히 조사하는 것보다 전체 http 요청을 축소, 최적화 및 줄이면 훨씬 더 많은 이점을 얻을 수 있습니다. 문제가 발생하기 시작하는 상황 (페이지 당 150 만 회 이상로드 된 작업을 수행하여 5k 향상으로 대역폭 절약이 5 기가를 의미 함)에는 일반적으로 이러한 의사 결정을 담당하는 의사 결정자 팀이 있습니다.

개인적으로 저는 보통 제가 찾고있는 것의 최신 사본을 제공 할 목적으로 만 Google에서 호스팅합니다.

기억해야 할 한 가지 중요한 점은 브라우저에는 동일한 도메인에서 동시에 다운로드 할 수있는 리소스 수 (일반적으로 브라우저에 따라 2-6)가 제한되어 있다는 것입니다. 다른 도메인을 사용하면 브라우저가 도메인에서 더 많은 것을 동시에 다운로드 할 수 있습니다.

따라서 가장 좋은 해결책은 쿠키가 없으므로 ajax.googleapis.com과 같은 인기있는 CDN을 사용하는 것입니다. 사용자가 이미 DNS 조회를 수행했으며 리소스를 캐시했을 수도 있습니다. CDN은 속도에 최적화되어 있으며 사용자에게 가까운 서버가있을 수 있습니다.

CDN이 옵션이 아닌 경우 쿠키가 많거나 다운로드 할 리소스가 많으면 (이미지 등) 쿠키가없는 도메인을 사용하십시오 (어쨌든 DNS 조회 만 수행하면 됨).

동일한 도메인의 리소스가 거의없고 (사용자 정의 자바 스크립트 파일 하나만) 쿠키가 거의없는 경우 (작은 세션 ID).

좋은 자료 :

http://www.phpied.com/free-falling-waterfalls/

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

http://developer.yahoo.com/performance/rules.html

위의 답변이 귀하의 질문 대부분을 해부했지만 "페이지 시작에 필요합니다"에 기여하겠습니다. 나는 이것을 다음으로 번역합니다 :이 스크립트 는 웹 사이트를 사용하는데 필수적 입니까? 경험상 일반적으로 대답은 '아니오'입니다. 그러나 내가 원하는 경우 :

• 양식 검증
• JavaScript 기반 탐색 (어쨌든 이상적이지 않음)
• 레이아웃이 JavaScript에 의존하는 경우
• JavaScript 또는 jQuery와 같은 라이브러리가 중요한 DOM 수정에 사용되는 경우

야후의 YSlow 성능 가이드 라인 은 참고 용이다.