브라우저가 유휴 상태 일 때 다음 페이지 로딩 시작

Question

제품 웹 사이트가 있습니다. 한 페이지에서 모든 제품에 대한 간단한 설명과 간략한 설명을 보여줍니다. 사진을 클릭하면 자세한 제품 페이지로 이동합니다.

사용자가 "모든 제품"페이지를보고 선택을 시도하는 동안 브라우저가 "상세 제품"페이지에 대한 JavaScript 및 CSS로드 및 캐싱을 시작하도록하는 방법이 있습니까?

이 미리로드 및 캐싱은 페이지가 완전히로드되어서 속도가 느려지 지 않으면 시작되기를 원합니다.

구현 방법에 대한 제안 사항이 있으십니까?

Answer 1

JavaScript 프레임 워크 (예 : jQuery, protype 등)를 사용하는 경우 간단한 메소드를 사용하여 AJAX 호출을 수행 할 수 있습니다. 그렇지 않다면 자바 스크립트에 익숙하지 않은 사람에게 조금 혼란스러워 할만한 글을 써야 할 것입니다. 기본 예는 here입니다.

태그를 HTML 페이지에 추가하면 JS가 포함됩니다. JS가 자동 실행되도록 설정된 경우 모든 코드가 실행됩니다. CSS의 경우 유일한 옵션은 JavaScript를 사용하여 파일을 가져 오는 요청을 보내는 것일 수 있습니다 (위 참조). CSS를 포함시킬 수는 있지만 원본 CSS 파일의 스타일보다 우선합니다. 성능 향상에 도움이 설교 구글과 야후를 사용만큼 큰 사이트를 포함
웹 사이트 : 미리 캐시

웹 사이트. Google for 인스턴스는 기본 페이지에만 CSS 스프라이트 http://www.google.com/images/nav_logo7.png을로드합니다. 다른 CSS 및 JS 파일은 메인 페이지에서만 완전히 사용되지 않습니다. 대부분의 사람들은 CSS와 JS 파일을 프로덕션에서 하나의 파일로 결합하여 이미 이와 비슷한 작업을 수행합니다. HTTP 요청은 실제 콘텐츠를 다운로드하는 것보다 더 많은 시간이 걸립니다. 야후 설교의 예는 here

야후는 YSlow의 도움에 대해 회담 here에 대해 이야기합니다. 지침 here의 한 부분에서 촬영

: 최종 사용자 응답 시간
80 %는 전방 단부에 소요된다. 이 시간의 대부분은 이미지, 스타일 시트, 스크립트, 플래시 등 페이지의 모든 구성 요소를 다운로드 할 때 묶여 있습니다. 구성 요소의 수를 줄이면 페이지를 렌더링하는 데 필요한 HTTP 요청 수가 줄어 듭니다. 이것은 더 빠른 페이지의 열쇠입니다. 생산 개발, 속도

조직 : 내가 일반적으로 수행하려고하는 것은 개발에
(하지만 좀처럼 내 CSS)를 필요한 경우 내 JS 파일을 분할합니다. 이 데이터를 프로덕션 서버로 전송할 때마다 컴파일러 (모든 파일을 결합한 간단한 스크립트)를 실행 한 다음 온라인으로 저장합니다.

Minifying/compressing

:
는 HTTP 요청이 악을 기억하십시오. 압축 된 JavaScript 파일과 압축 된 CSS 파일은 너무 작아서 기본 페이지의 이미지가 거의 100 % 확실합니다. 따라서 페이지 당 분할하는 것에 대해 걱정할 필요가 없습니다. 실제로 여러 페이지로 나누는 것이 성능 향상에 더 효과적입니다.CSS 스프라이트에

CSS Sprites
점 아마 웹 사이트입니다 CSS를 사용하여 페이지에 이미지를 40+ 있습니다. 사용자 페이지에서 40 개 이상의 HTTP 요청을 처리하면 많은 요청이 발생합니다. 뿐만 아니라 사용자에게 좋지 않을뿐만 아니라 웹 서버가 처리해야하는 요청도 많습니다. 정적 콘텐트 서버를 사용하지 않고 메인 호스트에있는 Apache를 사용하고 있다면 아파치 서버가 웹 애플리케이션을 위해 제공 될 수있는 요청으로로드되고있다. 이미지를 하나의 파일로 조합하거나 최소한 파일 수를 줄임으로써이를 줄일 수 있습니다. CSS의 배경 위치 속성을 사용하면 놀라운 일을 할 수 있습니다.

내가보기 엔 여기에 야후에 의해 YSlow에 지침을 읽어 보시기 바랍니다 : http://developer.yahoo.com/yslow/help/#guidelines

Answer 2

사용의 setTimeout을 페이지의로드 이벤트에서, 몇 초의 시간 제한을 설정, 그 후, 스크립트 태그를 삽입하고 페이지에 CSS 태그 (다음 페이지에서 그 사람)이 같은

뭔가 :

//cache a script 
    var scriptTag = document.createElement("script"); 
    scriptTag.setAttribute("type", "text/javascript"); 
    scriptTag.setAttribute("src", url); 
    document.getElementsByTagName("head")[0].appendChild(scriptTag); 

    //cache an image: 
    var img = new Image(); img.src = url; 

    //cache a css 
    var css= document.createElement("style"); 
    css.setAttribute("type", "text/css"); 
    css.setAttribute("src", url); 
    document.getElementsByTagName("head")[0].appendChild(css); 

Answer 3

이론적으로는 교류를 시작할 수 있습니다 (URL이 캐시에 원하는 물건의 URL입니다) 후속 페이지의 자원을 저장하여 나중에 캐시에서 사용할 수있게합니다.

그러나 이것은 좋은 연습이 아닙니다. 특히 에 대한 리소스를로드하는 경우 모두 세부 정보 페이지를 선택할 수 있습니다. 그렇게하면 사용자 대역폭이 사용되는 방식을 결정해야한다는 가정을합니다. 그들이 동시에 여러 가지를 탐색하거나 웹 사이트를 보는 것 외에도 대역폭으로 다른 일을하는 경우 의도하지 않은 방식으로 대역폭을 사용하고 있습니다.

세부 정보 페이지로드 시간이 충분히 느려야하는 경우 연결 속도가 느려서 동시에 다른 작업을 수행하는 경우 손실이 발생할 가능성이 있습니다.