자바스크립트 프리로딩 이미지, CSS, js_javascript 기술의 방법과 예시 소개-JS 튜토리얼-php.cn

미리 로드하면 웹페이지가 사용자에게 더 빨리 표시될 수 있다는 장점이 있습니다. 단점은 불필요한 요청이 늘어날 수 있다는 것입니다(단, 이미지, CSS, js와 같은 정적 파일은 캐시될 수 있습니다). 사용자가 방문하는 페이지에는 Node.js가 미리 로드되어 있으며, 사용자는 페이지를 훨씬 빠르게 열어 사용자 경험을 향상시킬 수 있습니다. 일부 큰 사진을 사용하여 표시할 때 큰 사진을 미리 로드하는 것은 사진을 사용자에게 더 빨리 표시할 수 있는 매우 좋은 방법입니다. 말할 것도 없이, 프론트 엔드 공성 마스터로서 모두가 알고 있는 사실입니다. 제가 수행한 테스트와 결과를 공유하겠습니다.

먼저 알아야 할 서버에서 반환된 상태 코드에 대해 이야기해 보겠습니다.
status-code: 200 - 클라이언트 요청이 성공했습니다
status-code: 304 - 파일이 이미 브라우저에 있습니다. 서버는 클라이언트에게 버퍼링된 문서를 계속 사용할 수 있음을 알려줍니다.
이 글은 파일이 캐시되었는지 확인하는 테스트입니다. 304가 반환되는지 확인하는 데 사용됩니다.

다음은 주로 new Image(), object 및 iframe을 포함하여 다양한 브라우저에서 img/js/css를 로드하여 여러 가지 사전 로드 방법을 테스트하는 것입니다. 다음 로딩 테스트에 사용된 js, css, 이미지 파일은 여러 포털 사이트에서 찾았습니다(왜 몇 개 찾았나요? 특수한 상황을 최대한 많이 테스트하기 위한 것이었고 실제로 테스트 도중에 마주쳤습니다).
1. 테스트를 위해 새 Image()를 미리 로드합니다.

코드 복사 다음과 같습니다:

 new Image().src = 'http://img02.taobaocdn.com/tps/i2/T1iQhUXnxpXXXXXXXX-171-48.png' //Taobao
 new Image ().src = 'http://static.paipaimg.com/module/logo/logo_2011_02_22.png'; //파이파이
 new Image().src = 'http://co.youa.baidu. com/picture/services/images/logo.png'; //예
 new Image().src = 'http://img1.t.sinajs.cn/t35/style/images/common/header/ logoNew_nocache .png'; //Sina*/

그런 다음 페이지에 이미지를 추가하세요:

이미지 로딩에 대해서는 말할 것도 없고 IE6-9/CM/FF/OP/ 모두 304를 반환하며 사전 로딩이 성공합니다.

1.2. new Image()를 사용하여 CSS 로드 테스트

코드 복사 코드는 다음과 같습니다.

 new Image().src = 'http://a.tbcdn.cn/p/global/1.0/global-min.css' //Taobao(1)
 new Image() .src = 'http://static.paipaimg.com/member/activate.css'; //파이파이(2)
 new Image().src = 'http://co.youa.baidu.com/ picture/services/ base.css'; //예(3)
 new Image().src = 'http://img1.t.sinajs.cn/t35/skin/skin_008/skin.css' / /Sina( 4)
 // http://auto.sina.com.cn/css/newstyles.css
 // 이를 사용하여 IE에서 Expires 설정 시간이 다음보다 작은 상황을 테스트할 수 있습니다. 현재 시간 

 

페이지에 CSS 추가
이것은 다릅니다.

CM/OP는 모두 304를 반환합니다(Expires 설정 여부에 관계없이).
FF, 모두 200을 반환했습니다.
IE, 1/2/4는 모두 304를 반환하고 3은 200을 반환합니다. 반환된 HTTP-Header를 비교하면 1/2/4에는 모두 Expires 만료 시간이 설정되어 있지만 3에는 설정되어 있지 않음을 알 수 있습니다.
설명: IE의 캐시는 만료를 설정해야 하며(설정 시간은 현재 시간보다 커야 함) FF는 new Image()를 사용한 사전 로드를 지원하지 않습니다.
1.3. js를 로드하기 위해 new Image()를 사용하여 테스트

코드 복사 코드는 다음과 같습니다.

new Image().src = 'http://a.tbcdn.cn/s/kissy/1.1.6/kissy-min.js' //타오바오(1)
new Image( ).src = 'http://static.paipaimg.com/js/pp.noticeBoard.js'; //파이파이(2)
new Image().src = 'http://co.youa.baidu .com/ picture/services/cms_core.js'; //예 (3)
new Image().src = 'http://js.t.sinajs.cn/t35/miniblog/static/js/top .js '; //시나(4)
new Image().src = 'http://shop.qq.com/act/static/week/fri/bang/day_1_p_0_10.js' //QQ( 5)

페이지에 js를 추가하세요.

CM/OP, 둘 다 304를 반환
FF, 5개만 304를 반환하고 5개만 HTTP 헤더가 가장 간단합니다(날짜, 서버, 만료, 캐시 제어 포함).
다른 응답 헤더에는 더 많은 콘텐츠가 있지만 모두 5세트로 구성되어 있습니다. 패턴을 찾다가 다른 여러 응답 헤더에 Content-Type: text/javascript가 있지만 5에는 이것이 없다는 것을 발견했습니다.
IE, 2/5는 304를 반환하고 1/3/4는 200을 반환했습니다. 응답 헤더를 비교하면 IE의 2/5에서는 Content-Type이 표시되지 않아 여전히 Content-Type의 영향을 받아야 합니다.
또한 이미지 사전 로딩 js를 IE의 httpwatch에서 볼 때 리소스 로딩이 완료되지 않는다는 점을 언급해준 Andrew Zhang(http://www.cnblogs.com/AndyWithPassion/)에게 감사드립니다. 여기에서의 테스트에서도 마찬가지입니다. 테스트에서 바이트 제한이 있는 것 같습니다. 2개는 완전한 데이터를 반환했지만 5개는 내용의 일부가 손실되었습니다. 따라서 새 이미지를 사용하여 JS를 로드하는 것은 전혀 권장되지 않습니다.

여기서 요약하자면, new Image()를 사용하여 이미지를 미리 로드하는 것은 호환성에 문제가 없습니다. 그러나 OP/CM만이 css/js와 함께 작동할 수 있으며 IE/FF는 기본적으로 유효하지 않습니다(IE/FF는 이를 암묵적으로 이해하고 있습니다).
2. 테스트 객체 사전 로딩

var doc = document,
obj = doc.createElement('object');
//obj.data = '123.js' //Ps: 이 방법으로 작성하면 OP에 유효하지 않습니다. (데이터가 변경됩니다. 콘텐츠가 개체 태그의 텍스트 노드로 사용됩니다.)
// obj.setAttribute('data', '123.js'); ;top:-1px;width:1px; height:1px;';
; 로드를 트리거하려면 개체 태그를 머리가 아닌 부분에 삽입해야 합니다. ~ //obj.onload = function(){ Alert('loaded') } / / FF/OP/Webkit 지원 (데이터가 이미지인 경우 IE9도 가능)

그런 다음 개체의 데이터가 포함된 파일을 로드하고 태그를 생성한 후 테스트용 HTML에 추가합니다.

테스트 결과:

FF/OP/CM: img/js/css인지 304가 반환됩니다.

IE6-8: 개체를 사용하여 img/js/css를 로드하면 바로 중단됩니다.

IE9는 특별합니다.
IE9는 js/css를 로드하고, 먼저 요청하고 HTTP200을 반환한 다음, 요청하고 중단되었습니다. 여기에는 실제로 하나의 요청이 있습니다(두 번째로 중단됨).
IE9는 img를 로드할 때 먼저 HTTP200을 요청하고 반환한 다음 이미지를 요청하고 반환하므로 이미지를 두 번 요청해야 합니다.

IE9의 첫 번째 요청에서 반환된 콘텐츠는 비어 있습니다(그리고 일반적으로 이 시점에서 브라우저가 멈추거나 직접 응답을 잃게 됩니다). IE9는 먼저 URL을 요청하고 JS/CSS인 경우 파일 형식을 가져오고 이미지인 경우 로드합니다.

IE9의 첫 번째 요청은 HTTP 헤더 정보를 읽어서 파일 형식을 얻거나 비밀리에 파일을 다운로드한 후 샌드박스에서 파일 형식을 테스트하는 방식일 것입니다.

객체를 사용하여 JS를 로드하는 것과 같은 흥미로운 점은 IE9에서 때때로 이를 로드할 수 있다는 것입니다. 즉, 첫 번째 요청에서는 파일이 JS인지 확인하지 못합니다(이 내용을 보려면 운에 따라 달라지는 것 같습니다. 네트워크 속도가 느린 경우 가능) 발생)

과거 IE는 파일 형식을 결정하기 위해 파일 접미사에 의존했다고 합니다. 나중에는 HTTP 헤더 정보를 사용하여 결정하고 위조될 수 있으므로 IE에서는 개체에 보안 문제가 있습니다.
IE6/7의 경우 파일 확장자가 .js/.css인 경우 http://xxx/test.js?123.png로 변경하면 요청이 전송되지 않습니다. 전송한 후 스크립트 태그와 함께 가져옵니다. 캐시할 수 있음을 확인했습니다(css는 괜찮습니다^^).

IE8은 접미사가 js/css인 경우 요청을 발행하지 않습니다. 접미사를 png로 변경하면 요청을 발행하고 콘텐츠를 얻을 수 있으며, 그러면 페이지 생성 태그가 도입되고 파일이 생성됩니다. 캐시되지 않습니다. 하지만 파일이 실제 이미지라면 캐시됩니다.

여담: 위에서 보면 IE가 업그레이드되면서 보안이 점점 더 높아진다는 것을 알 수 있습니다.

결론은 다음과 같습니다. FF/OP/CM에서는 객체 사전 로드를 사용할 수 있지만 IE에서는 절대 사용하지 마세요.
3. iframe 사전 로드 테스트

먼저 a.html 페이지를 생성한 후 다음 js를 추가하세요.

코드 복사 코드는 다음과 같습니다.

var doc = document,
ifm = doc.createElement("iframe");
//ifm.id="preLoadIfm";
// ifm.style.border = ifm .width = ifm.height = 0;
ifm.style.cssText = 'position:absolute;top:-10px; border:0; width:1px;'; no";
doc. body.appendChild(ifm);
window.onload = function(){ // 미리 로드는 window.onload 이후에 트리거되는 것이 좋습니다.
//onload를 트리거하려면 먼저appendChild를 작성한 다음 onload를 작성해야 합니다( 순서가 바뀌면 IE에서는 실행할 수 없습니다.)
, contentDocument-IE9/FF/OP/CM은
var ifmDoc = ifm.contentDocument || ifm.contentWindow.document;
ifmDoc.open()을 지원합니다. ;
ifmDoc.write('

');
//ifmDoc.write('