HTML에서 JavaScript 스크립트 파일을 로드하는 일반적인 방법 요약-JS 튜토리얼-php.cn

브라우저에서 (내장된) 태그를 발견하면 현재 브라우저는 JavaScript가 페이지 콘텐츠를 수정할지 여부를 알 수 없습니다. 따라서 브라우저는 이때 페이지 처리를 중지하고 먼저 JavaScript 코드를 실행한 다음 계속해서 페이지를 구문 분석하고 렌더링합니다. src 속성을 사용하여 javaScript(즉, 외부 링크 javaScript)를 추가하는 과정에서도 동일한 상황이 발생합니다. 브라우저는 먼저 외부 링크 파일에 있는 코드를 다운로드하는 데 시간을 소비한 다음 이를 구문 분석하고 실행해야 합니다. 이 과정에서 페이지 렌더링과 사용자 상호 작용이 완전히 차단됩니다.

즉, 브라우저가 태그(인라인 또는 외부 링크)를 구문 분석할 때마다 브라우저는 (단독으로) 태그의 JavaScript 코드 다운로드, 구문 분석 및 실행에 우선순위를 부여하여 다운로드를 차단합니다. 모든 후속 페이지 콘텐츠의 렌더링.

방법 1: 기존 접근 방식

가장 전통적인 방법은 헤드 태그에 태그를 삽입하는 것입니다.

그러나 이러한 기존 접근 방식에는 심각한 성능 문제가 숨겨져 있습니다. 위의 태그 특성 설명에 따르면, 이 예에서는 브라우저가 태그를 구문 분석할 때 브라우저가 그 이후의 콘텐츠 구문 분석을 중지하고 먼저 스크립트 파일을 다운로드합니다. 이 코드는 후속 test.css 스타일 파일과 태그를 로드할 수 없음을 의미합니다. 따라서 JavaScript 코드가 완전히 실행될 때까지 페이지는 비어 있습니다.

로그인 후 복사 방법 2: 전통적인 접근 방식

태그가 후속 콘텐츠 로드를 차단하므로 모든 페이지 콘텐츠 뒤에 태그를 추가하면 이러한 나쁜 상황을 피할 수 있습니까? 페이지의 나머지 부분 다운로드에 미치는 영향을 최소화하려면 모든 태그를 태그 하단에 최대한 가깝게 배치하세요.

IE8+ 브라우저에서는 스크립트 병렬 다운로드가 구현되었지만 일부 브라우저에서는 (스크립트 파일이 태그 하단에 배치되어 있어도) 페이지의 스크립트가 여전히 차례로 로드됩니다. 따라서 다음 방법이 필요합니다. 즉, 동적으로 스크립트를 로드하는 것입니다.

방법 3: 동적 스크립트

DOM(문서 개체 모델)을 사용하면 페이지의 거의 모든 위치에서 만들 수 있습니다.

var script = document.createElement('script'); script.type = 'text/javaScript'; script.src = 'file1.js'; document.getElementsByTagName('head')[0].appendChild(script); 로그인 후 복사 위 코드는 외부 링크 file1의 태그를 동적으로 생성하여 이 기술의 핵심은 다음과 같습니다.

다운로드가 언제 시작되더라도 파일의 다운로드 및 실행 프로세스는 페이지의 다른 프로세스(스크립트 로딩 포함)를 차단하지 않습니다. 그러나 이 방법에도 결함이 있습니다. 이런 방식으로 로드된 스크립트는 다운로드가 완료된 후 즉시 실행됩니다. 즉, 여러 스크립트 간의 실행 순서를 보장할 수 없습니다(Firefox 및 Opera 제외). 스크립트가 다른 스크립트에 종속되면 오류가 발생할 가능성이 높습니다. 예를 들어 jQuery 코드를 작성하려면 jQuery 라이브러리를 가져와야 합니다. 하지만 작성한 jQuery 코드 파일이 먼저 다운로드되어 즉시 실행될 가능성이 높습니다. 'jQuery는 그렇지 않습니다. 정의됨' 등이 있습니다. 현재 jQuery가 정의되지 않았기 때문입니다. 이에 따라 다음과 같이 개선되었습니다.

loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){}); 로그인 후 복사 file2는 file1이 로드된 후 로딩을 시작하여 file1이 file2가 실행되기 전에 준비됩니다. File1과 file3은 병렬로 다운로드되며 서로 영향을 주지 않습니다. loadScript 함수는 충분히 좋지만 여전히 만족스럽지 못한 측면이 있습니다. 이 코드를 분석함으로써 우리는 loadScript 함수의 순차적 로딩이 스크립트 로딩을 차단하여 구현된다는 것을 알 수 있습니다(위의 빨간색 텍스트에서 지적한 바와 같이). 우리가 실제로 달성하고자 하는 것은 스크립트가 동기적으로 다운로드되고 해당 순서에 따라 실행되는 것입니다. 즉, 병렬로 로드되고 순차적으로 실행됩니다.

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

HTML에서 JavaScript 스크립트 파일을 로드하는 일반적인 방법 요약