HTML에 Javascript 파일을 추가하는 가장 좋은 방법
2024년 11월 16일에 게시됨
검색:936
HTML에는 JavaScript 파일을 포함하는 여러 가지 방법이 있습니다. 네 가지 방법과 그 단점을 설명하고 마지막으로 가장 좋은 방법을 강조하겠습니다.
1.
의
Document
이 접근 방식에서는 본문 내부의 HTML보다 먼저 로드된 코드 자바스크립트 파일을 구문 분석하는 동안 JavaScript가 아직 구문 분석되지 않은 본문의 요소를 조작하려고 하면 HTML 콘텐츠가 완전히 완료되지 않았기 때문에 오류가 발생할 수 있습니다. 짐을 실은.
이 차단 동작은 페이지 나머지 부분의 구문 분석 및 렌더링을 지연시켜 성능과 사용자 경험에 영향을 미칩니다.
2.
의(끝 부분)
Document
이 접근 방식에서는 JavaScript가 로드 및 실행되기 전에 HTML이 완전히 구문 분석되어 DOM 요소 누락과 관련된 오류를 방지합니다. 이 접근 방식은 모두 좋지만 HTML 구문 분석과 JavaScript 로딩이 순차적으로 발생하므로 두 프로세스가 서로 다른 시간에 발생하므로 전체적으로 시간이 더 오래 걸릴 수 있습니다
3.
의
Document
이 접근 방식에서는 JavaScript를 비동기식으로 만들어 HTML 로드를 차단하지 않습니다. HTML 구문 분석과 JavaScript 로딩은 모두 병렬로 발생합니다. 그러나 HTML이 완전히 구문 분석되기 전에 JavaScript가 실행되고 js가 아직 로드되지 않은 html 요소를 조작하려고 하면 오류가 발생할 수 있습니다.
참고: — 이 접근 방식은 시간을 절약할 수 있지만 html,js를 동시에 로드하지만 오류에 더 취약합니다
4.
의
Document
이 접근 방식은 HTML 구문 분석과 JavaScript 로드가 동시에 발생하는 세 번째 접근 방식과 유사합니다. 그러나 JavaScript가 먼저 로드되더라도 브라우저는 스크립트를 실행하기 전에 HTML이 완전히 구문 분석될 때까지 기다립니다
요약: 최선의 접근 방식
가장 좋은 방법은 일반적으로 다음을 사용하는 것입니다.
왜:
- HTML 구문 분석을 차단하지 않습니다(비차단 다운로드).
- DOM이 완전히 구문 분석된 후 스크립트가 실행되도록 보장하여 DOM 요소를 조작하는 데 더 안전합니다.
- 지연된 스크립트가 여러 개인 경우 스크립트 실행 순서를 유지합니다.
스크립트가 DOM 콘텐츠(예: 추적 스크립트 또는 광고)와 독립적인 경우 더 나은 성능을 위해 비동기를 사용할 수 있습니다.
릴리스 선언문
이 기사는 https://dev.to/sagar7170/best-way-to-add-javascript-file-in-html-328?1에 복제되어 있습니다. 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제하시기 바랍니다. 그것
최신 튜토리얼
더>
-
macOS의 Django에서 \"부적절하게 구성됨: MySQLdb 모듈 로드 오류\"를 수정하는 방법은 무엇입니까?MySQL이 잘못 구성됨: 상대 경로 문제Django에서 python prepare.py runserver를 실행할 때 다음 오류가 발생할 수 있습니다:ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Libra...프로그램 작성 2024년 11월 16일에 게시됨 -
Python을 사용하여 생성 날짜별로 디렉터리의 파일 목록을 정렬하려면 어떻게 해야 합니까?Python을 사용하여 생성 날짜별로 정렬된 디렉토리 목록 얻기디렉토리를 탐색할 때 정렬된 내용 목록을 가져와야 하는 경우가 종종 있습니다. 생성 날짜와 같은 특정 기준에 따라. Python에서는 이 작업을 쉽게 수행할 수 있습니다.권장 접근 방식:이를 달성하려면 Py...프로그램 작성 2024년 11월 16일에 게시됨
-
초기 페이지 로드 후 Less.js 규칙을 동적으로 로드하려면 어떻게 해야 합니까?Less.js 규칙을 동적으로 로드Less.js를 웹사이트에 통합하면 웹사이트의 스타일 기능이 향상될 수 있습니다. 그러나 한 가지 제한 사항은 Less.js 스크립트 전에 모든 LESS 스타일시트를 로드해야 한다는 것입니다. 이는 초기 페이지 로드 후 특정 스타일을 ...프로그램 작성 2024년 11월 16일에 게시됨
-
PHP에서 브라우저 캐시를 지우는 방법은 무엇입니까?PHP에서 브라우저 캐시 지우기브라우저가 최신 버전을 다시 로드하도록 브라우저 캐시를 지워야 하는 상황이 발생할 수 있습니다. 귀하의 웹 페이지. 이는 웹 애플리케이션을 개발 중이고 사용자가 최신 변경 사항을 볼 수 있는지 확인하려는 경우 특히 유용합니다.브라우저 캐시...프로그램 작성 2024년 11월 16일에 게시됨
-
MySQL을 사용하여 오늘 생일을 가진 사용자를 어떻게 찾을 수 있습니까?MySQL을 사용하여 오늘 생일이 있는 사용자를 식별하는 방법MySQL을 사용하여 오늘이 사용자의 생일인지 확인하려면 생일이 일치하는 모든 행을 찾는 것이 필요합니다. 오늘 날짜. 이는 UNIX 타임스탬프로 저장된 생일을 오늘 날짜와 비교하는 간단한 MySQL 쿼리를 ...프로그램 작성 2024년 11월 16일에 게시됨
-
MySQL PDO 쿼리에서 BindParam과 함께 LIKE를 올바르게 사용하는 방법은 무엇입니까?MySQL PDO 쿼리에서 BindParam과 함께 LIKE를 올바르게 사용MySQL PDO 쿼리에서 BindParam을 사용하여 LIKE 검색을 수행하려고 할 때 다음을 사용하는 것이 중요합니다. 정확한 결과를 보장하려면 올바른 구문을 사용하세요.최적화된 구문bind...프로그램 작성 2024년 11월 16일에 게시됨
-
Selenium 및 Python을 사용하여 Chrome에서 사용자 에이전트를 변경하는 방법은 무엇입니까?Selenium을 사용하여 Chrome에서 사용자 에이전트 변경특정 브라우저 구성이 필요한 작업을 자동화할 때 Chrome에서 사용자 에이전트를 변경하는 것이 필수적입니다. 이는 Python과 함께 Selenium을 사용하여 수행할 수 있습니다.사용자 에이전트 스위치를...프로그램 작성 2024년 11월 16일에 게시됨
-
`if` 문 너머: 명시적 `bool` 변환이 있는 유형을 형변환 없이 사용할 수 있는 다른 곳은 어디입니까?형변환 없이 허용되는 bool로의 상황별 변환귀하의 클래스는 bool로의 명시적인 변환을 정의하여 해당 인스턴스 't'를 조건문에서 직접 사용할 수 있도록 합니다. 그러나 이 명시적 변환은 다음과 같은 질문을 제기합니다. 캐스트 없이 't'...프로그램 작성 2024년 11월 16일에 게시됨
-
.then(function(a){ return a; }) 는 Promise에 대한 No-Op입니까?.then(function(a){ return a; })는 Promise에 대한 No-Op입니까?Promise의 영역에서 , .then(function(a){ return a; }) 이 무연산인지에 대한 질문이 발생했습니다. 이 흥미로운 쿼리를 살펴보겠습니다.예, 일반...프로그램 작성 2024년 11월 16일에 게시됨
-
Matplotlib에서 사용자 정의 색상 맵을 만들고 색상 눈금을 추가하는 방법은 무엇입니까?사용자 정의 컬러맵 생성 및 컬러 스케일 통합자신만의 컬러맵을 생성하려면 matplotlib.colors 모듈에서 LinearSegmentedColormap 함수를 활용하는 것이 좋습니다. 이 접근 방식은 더 간단하고 지속적인 색상 스케일을 생성합니다.import nu...프로그램 작성 2024년 11월 16일에 게시됨
-
PHP에서 클라이언트의 현지 시간을 얻는 방법은 무엇입니까?PHP에서 클라이언트의 현지 시간 검색PHP 애플리케이션에서 날짜 및 시간으로 작업할 때 PHP는 주로 다음 위치에서 작동한다는 점을 기억하는 것이 중요합니다. 서버 측. 따라서 기본적으로 date()와 같은 시간 관련 함수는 서버의 위치와 시간대를 기준으로 시간을 제...프로그램 작성 2024년 11월 16일에 게시됨
-
모든 Variadic 함수는 'float' 인수를 'double'로 승격합니까?가변 함수에서 Float 인수를 Double로 승격이전 논의에서 printf()가 float 인수를 다음으로 승격한다는 점에 주목했습니다. 그것을 받아들이기 전에 두 배. 이것은 질문을 제기합니다: 모든 가변 함수가 이 승격을 수행합니까?Variadic 인수 승격예, ...프로그램 작성 2024년 11월 16일에 게시됨
-
MySQL 테이블 역설: 존재하면서도 존재하지 않는 테이블을 어떻게 수정합니까?슈뢰딩거의 MySQL 테이블: 실존적 수수께끼데이터베이스 관리 영역에서 MySQL 테이블은 역설적인 존재를 보일 수 있습니다. 당신이 직면한 것처럼, 존재하면서도 존재하지 않는 것처럼 보이는 테이블의 수수께끼는 좌절스러운 도전을 제기할 수 있습니다. 근본적인 문제를 조...프로그램 작성 2024년 11월 16일에 게시됨
-
프로그래밍에서 언제 트리플 포인터가 필요합니까?프로그래밍의 삼중 포인터다양한 프로그래밍 언어에서 포인터는 메모리 관리 및 간접 참조를 위한 강력한 도구 역할을 합니다. 그러나 삼중 포인터(char***)와 같은 구성으로 이어지는 여러 수준의 포인터 역참조가 필요한 경우는 언제입니까?삼중 포인터의 목적과 장점일반 포...프로그램 작성 2024년 11월 16일에 게시됨
-
비밀번호 해싱을 위해 MySQL의 PASSWORD() 함수를 사용해야 합니까?MySQL 비밀번호 기능 고려 사항애플리케이션의 비밀번호를 해싱할 때 최선의 접근 방식을 결정하는 것이 중요합니다. MySQL의 비밀번호 기능은 특히 이와 관련이 있지만 그 사용법에 대한 논쟁이 제기되었습니다.MySQL 비밀번호 기능의 장점과 단점MySQL의 비밀번호 ...프로그램 작성 2024년 11월 16일에 게시됨
중국어 공부
- 1 "걷다"를 중국어로 어떻게 말하나요? 走路 중국어 발음, 走路 중국어 학습
- 2 "비행기를 타다"를 중국어로 어떻게 말하나요? 坐飞机 중국어 발음, 坐飞机 중국어 학습
- 3 "기차를 타다"를 중국어로 어떻게 말하나요? 坐火车 중국어 발음, 坐火车 중국어 학습
- 4 "버스를 타다"를 중국어로 어떻게 말하나요? 坐车 중국어 발음, 坐车 중국어 학습
- 5 운전을 중국어로 어떻게 말하나요? 开车 중국어 발음, 开车 중국어 학습
- 6 수영을 중국어로 뭐라고 하나요? 游泳 중국어 발음, 游泳 중국어 학습
- 7 자전거를 타다 중국어로 뭐라고 하나요? 骑自行车 중국어 발음, 骑自行车 중국어 학습
- 8 중국어로 안녕하세요를 어떻게 말해요? 你好중국어 발음, 你好중국어 학습
- 9 감사합니다를 중국어로 어떻게 말하나요? 谢谢중국어 발음, 谢谢중국어 학습
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
