지연을 활용하여 JavaScript를 최적으로 로드합니다.

15243 단어 beginnersprogrammingjavascriptwebdev
이것은 지금까지 가장 중요하고 놀라운 기능이며 지금부터 JavaScript 파일을 로드하고 가져오는 방법이므로 작은 데모를 시작하겠습니다.

최신 웹 사이트에서 스크립트는 HTML보다 heavier 경향이 있습니다. 다운로드하고 처리하는 데 더 오래 걸립니다. 브라우저가 HTML을 로드하고 script 태그를 만날 때마다 스크립트를 즉시 로드해야 하기 때문에 DOM(Document Object Model) 생성을 계속할 수 없습니다. 외부 스크립트도 유사하게 처리됩니다. 스크립트를 다운로드한 다음 나머지 HTML 구문 분석을 계속하기 전에 다운로드한 스크립트를 실행합니다.

따라서 처음에는 index.html 와 script.js 라는 두 개의 파일을 만들고 index.html 파일 내부에 HTML snippets 확장자를 사용하여 간단한 상용구 코드를 추가하거나 간단히 복사할 수 있습니다. 아래에 언급된 코드.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script: defer</title>
</head>
<body>
</body>
</html>


이제 본문 내부에 텍스트가 있는 간단한 버튼을 만든 다음 머리 내부에 스크립트 태그를 추가하고 방금 만든 script.js 파일을 가져옵니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script: defer</title>
    <script src="./scripts.js"></script>
</head>

<body>
    <button>Hello There!</button>
</body>

</html>


그런 다음 라이브 서버가 있는 브라우저에서 색인 파일을 열면 매우 기본적으로 보이는 버튼이 있음을 알 수 있습니다.



버튼을 조작하는 간단한 스크립트를 추가해 보겠습니다. 다음 JavaScript 코드를 복사하여 script.js 파일에 붙여넣습니다.

// scripts.js
const body = document.querySelector('body');
const btn = document.querySelector('button');

btn.style.display = 'block';
btn.style.position = 'absolute';
btn.style.left = '50%';
btn.style.top = '50%';
btn.style.transform = 'translate(-50%, -50%)';
btn.style.width = '200px';
btn.style.height = '100px';
btn.style.fontSize = '2rem';
btn.style.fontFamily = 'sans-serif';
btn.style.borderRadius = '10%';
btn.style.backgroundColor = '#8661d1';
btn.style.color = '#fff';
btn.style.border = 'none';
btn.style.outline = 'none';
btn.style.cursor = 'pointer';
btn.style.boxShadow = '0 0 10px #000';
btn.style.transition = 'all 0.5s ease-in-out';
btn.addEventListener('mouseenter', () => {
    btn.style.backgroundColor = '#FD5252';
});
btn.addEventListener('mouseleave', () => {
    btn.style.backgroundColor = '#8661d1';
});
btn.addEventListener('click', () => {
    body.style.backgroundColor = '#FD5252';

    setTimeout(() => {
        body.style.backgroundColor = '#fff';
    }, 1000);
});
btn.addEventListener('transitionend', () => {
    btn.style.backgroundColor = '#8661d1';
});


따라서 이 스크립트에서 먼저 body 를 선택한 다음 button 를 선택한 다음 해당 버튼에 다양한 스타일을 적용한 다음 일부 이벤트 리스너를 추가하고 마지막으로 해당 버튼이 수행할 작업을 지정했습니다. 특정 이벤트에서 우리 버튼은 JavaScript의 절대적인 힘을 사용하여 완전히 제어되었습니다.



브라우저를 새로고침하면 사이트에 변경 사항이 없음을 알 수 있습니다. 스크립트가 헤드에 있기 때문입니다. 이는 일반적으로 JavaScript가 본문 자체보다 훨씬 먼저 로드되고 있음을 의미하기 때문에 좋지 않습니다. 이 문제를 해결하려면 defer 태그 안에 script를 추가하기만 하면 됩니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script: defer</title>
    <script src="./scripts.js" defer></script>
</head>

<body>
    <button>Hello There!</button>
</body>

</html>


우리는 단순히 위의 코드에서 스크립트를 연기했습니다. 즉, 스크립트는 JavaScript를 실행하기 전에 전체 본문이 로드되도록 보장합니다. 따라서 이 작업을 완료하면 index.html 파일이 다음과 같아야 합니다.

이제 브라우저로 이동하여 다시 로드하면 이와 유사한 내용이 표시됩니다.



이것을 제거하면defer 버튼이 작동하지 않는다는 것을 알게 될 것입니다. 대신 cannot read property style of null 라는 오류가 발생합니다.



스크립트 태그에 도달하면 나머지 HTML 구문 분석을 중지하지만 스크립트로 진행하고 그 후에만 구문 분석을 계속하기 때문에 이 오류가 발생합니다. 즉, 버튼이 페이지에 추가되지 않았음을 의미합니다. 그러나 스크립트 태그에 defer를 입력하면 모든 JavaScript를 다운로드한 다음 모든 것을 계속 렌더링하므로 버튼을 먼저 렌더링한 다음 스크립트가 다운로드되면 전체 페이지 렌더링을 시작합니다.

사람들은 자주 스크립트를 하단에 배치하는데 이는 잘 작동하지만 브라우저가 전체 페이지를 렌더링할 때까지 스크립트 다운로드가 시작되지 않아 웹 사이트의 로딩 속도가 느려지고 사이트를 무질서하고 매력적이지 않게 만듭니다.

따라서 단순히 JavaScript를 헤드에 배치하고 defer가 설정되어 있는지 확인하면 DOM 이벤트가 로드될 때까지 기다릴 필요가 없으며 JavaScript를 끝에 배치하는 불편한 특성을 처리할 필요가 없습니다. 지루하고 끔찍한 몸.

따라서 지금부터 스크립트를 head 에 유지하십시오. 그냥 defer 하기만 하면 스크립트를 맨 아래에 놓는 것과 동일한 작업을 수행하지만 웹 페이지나 웹 사이트를 훨씬 더 빠르게 로드하는 데 도움이 됩니다.
django-allauth 초보자 가이드
kustomize로 Tekton 작업의 단계를 재사용하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage