basket.js – LocalStorage 에 script 캐싱/로딩해주는 자바스크립트

HTML5 에서 제공하는 웹 저장 기술중 하나인 localStorage 를 사용하여, 자바스크립트를 캐싱하고, 로딩해주는 자바스크립트로 basket.js 라는 간단하지만 (개념 증명정도의) 흥미로운 자바스크립트 오픈소스.

먼저 localStorage 를 간단히 언급하자면, HTML5 에서 추가된 저장기술 중 하나인데 브라우저마다 차이는 있지만 대략 5MB ?? 정도 제공을 해 주고요.  구글크롬을 쓰신다면 CTRL+SHIFT+I (도구-개발자도구) 에서 Resources 란에 보면 Databases 와 Session Storage 사이에, Local Storage 항목이 존재합니다. 그 영역에 저장되는 거죠.

자바스크립트 콘솔에서 직접 localStorage 를 접근해 보면, 아래 처럼 작동하구요.
> localStorage.setItem(“Name”, “rkJun”)
> localStorage.getItem(“Name”)
“rkJun”

basket.js 는 LocalStorage 를 활용하여, jQuery 같은 자바스크립트 라이브러리를 통째로 LocalStorage 영역에 저장하고 호출해서 이용하도록 자바스크립트로 구현해 놨습니다. 물론, 당연히 성능의 극대화를 끌어올리기 위해서구요. (시작은 트위터 -영문- 에서…) basket.js 소개페이지에는 jQuery , backboneJs, underScoreJs 를 담아놨습니다.
사용법은 간단합니다.

basket.require(‘js파일경로’) : 호출 (해당 js파일이 있는지 체크해서 localStorage 에 있으면 무시, 없으면 ajax 방식으로 가져와 localStorage 에 넣습니다. )

basket.remove(‘js파일경로’) : localStorage 에 제거
basket.add(‘js파일경로’) : localStorage 에 추가

물론 체인방식도 제공하고요.
basket.require(‘jquery.js’).require(‘underscore.js’).require(‘backbone.js’);

basket.require(‘jquery.js’).wait().require(‘jquery.plugin.js’)  를 통해, jquery.js 호출이 끝나고 나서 다음을 실행하도록 wait() 를 걸 수도 있습니다. jQuery plugin 을 실행하기 전에 jQuery 가 먼저 호출이 돼 있어야 하니까요.

다만, 이  basket.js 에서 캐싱을 위해 선택한 localStorage 가 고민끝에 선택한 건 아니라고 언급해 두며,  WE NEED TO KILL OFF THE LOCALSTORAGE API 라는 글도 링크걸려 있구요. (대략 localStorage 는 형편없고 후지다. IndexedDB 만이 대안이다 라고···.)

암튼 basket.js 의 성능 실험 자체가 꽤 흥미로워서, 소개해 봤습니다.

태그 지정됨 , , ,

6 thoughts on “basket.js – LocalStorage 에 script 캐싱/로딩해주는 자바스크립트

  1. javarouka말하길

    조금이라도 페이지는 빠르고 서버는 부하가 적게 하려는 노력이네요…

    • rkjun말하길

      네. 흥미롭기도 하고.. Local Storage 와 브라우저캐싱 과 속도비교도 궁금하네요. (담에 한다고 하던데…) 누군가 이거를 IndexedDB 로 구현해서 성능비교도 해보면 좋겠다는 생각이 드네요. 암튼 이런 실험들이 모바일웹을 비롯한 웹 전체의 성능 향상에 가속화를 가져오지 않을까 생각이 드네요.^^

  2. simon말하길

    안녕하세요. basket.js 를 실제 어떻게 사용 하는지에 대해서 자세히 알려주시면 감사하겠습니다. ㅜㅜ
    Local Storage를 이용해 실제 속도비교를 하고싶은데 당체 어떻게 해야 하는지 잘 모르겠습니다.
    답변해주시면 감사하겠습니다.ㅠ

    • rkjun말하길

      답변이 늦었네요.
      간단하게는 basket.require({ url: ‘jquery.js’ }); 명령으로 script 를 가져와 로컬스토리지에 담습니다.
      물론 여러개를 가져올 수도 있구요.

      basket.require(
      { url: ‘jquery.js’ },
      { url: ‘underscore.js’ },
      { url: ‘backbone.js’ }
      );

      http://addyosmani.github.io/basket.js/

  3. ghdrlfehd말하길

    브라우저캐시와 비교한 속도 테스트 링크가 있네요.

    http://jsperf.com/basket-js-versus-browser-cache

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중