Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML

HTML <script> 사용 방법 알아보기 요소.

HTML <script> 요소는 문서에 JavaScript 코드를 추가하는 데 사용됩니다.

<script> 사용 두 가지 방법으로 JavaScript를 추가할 수 있습니다.

따라서 JavaScript를 내부적으로 로드하느냐 외부적으로 로드하느냐의 문제입니다.

두 가지 옵션을 모두 살펴보겠습니다.

인라인 자바스크립트

JavaScript 코드를 인라인으로 포함하려면 열기 및 닫기 스크립트 태그를 정의하고 내부에 JS 코드를 넣습니다.

<script>
  // Add your JavaScript code here
</script>

<script> 그런 다음 요소를 문서의 <head> 안에 넣을 수 있습니다. 요소:

<!DOCTYPE html>
<html>
  <head>
    <script>
      // Add your JavaScript code here
    </script>
  </head>
  <body>
    ...
  </body>
</html>

또는 <head> 외부 요소, 닫기 </body> 직전 요소 태그:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script>
      // Add your JavaScript code here
    </script>
  </body>
</html>

<head>에 JavaScript를 넣는 것의 차이점은 무엇입니까? 대 <body> ?

차이점은 성능입니다. 그리고 그것은 큰 차이.

기본적으로 HTML 문서와 해당 요소는 구문 분석(읽기)되고 위에서 아래로 렌더링됩니다. <head>에서 JavaScript 코드를 로드하고 실행할 때 , 나머지의 렌더링 스크립트가 구문 분석되고 코드 실행이 완료될 때까지 페이지 요소(보이는 콘텐츠)가 차단됩니다.

JavaScript 파일을 실행하는 데는 실행 중인 코드의 크기와 유형에 따라 몇 밀리초(ms) 또는 몇 초가 걸릴 수 있습니다. 따라서 페이지가 사용자와 상호작용(사용 가능)되기까지 시간이 지연될 수 있습니다.

JavaScript 코드를 맨 아래(</body> 바로 앞)에 배치하여 ), JavaScript 코드는 이후까지 로드 및 실행되지 않습니다. 모든 페이지 콘텐츠가 렌더링되고 사용자에게 표시됩니다. 이렇게 하면 차단이 방지됩니다. 따라서 사용자는 웹페이지와 더 빨리 상호작용할 수 있습니다.

자, 이제 인라인 JavaScript 코드를 삽입하는 방법과 가장 효과적인 방법으로 삽입하는 방법을 알게 되었습니다.

이제 외부 JavaScript 코드를 가져오고 내부(인라인) JavaScript와 어떻게 다른지 살펴보겠습니다.

외부 자바스크립트 파일 가져오기

외부 JavaScript 코드를 로드하려면 .js가 있는 파일을 통해 가져와야 합니다. 확대. 예를 들어 main.js .

다음과 같이 작동합니다.

<script src="main.js"></script>

인라인 JavaScript와 마찬가지로 <head> 안에 넣을 수 있습니다. 요소:

<!DOCTYPE html>
<html>
  <head>
    <script src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

또는 닫는 본문 요소 태그 </body> 바로 앞 :

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    ...
    <script src="main.js"></script>
  </body>
</html>

지연 속성

최신 자바스크립트를 사용하면 더욱 뛰어난 성능이 있습니다. 페이지 하단에 로드하는 것보다 외부 스크립트를 실행하는 방법입니다.

defer를 사용할 수 있습니다. <script>의 속성 요소:

<script defer src="main.js"></script>

그런 다음 <head> 안에 넣으십시오. 요소:

<!DOCTYPE html>
<html>
  <head>
    <script defer src="main.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

이 defer으로 접근 방식을 사용하면 동안 JavaScript 코드가 로드됩니다(실행되지 않음). HTML 코드가 구문 분석 중이지만 이후까지 실행되지 않습니다. HTML 구문 분석이 완료되었습니다.

외부 스크립트가 맨 아래에 있는 경우(</body> 바로 앞) ), 다음과 같은 상황이 발생합니다.

defer 사용 로드 중 자바스크립트 코드 동안 HTML이 (병렬로) 구문 분석 중이므로 HTML이 완료되는 즉시 JavaScript 코드가 이미 로드되어 실행할 준비가 됩니다.

이게 더 나은 이유는? 항상 더 나은 것은 아닙니다. 그러나 많은 웹사이트는 페이지가 대화형(사용자가 사용할 수 있음)이 되자마자 즉시 작동하기 위해 JavaScript에 의존합니다. 이 접근 방식을 사용하면 사이트에서 훨씬 더 빠르게 상호 작용할 수 있습니다.

이 defer를 완전히 이해하지 못해도 괜찮습니다. 지금 당장 개념에 대해 실제 경험을 해보면 알게 될 것입니다.

일반적으로 웹사이트에서 JavaScript 코드를 실행하는 가장 효과적인 방법입니다.

알아두면 좋은 정보: