야후 사용자 인터페이스 블로그 (YUIBlog)

미리로드 모듈 : YUI 3 갤러리에서

몇 주 전에 Stoyan Stefanov는 ( @ stoyanstefanov )의 결과 발표 를 실행하지 않고 사전에 구성 요소를 preloading에 대한 그의 연구를 . 이 기술은 캐시된 자원의 활용 연속 페이지의 실적을 향상시킬 수 있습니다.

활용하여 이러한 결과를 위해, 우리는 그것을 포트에 결정 YUI 세 '라는 새로운 모듈 갤러리 - 미리 YUI 로더를 통해 현재 사용 가능 '.

알아보자 미리 예제를 :

  YUI ({
     / / 마지막 갤러리는이 모듈 빌드
     갤러리 '갤러리-2010년 5월 5일 - 19-39'
 }) 있습니다. ( '갤러리 - 미리로드'기능 (Y) {사용
   Y.preload ([
     'http://tool​​s.w3clubs.com/pagr2/1.sleep.expires.png~~V'
     'http://tool​​s.w3clubs.com/pagr2/1.sleep.expires.js'
     'http://tool​​s.w3clubs.com/pagr2/1.sleep.expires.css'
   ]);
 }); 

어떻게이 모듈은 사용자 경험을 향상합니까?

요즘 웹 어플 리케이션은 자바 스크립트, CSS와 이미지 면에서 커다란 발자국이 있습니다. 이러한 범주에 각각의 파일의 대부분은 정적이며 cacheability위한 CDN를 통해 검색하실 수 있습니다. 이러한 파일의 다운로드 및 캐시된 받게되면 브라우저가 동일한 페이지에 대한 연속 요청에 동일한 파일을 다운로드할 필요가 없습니다. 하지만 아직도 우리는 초기 페이지 요청에서 큰 영향을 미칠.

최근 연구 제안 그 0.1 초 [100ms] 사용자가 시스템이 즉각 반응되는 느낌 데 대한 제한에 관한, 더 많은 사용자의 참을성 (야콥 닐슨)하게 그것보다. 이는 로딩 프로세스에 대해 사실이다. 우리는 필요하거나 응용 프로그램이 앞으로 우리 사용자의 기대에 유지하기 위해 빠른 실행합니다.

페이스 북이나 Gmail과 같은 웹 어플 리케이션으로, 사용자는 보통 로그인에 먼저있다. 이것은 "preloading"는 말이있는 고전적인 시나리오입니다. 우리는 모든 사용자가 폼을와 상호 작용 5 분에서 10 초 지출 것을 예측할 수 있습니다. 이 기간 동안 우리의 응용 프로그램은 아무것도하지 않고있다. 우리가 백그라운드에서 캐시 파일을로드하기 위해이 시간을 사용할 수 있으면 사용자가 로그인 과정을 완료하면, 그 파일은 캐시에 사용할 수 있습니다 - 우리는 어디에 S / 다음 희생자는 것, 우리는 S / 그는 필요 정확히 알지 때문입니다. 일반적으로 (양식 워크플로 포함) 예측 가능한 사용자의 경로에있는 모든 웹 응용 프로그램은이 기법을 활용하실 수 있습니다.

이 기술은 새로운 것은 아니지만, Stoyan가 지적한대로, 그것은 스크립트를 실행하거나 CSS를 주입하거나 이미지 자체를 표시하지 않고 그렇게하기 힘들 건데,이 후 하중 단계와 관련된 비용이 있습니다, 우리는 피해야합니다 그 비용을 지불. 또한, 경우에 이러한 파일은 초기 페이지로 정중하게 재생되지 않습니다. 충돌을 피하과 장소에 솔루션을 놓을 시간을 최소화하기 위해, 우리는이 파일이 현재 페이지에 그들을 사용하지 않고 캐시에 포함되는지 보장할 필요가있을 것입니다.

이 프로세스는 완전히 무해한 있어야하고, 사용자가 이동하거나 파일을 다운로드하고 캐시 받기 전에로드 프로세스를 중지해도, 대체는 곳에 항상 - 목적 페이지에 직접 파일을로드하려고합니다.

다음 코드를 사용하여 이러한 접근 방식 구현하는 방법을 보여줍니다 gallery-preload 모듈을 :

  YUI ({
     / / 마지막 갤러리는이 모듈 빌드
     갤러리 '갤러리-2010년 5월 5일 - 19-39'
 })를 사용한다. ( '이벤트 포커스', '갤러리 - 미리로드'기능 (Y) {
   사용자가 초점을 맞추고까지 / / 로딩 자산을 시작하는 입력 요소에 대기
   Y.on ( "포커스", 함수 () {
     Y.preload ([
       'http://tool​​s.w3clubs.com/pagr2/2.sleep.expires.png~~V'
       'http://tool​​s.w3clubs.com/pagr2/2.sleep.expires.js'
       'http://tool​​s.w3clubs.com/pagr2/2.sleep.expires.css'
     ]);
   } ". myform input.query");
 }); 

사용자가 양식의 대상 페이지에 사용됩니다 자산을 로딩 시작 폼 입력 요소 중 하나에 초점을 맞추고 때까지이 예제에서는 스크립트를 기다립니다. 이것은 사용자가 양식을 제출 일단 페이지 로딩 시간을 개선합니다.

차이점 체크 직접 페이지를 액세스하고, 미리 YUI 2/YUI 세 구성 요소의 집합을 preloading 사이를 :

미리 컴포넌트의 집합에 코드 몇 라인을 포함하면이 페이지가 네 번 빠르게 로드할 수 있습니다. 변경 사항은 응용 프로그램의 논리에 필요하지 않습니다, 그리고 변화가 대상 페이지에 필요하지 않습니다 ... 저렴하고 효과적인 성능도 팅겨보고.

하나 더 기능 :

우리는 또한 덜 공격적되고 싶은 사람을위한 고급 기능을 포함시켰습니다. 모듈과 내장된 통합을 포함 니콜라스 Zakas '유휴 타이머 모듈 , 사용자가 주어진 기간 동안 비활성 상태 경우에만 유휴 타이머가 미리로드 파일은 우리에게 있습니다. 다음은 예제입니다 :

  YUI ({
     / / 마지막 갤러리는이 모듈 빌드
     갤러리 '갤러리-2010년 5월 5일 - 19-39'
 }) 있습니다. ( '갤러리 - 미리로드'기능 (Y) {사용
   사용자는 최소 100ms 동안 유휴 상태입니다 / / 미리로드 파일의 경우에만
   Y.preloadOnIdle ([
     'http://tool​​s.w3clubs.com/pagr2/3.sleep.expires.png~~V'
     'http://tool​​s.w3clubs.com/pagr2/3.sleep.expires.js'
     'http://tool​​s.w3clubs.com/pagr2/3.sleep.expires.css'
   ], 100);
 }); 

결론 :

그것은 앞서 사용자의 것이 중요합니다. 웹 애플 리케이션의 흐름을 파악하고,이 preloading 기술을 활용하는 것은 우리가 전반적인 사용자 경험을 개선하는 데 큰 도움이됩니다. 우리 애플 리케이션의 복잡도를 증가하지 않고 그렇게하는 것도 중요하다. 이 새로운 구성 요소 ( gallery-preload ) 이러한 목표를 모두 제공합니다.

대화 찾기 : bloglines | 테크노

공유하고 확장할 수 : del.icio.us에 북마크 | 디그 그것! | reddit!