미리 로드하면 웹페이지가 사용자에게 더 빨리 표시될 수 있다는 장점이 있습니다. 단점은 불필요한 요청이 늘어날 수 있다는 것입니다(단, 이미지, CSS, js와 같은 정적 파일은 캐시될 수 있습니다). 사용자가 방문하는 페이지에는 Node.js가 미리 로드되어 있으며, 사용자는 페이지를 훨씬 빠르게 열어 사용자 경험을 향상시킬 수 있습니다. 일부 큰 사진을 사용하여 표시할 때 큰 사진을 미리 로드하는 것은 사진을 사용자에게 더 빨리 표시할 수 있는 매우 좋은 방법입니다. 말할 것도 없이, 프론트 엔드 공성 마스터로서 모두가 알고 있는 사실입니다. 제가 수행한 테스트와 결과를 공유하겠습니다.
먼저 알아야 할 서버에서 반환된 상태 코드에 대해 이야기해 보겠습니다.
status-code: 200 - 클라이언트 요청이 성공했습니다
status-code: 304 - 파일이 이미 브라우저에 있습니다. 서버는 클라이언트에게 버퍼링된 문서를 계속 사용할 수 있음을 알려줍니다.
이 글은 파일이 캐시되었는지 확인하는 테스트입니다. 304가 반환되는지 확인하는 데 사용됩니다.
다음은 주로 new Image(), object 및 iframe을 포함하여 다양한 브라우저에서 img/js/css를 로드하여 여러 가지 사전 로드 방법을 테스트하는 것입니다. 다음 로딩 테스트에 사용된 js, css, 이미지 파일은 여러 포털 사이트에서 찾았습니다(왜 몇 개 찾았나요? 특수한 상황을 최대한 많이 테스트하기 위한 것이었고 실제로 테스트 도중에 마주쳤습니다).
1. 테스트를 위해 새 Image()를 미리 로드합니다.
1.2. new Image()를 사용하여 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()를 사용하여 테스트
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인 경우 파일 형식을 가져오고 이미지인 경우 로드합니다.
객체를 사용하여 JS를 로드하는 것과 같은 흥미로운 점은 IE9에서 때때로 이를 로드할 수 있다는 것입니다. 즉, 첫 번째 요청에서는 파일이 JS인지 확인하지 못합니다(이 내용을 보려면 운에 따라 달라지는 것 같습니다. 네트워크 속도가 느린 경우 가능) 발생)
과거 IE는 파일 형식을 결정하기 위해 파일 접미사에 의존했다고 합니다. 나중에는 HTTP 헤더 정보를 사용하여 결정하고 위조될 수 있으므로 IE에서는 개체에 보안 문제가 있습니다.
IE6/7의 경우 파일 확장자가 .js/.css인 경우 http://xxx/test.js?123.png로 변경하면 요청이 전송되지 않습니다. 전송한 후 스크립트 태그와 함께 가져옵니다. 캐시할 수 있음을 확인했습니다(css는 괜찮습니다^^).
여담: 위에서 보면 IE가 업그레이드되면서 보안이 점점 더 높아진다는 것을 알 수 있습니다.
결론은 다음과 같습니다. FF/OP/CM에서는 객체 사전 로드를 사용할 수 있지만 IE에서는 절대 사용하지 마세요.
3. iframe 사전 로드 테스트
먼저 a.html 페이지를 생성한 후 다음 js를 추가하세요.
