js 프리로딩/지연 로딩_javascript 기술에 대한 간략한 분석

프리 로더 사전 로드에는 일반적으로 xhr과 동적으로 노드를 삽입하는 두 가지 일반적인 방법이 있습니다. 동적으로 노드를 삽입하는 것은 가장 간단하고 가장 널리 사용되는 비동기 로딩 방법입니다. 그러면 동적으로 삽입된 노드 방법을 사용하여 로드된 파일은 로딩 직후에 실행되며, 한편으로는 자바스크립트 실행이 브라우저 js 실행 프로세스를 차지하게 됩니다. 손으로 페이지 구조를 변경할 수 있으며 CSS를 실행하면 전체 페이지가 변경될 가능성이 높습니다. xhr 메소드는 동일한 도메인의 제한으로 인해 스크립트를 실행하지 않지만

레이지 로더 방법은 사진이 많은 일부 웹사이트에서 매우 유용합니다. 브라우저의 표시 영역 외부에 있는 사진은 사용자가 페이지를 해당 위치로 스크롤할 때까지 로드되지 않으므로 사진이 많은 웹사이트의 경우 웹 페이지가 길수록 더 빠르게 로드되고 서버 대역폭을 절약할 수 있습니다. jQuery 플러그인에는 이 기능을 구현하는 플러그인도 있습니다.

이 기술은 Tencent의 QQ 공간과 Weibo에서 사용되며, 방문 횟수가 많은 웹 사이트에서는 서버에 대한 부담을 상대적으로 줄일 수 있으며 사용자가 표시 영역 및 다음 콘텐츠에 액세스할 때만 요청이 이루어집니다. 전체 페이지를 한 번에 다운로드하는 대신 사용자는 다운로드 프로세스 중에 콘텐츠가 표시되기를 기다리고 있습니다.

IE에서 새 Image().src를 사용하여 파일을 미리 로드하세요.
다른 브라우저는 동적으로 삽입된 document.createElement('object') 태그를 사용하여 로딩을 완료합니다.

설명:
1. ff에서 new Image().src를 사용할 수 없는 이유는 ff가 이미지에 대해 별도의 캐시를 구현하기 때문입니다. 동시에 사파리와 크롬은 캐시되지 않는 것 같습니다.
2. 동적으로 삽입된 객체 태그는 로드를 트리거하기 위해 헤드가 아닌 부분에 삽입되어야 합니다.
3. ie7 및 ie8에서는 동적 개체를 사용하여 일부 코드를 통해 파일을 로드할 수도 있습니다.