문서의 상단이 아닌 하단에 JS를로드 할 때의 이점
문서 상단이 아닌 하단에 JS를로드하는 것의 실제 이점 (있는 경우)은 무엇입니까? 페이지 로딩 및 JS 종속 기능에 잠시 지연이있는 것 같습니다.
모든 템플릿을 시작하기 위해 html5boilerplate 를 사용 하고 있지만 맨 아래에 JS를로드하는 것이 얼마나 유익한 지 잘 모르겠습니다.
정말 그렇게 큰 차이를 만들까요? 그렇다면 그 이유는 무엇입니까?
페이지 하단에 외부 js 파일을 포함하는 경우 상호 작용 또는 역학 논리 대신 클라이언트에 표시 될 시각적 디스플레이에 HTTP 요청의 우선 순위를 부여합니다. 클라이언트에 이미지를 전달하기 위해 콘텐츠 전송 네트워크를 사용하지 않는 경우 한 번에 최대 2 개의 HTTP 요청 만 처리 할 수 있습니다. 우리 모두가 최종 사용자가 얼마나 참을성이 있는지 알고 있기 때문에 이러한 요청을 논리에 낭비하고 싶지 않습니다.
파일의 끝에서 js를로드하면 document.ready () 함수를 호출하지 않고도 DOM (대부분)에 액세스 할 수 있습니다. 페이지 렌더링이 마침내 필요한 페이지 요소가 일반적으로 이미로드 된 자바 스크립트 코드에 도달하면 알 수 있습니다.
거기에 몇 가지 더 많은 이유가 있지만 모든 js를 맨 아래에 배치하는 것이 너무 어색 할 때 기억하려고하는 중요한 이유입니다.
참조 된 스크립트가 다운로드됨에 따라 브라우저는 일반적으로 다른 파일을 병렬로 다운로드하지 않으므로 페이지로드가 느려집니다.
참조 : 웹 사이트 속도 향상을위한 모범 사례
Google 검색은 원하는 이유와 개선 사항에 대한 많은 결과를 반환합니다. 다음 링크 중 일부를 확인하십시오.
기본적으로 이렇게하는 주된 이유는 페이지의 렌더링 시간을 개선하기 때문입니다. 첫 번째 기사에서 :
[나는] 가능한 한 페이지의 맨 위에서 아래로 스크립트를 이동하는 것이 좋습니다. 한 가지 이유는 점진적 렌더링을 활성화하는 것이지만 또 다른 이유는 다운로드 병렬화를 높이기위한 것입니다.
js에 무엇이 있는지에 따라. 페이지가로드 될 때만 '이동'하려면 jquery로 코드를 둘러싸 $(function(){})거나 페이지 하단에 배치하십시오.
'IT TIP' 카테고리의 다른 글
| Django 모델 필드 유효성 검사 (0) | 2020.12.12 |
|---|---|
| 제네릭 메소드의 여러 와일드 카드는 Java 컴파일러 (그리고 나!)를 매우 혼란스럽게 만듭니다. (0) | 2020.12.12 |
| 자체 닫는 DIV 태그를 사용해도됩니까? (0) | 2020.12.12 |
| ggplot 축 레이블의 아래 첨자 문자 (0) | 2020.12.12 |
| OpenCL / AMD : 딥 러닝 (0) | 2020.12.12 |