브라우저가 javascript non-blockingly_javascript 기술을 로드하도록 하는 여러 가지 방법 요약

스크립트가 올바르게 실행되고 레이아웃이 렌더링되는지 확인하기 위해 브라우저는 페이지의 후속 콘텐츠 렌더링과 다른 리소스 로드를 브라우저가 로드하고 실행할 때까지 완전히 차단합니다.

페이지 로딩 과정에서 콘텐츠가 점진적으로 표시될 수 있다면 좋은 사용자 경험을 위해 매우 중요합니다. 일반적으로 우리는wondow 객체의 onload 이벤트 처리 기능에서도 작업을 수행합니다. 그러나 로딩 및 렌더링을 차단하는 스크립트의 특성으로 인해 한편으로는 페이지 로딩 시간이 늘어나고 onload 이벤트의 트리거가 지연됩니다. 반면에 사용자가 피드백을 요청하는 시간도 지연됩니다. 이를 위해서는 브라우저가 비차단 방식으로 외부 스크립트를 로드할 수 있도록 몇 가지 방법을 사용해야 합니다.

1 XMLHttpRequest 객체를 사용하여 외부 스크립트를 비동기적으로 로드합니다.

이 방법의 장점은 더 적은 수의 브라우저 사용 중 표시기를 트리거하고 모든 최신 브라우저에서 지원할 수 있다는 것입니다. 단점은 브라우저의 도메인 간 보안 메커니즘으로 인해 동일한 도메인의 외부 스크립트만 로드되도록 허용할 수 있다는 것입니다. 또한 여러 스크립트 사이에 종속성이 있는 경우 관련 대기열 관리 스크립트를 작성하여 여러 스크립트의 실행 순서를 제어해야 합니다.

2 Javascript를 사용하여 외부 스크립트에 대한 SCRIPT 요소를 동적으로 생성

구현 방법은 HTML에서 외부 스크립트를 참조하는 데 필요한 srcript 요소를 Javascript를 사용하여 동적으로 생성하고 생성된 srcript에 src 속성을 부여하는 것입니다. 요소에 해당 외부 스크립트의 URL을 설정하여 다른 리소스와 병렬로 로드합니다.

넷째, iframe을 사용하여 외부 스크립트 로드

이 방법을 사용하려면 새 HTML 페이지를 사용하여 외부 스크립트를 HTML 페이지의 인라인 스크립트로 변환한 다음 iframe을 사용하여 기본 페이지에 스크립트가 포함된 HTML 페이지를 로드해야 합니다. 코드의 일부를 리팩토링하여 메인 페이지의 DOM 요소에 액세스합니다. 게다가 IFRAM은 상대적으로 비용이 많이 드는 DOM 요소이며 도메인 간 제한도 있습니다.

5 Script 태그의 defer 속성 사용

이 방법은 외부 스크립트를 참조하는 기존 방식으로 SCRIPT 태그에 defer 속성을 적용하기만 하면 외부 스크립트의 비차단 병렬 로딩을 구현하는 가장 간단한 방법입니다. 그러나 이러한 방식으로 외부 스크립트를 로드하는 경우 단점은 일부 브라우저에서만 병렬 로드를 구현하므로 호환성이 부족하다는 것입니다.

document.write 스크립트 태그 6개

이 방법은 구현이 비교적 간단하며, 자바스크립트의 document.write 메소드를 직접 사용하여 외부 스크립트를 참조하는 스크립트 태그의 문자열을 HTML로 출력하는 방식입니다. 단점은 방법 5와 마찬가지로 호환성이 부족하다는 것입니다.

요약

위의 방법은 도메인을 교차해야 하는지 여부와 같은 특정 요구 사항을 기반으로 해야 합니까? 스크립트가 순서대로 실행되는지 확인해야 합니까? 더 많거나 더 적은 수의 브라우저에 대해 통화 중 표시기를 트리거해야 합니까? 호환성뿐만 아니라 지원하는 코드의 양도 어떤 방식이 적합한지 종합적으로 고려하여 결정될 예정입니다.