스크립트 로딩을 최적화하는 방법

헤드나 바디에서 단순히 스크립트를 참조하면 DOM이 변경될지 알 수 없으므로 다운로드 및 실행 중에 스크립트가 페이지 렌더링을 완전히 차단합니다.

스크립트가 머리나 몸의 중앙에 있으면 빈 페이지가 나타날 가능성이 매우 높으며 사용자 상호작용이 불가능하며 사용자 경험이 매우 좋지 않습니다.

자바스크립트 파일을 병렬로 다운로드할 수 있더라도 다운로드 프로세스는 이미지 및 기타 리소스 다운로드에 영향을 미칩니다.

먼저 해야 할 일은 다음과 같습니다.

스크립트 태그를 본문 하단에 넣습니다.

3방향 핸드셰이크와 같은 HTTP 요청을 수행할 때 추가 성능 오버헤드가 있으므로 다음을 시도해야 합니다. HTTP 요청을 최대한 줄이세요.

javascript 파일을 하나로 병합합니다.

한 번의 요청으로 여러 javascript 파일을 로드합니다.

하지만 위의 방법으로는 문제가 해결되지 않습니다. 큰 javascript 파일은 스크립트를 다운로드하고 실행합니다. 이 시간 동안 내부에서는 브라우저가 다른 작업을 수행할 수 없습니다. 이를 위해서는 비차단 스크립트가 필요합니다. 즉, 페이지가 로드된 후에만 JavaScript 코드가 로드됩니다. 즉, 창 개체의 로드 이벤트가 트리거된 후에 스크립트가 다운로드됩니다.

1 지연 스크립트

defer: 우선 스크립트를 추가하면 이 스크립트가 DOM을 변경하지 않고 페이지가 로드된 후에 실행될 수 있음을 브라우저에 알리기 때문에 스크립트가 DOM을 변경하지 않는지 확인해야 합니다. . 이 속성을 스크립트 태그에 추가하면 파일을 다른 리소스와 동시에 다운로드할 수 있습니다. IE는 IE10부터 시작하는 지연을 지원하지 않습니다

async: 지연과의 차이점은 다운로드가 완료된 후에 실행되지만 페이지가 로드될 때까지 지연은 실행되지 않는다는 것입니다.

2 동적 스크립트

는 동적으로 실행됨을 의미합니다. 적절한 경우 스크립트 태그 생성 페이지에 삽입할 때 이 방법을 사용하여 필요에 따라 파일을 로드할 수 있으며 스크립트 로드 순서를 지정할 수도 있습니다.

3 스크립트 로딩 기능

다른 스크립트를 로딩하려면 스크립트 태그에 있는 함수를 호출하세요

물론, 사용할 수 있는 지연 로딩 라이브러리도 있습니다.

위 내용은 스크립트 로딩을 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!