HTML의 스크립트 태그에 대한 자세한 설명(코드 포함)-HTML 튜토리얼-php.cn

이 글은 HTML의 스크립트 태그(코드 포함)에 대한 자세한 설명을 제공합니다. 여기에는 특정 참조 값이 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

script 요소

HTML 페이지에서 "Javascript" 언어를 사용하는 주요 방법은 script 요소 내부의 코드가 위에서 아래로 실행되는 것입니다.

여러 스크립트 요소가 도입되면 브라우저는 페이지에 나타나는 순서대로 스크립트 요소를 구문 분석합니다. 이전 구문 분석이 완료되면

HTML Two에서 다음 스크립트 요소의 내용이 처리됩니다.

//第一种方法：直接在标签内使用 javascript 即可
<script>
    console.log('第一种使用方法');
</script>

//第二种方法：引用外部文件
<script src="example.js"></script>

로그인 후 복사

에서 Javascript를 사용하는 방법

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </head>
    <body>
        <div>页面的内容区域</div>
    </body>
</html>

로그인 후 복사

스크립트 요소의 속성

일반적으로 사용되는 스크립트 요소의 여러 속성

src: 선택 사항, 외부 Javascript 파일을 참조하는 데 사용됨
type: 선택 사항, 코드 작성 스크립트 언어 유형 사용됨(MIME 유형이기도 함), 기본값은 text/javascript
async: 선택 사항, 스크립트의 비동기 로딩, 외부 스크립트 파일에만 유효
defer: 선택 사항, 지연된 스크립트 로딩, 문서 이후 실행 완전히 구문 분석되어 외부 스크립트 파일에만 유효합니다

HTML에서 스크립트 요소의 위치

"Javascript" 언어는 단일 스레드 언어이므로 동시에 하나만 실행할 수 있습니다. 다음 작업은 이전 작업이 완료된 후에만 수행할 수 있으므로 HTML에서 스크립트 요소의 위치가 달라지며 다른 효과가 나타납니다.

모든 스크립트 요소는 요소에 배치됩니다.

이 접근 방식은 페이지의 내용이 많이 표시되기 전에 모든 Javascript 코드가 실행될 때까지 기다려야 함을 의미합니다. 이 방법을 사용하면 페이지 로딩이 매우 느리고 사용자 경험이 매우 열악할 것입니다. 그렇다면 어떻게 이런 방식으로 최적화할 수 있을까요? 실제로는 매우 간단합니다.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>页面的内容区域</div>
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </body>
</html>

로그인 후 복사

모든 스크립트 요소는 페이지 콘텐츠 뒤에 배치됩니다.

위에서 언급한 느린 페이지 로딩 문제를 최적화하려면 페이지 콘텐츠 뒤에 사용하는 Javascript 코드만 넣으면 됩니다. 먼저 로드하면 콘텐츠가 표시되고 Javascript 코드가 실행되므로 사용자는 페이지에 콘텐츠가 표시될 때까지 오랜 시간을 기다릴 필요가 없습니다.

//example1.js 中的代码
//console.log('example1');
//console.log(document.getElementById('content'));

//example2.js 中的代码
//console.log('example2');
//console.log(document.getElementById('content'));

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script defer src="example1.js"></script>
    <script defer src="example2.js"></script>
</head>
<body>
    <div id="content">这里页面的内容</div>
</body>
</html>

로그인 후 복사

스크립트 로딩 지연

스크립트 로딩을 지연하려면 스크립트 요소의 defer 속성을 사용해야 합니다. 요소가 defer 속성을 사용하면 실행 전에 전체 페이지가 구문 분석될 때까지 스크립트가 지연됩니다.

example1
null
example2
null

로그인 후 복사

defer 속성이 추가되지 않은 경우 콘솔에서 다음과 같은 결과가 출력되는 것을 확인할 수 있습니다.

example1
<div id="content">这里页面的内容</div>
example2
<div id="content">这里页面的内容</div>

로그인 후 복사

요소에 defer 속성을 추가하면 결과가 Javascript 코드가 표시되지 않는 것을 확인할 수 있습니다. p 요소의 내용이 로드될 때까지.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
</head>
<body>
    <div id="content">这里页面的内容</div>
</body>
</html>

로그인 후 복사

스크립트의 비동기 로딩

스크립트의 비동기 로딩에는 스크립트 요소의 비동기 속성이 필요합니다. 이는 둘 다 스크립트 요소의 로딩 동작을 수정하는 것과 유사합니다. 페이지 로딩을 차단하면 문서 렌더링이 차단되며 비동기 속성이 있는 스크립트는 defer 속성과 달리 실행 순서를 보장할 수 없습니다.

즉, example2.js의 코드가 example1.js의 코드보다 먼저 실행될 수 있으므로 async 속성을 사용할 때는 두 js 간의 상호 의존성을 피하세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
</head>
<body>
    <noscript>
        当前浏览器不支持 Javascript 请更换浏览器
    </noscript>
</body>
</html>

로그인 후 복사

noscript 요소

초기 브라우저에는 또 다른 문제가 있습니다. 즉, 브라우저가 Javascript 언어를 지원하지 않을 때 페이지 콘텐츠를 표시하는 방법에 대한 해결책은 브라우저에서 사용할 수 있는 noscript 요소를 만드는 것입니다. 자바스크립트를 지원하지 않습니다. 콘텐츠는 브라우저에 표시되며, 자바스크립트를 지원하지 않는 브라우저에서만 표시됩니다.

rrreee

HTML의 스크립트 태그에 대한 자세한 설명(코드 포함)

script 요소

<!DOCTYPE html> <html> <head> <title></title> <script src="example1.js"></script> <script src="example2.js"></script> </head> <body> <div>页面的内容区域</div> </body> </html>
로그인 후 복사

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script> </head> <body> <div id="content">这里页面的内容</div> </body> </html>
로그인 후 복사

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script> </head> <body> <noscript> 当前浏览器不支持 Javascript 请更换浏览器 </noscript> </body> </html>
로그인 후 복사

HTML의 스크립트 태그에 대한 자세한 설명(코드 포함)

script 요소

<!DOCTYPE html> <html> <head> <title></title> <script src="example1.js"></script> <script src="example2.js"></script> </head> <body> <div>页面的内容区域</div> </body> </html>로그인 후 복사

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script> </head> <body> <div id="content">这里页面的内容</div> </body> </html>로그인 후 복사

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script> </head> <body> <noscript> 当前浏览器不支持 Javascript 请更换浏览器 </noscript> </body> </html>로그인 후 복사

<!DOCTYPE html> <html> <head> <title></title> <script src="example1.js"></script> <script src="example2.js"></script> </head> <body> <div>页面的内容区域</div> </body> </html>
로그인 후 복사

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script> </head> <body> <div id="content">这里页面的内容</div> </body> </html>
로그인 후 복사

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script> </head> <body> <noscript> 当前浏览器不支持 Javascript 请更换浏览器 </noscript> </body> </html>
로그인 후 복사