1. 정적 로딩 페이지 렌더링 중에 CSS와 이미지 리소스 파일을 차단 없이 병렬로 다운로드할 수 있습니다. IE8 및 FF에서는 JS의 병렬 다운로드도 지원될 수 있습니다. 페이지의 JS 다운로드가 가속화되지만 JS에 의한 페이지 렌더링 차단은 여전히 존재합니다. JS가 로드된 경우에만 페이지의 나머지 부분이 계속 렌더링될 수 있습니다. Head 부분에 배치된 스크립트는 최악입니다. 페이지의 경우 Head 부분이 필요하고 이후 부분에도 필요하기 때문입니다. Head 부분이 로드되지 않으면 Body 부분이 파싱되기 전에 시작되지 않습니다. 구문 분석하면 페이지가 비어 있게 됩니다. 페이지의 어느 부분에 정적 스크립트가 배치되어 있든 차단됩니다. 브라우저 구현 관점에서는 JS 코드의 페이지 요소를 수정하고 Dom 구조에 영향을 미치는 것이 전적으로 가능하기 때문에 이해하기 쉽습니다. . JS의 브라우저 동작은 예측할 수 없기 때문에 렌더링을 계속하기 전에 이전 스크립트가 로드될 때까지 기다려야 합니다. 따라서 가장 좋은 방법은 페이지
하단에 스크립트를 배치하는 것입니다. JS 로딩이 프런트엔드 성능에 미치는 영향 Yahoo의 최적화 원칙 중 하나는 HTTP 요청 수를 줄이고, JS를 압축하고, JS를 병합하고, JS 수를 줄이는 것입니다. 비즈니스에 로드해야 하는 독립적인 모듈형 JS가 많은 경우 온라인 패키징 솔루션을 고려할 수 있습니다.
이 코드는 스크립트 태그를 생성하여 문서에 삽입합니다. 중요한 점은 이 스크립트가 비동기식으로 로드되고 페이지 렌더링 프로세스에 영향을 주지 않으며 페이지 콘텐츠 표시를 차단하지 않는다는 것입니다. 이 방법은 페이지 리소스 로딩을 차단하지는 않지만 다른 스크립트를 차단할 수 있습니다. 이와 관련하여 브라우저마다 성능이 매우 다를 수 있습니다. 외부에서 동적으로 도입되는 다양한 브라우저에서 JS 파일의 로딩 순서를 참조하세요. 일관성이 없다
따라서 스크립트를 동적으로 로드할 때 집중해야 할 문제 중 하나는 동적으로 로드된 JS 스크립트의 인터페이스 종속성입니다. 이 문제에 대한 해결책은 복잡하지 않으며, 비즈니스 실현의 필요에 따라 로드된 스크립트의 로드 상태를 추적하는 것입니다. ReadyState 속성은 IE가 아닌 브라우저에서 이를 지원하며 스크립트가 로드된 후에 onload 메소드가 호출되는 경우 로딩 상태를 결정하는 데 사용됩니다.