> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 파일을 Html 하단에 배치하는 이유

JavaScript 파일을 Html 하단에 배치하는 이유

hzc
풀어 주다: 2020-06-28 11:50:59
원래의
2719명이 탐색했습니다.

JavaScript 파일을 Html 하단에 배치하는 이유는 JS 파일을 로딩한 후 브라우저가 이를 실행하기 때문입니다. 이때 JS에서 DOM에 대한 작업이 있는 경우 DOM이 실행되지 않을 수 있습니다. 게다가 JS가 페이지에 영향을 주지 않기 때문에 표시에 쓸모가 없으므로 최대한 빨리 페이지를 표시하려면 CSS를 먼저 로드해야 합니다.

JavaScript 파일을 Html 하단에 배치하는 이유

이 문제에는 두 가지 고려 사항이 있습니다.

  • 외부에서 로드된 js, 즉 src를 통해 로드된 외부 js인 경우, 이렇게 js를 호출한 이유는 다음과 같습니다. 브라우저는 웹페이지를 위에서 아래로 렌더링하기 때문에 사용자가 볼 수 있고 직관적으로 느낄 수 있는 것입니다. js 코드는 사용자가 볼 수 없는 "비하인드 스토리"에 속합니다. "비하인드 스토리" 항목을 하단에 배치하면 사용자에게 표시되는 페이지가 더 빠르게 로드되어 사용자가 페이지가 빠르게 열리는 것처럼 느끼게 하고 사용자 경험을 향상시킵니다.

  • js는 일반적으로 페이지의 DOM을 운영하는 데 사용됩니다. js 코드가 페이지 상단에 배치되면 위에서 아래로 브라우저 로딩 메커니즘을 기반으로 운영되는 DOM 노드가 DOM을 조작하는 경우 분명히 오류가 발생하므로 페이지 하단에 두는 것이 더 안전합니다.

주요 고려 사항은 첫 번째입니다. 이제 DOM 트리가 100% 렌더링되고 실행되도록 하기 위해 두 번째는 기본적으로 로드 테스트를 거칩니다.

추천 튜토리얼: "JS Tutorial"

위 내용은 JavaScript 파일을 Html 하단에 배치하는 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿