Tag Archives: 캐시

불 쌍 한 남자의 자바 스크립트 캐싱

1 회신

[TL;박사 버전: 쿠키를 사용 하 여 비동기 호출의 결과 저장; 즉시 과거 비동기 호출의 결과 렌더링 하 고 페이지 로드 후 확인.]

내가 일하고 SharePoint 인트라넷 사이트에 있는 클라이언트에 대 한 기능, 다른 것 들 중, 양식에 일치 시키는 보조 탐색 해당 메뉴 옵션이 일반 오래 된 사용자 지정 목록을 통해 관리 됩니다.  아이디어는 클라이언트에 영향을 미치는 또는 그것에 의해 밖으로 넣어 전역 탐색에 의해 영향을 받지 않고 "그들 의" 사이트의 메뉴 제어를 가져옵니다..

(뭔가 엄청나게을 로드 일부 CSS와 JS... 사이트의 동작에 대 한 거의 모든 것을 근본적으로 변경 하지만 그건 다른 게시물에 대 한 HTML 파일을 가리키는 CEWP 추가 대 한 파괴)

이 아주 간단한 코드:

아픈 자리 여기는 누구 든 지 사이트의 페이지 중 하나를 조회 수 모든 시간, 해당 사용자의 웹 브라우저 목록에서 항목을 가져올 밖으로 도달 합니다.  개발 완료 되 고 테스트 되 면 안정적이 고 완전 한 것을 입증 했다, 이 호출이 필요 하지 않습니다 더 이상 99% 거의 메뉴부터 시간 변경합니다.  그것도 이상한 UI에 영향을 미칠 하이퍼 ajaxy 웹 사이트의이 용감한 새로운 세계에 있는 일반적인-페이지 렌더링 하 고 그런 다음 메뉴 렌더링지 않습니다.  그것은 과민 하 고 내 보기에 산만 한입니다.  그리고 신경 과민. 그래서, 캐싱. 

Thusly 논리를 수정:

  • 마지막 그것을 읽고 메뉴를 포함 하는 브라우저에서 쿠키에 대 한 보고
    • 만약 발견, 즉시 렌더링 합니다.  페이지 로딩 완료를 기다리지 않는다.  (당신의 HTML 여기 전략적으로 배치 되도록 해야, 그것은 일을 열심히 하지만).
  • 로딩을 끝내 고 나머지 또는 lists.asmx 또는 무엇이 든을 사용 하 여 목록에서 메뉴 항목을 로드 하려면 호출 하는 비동기 페이지에 대 한 대기
  • 내가 쿠키에 대 한 비교
    • 일치 하는 경우, 중지
    • 그렇지 않으면, jQuery를 사용 하 여, 경우 동적으로 무리를 채울 <리>에 <ul>
  • CSS를 사용 하 여 모든 서식 할 수
  • 이익!

당신의 일부는 말 거 야, "이 봐! 아니 진짜 캐싱가 여기에 있기 때문에 어쨌든 메뉴를 읽고 있다 매 시간.”  그리고 당신 말이 맞아-하지 휴식의 어떤 서버를 주는 거 야.  하지만 HTML 페이로드 완전히 렌더링 호출은 비동기 이며 이후 페이지의 초기 발생 하기 때문에, 그것은 "느낌"는 사용자에 게 응답성.  메뉴는 페이지 그리는 만큼 꽤 렌더링 합니다.  메뉴 변화를 발생 하는 경우, 사용자 메뉴의 과민 다시 그릴을 복종 된다, 하지만 그 한 번만.

이 캐싱 보다 효과적으로 만들기 하는 동시에 서버 도와 몇 가지:

  • "쿠키 캐시"는 최소 유효 규칙에 24 시간 또는 다른 시간대. 만큼 만료 된 쿠키가, 쿠키의 메뉴 스냅숏을 사용 하 고 결코 서버.

그 게 지금 당장 마음에와 서 다 음... :). 

누구 든 지 여기 어떤 영리한 아이디어를 가진다면 그들을 알고 싶어요.

그리고 마지막으로-이 기술은 다른 것 들에 대 한 사용할 수 있습니다.  이 클라이언트의이 페이지는 다양 한 페이지에 다양 한 데이터 기반 것 들, 그들 중 많은 사람들이 상대적으로 거의 변화 (일주일에 한 번 또는 한 달에 한 번).  기능의 특정 영역을 대상 하는 경우, 로컬 쿠키 저장소에서 콘텐츠를 당기 및 즉시 렌더링 응답성 UI를 제공할 수 있습니다.  그것은 어떤 주기 서버 저장 하지 하는 경우에 사용자에 게 더 빨리 느낀다.  당신은 수 있습니다. 이 로컬 쿠키 캐시를 무효화할 일부 조건과 트리거에 결정 하 여 서버 사이클을 저장 합니다.  그건 모든 상황이 복잡 한 물건 및 진짜로 가장 재미 있는 :). 

</끝>

undefined내 블로그를 구독.

에 지 저 귐에 나를 따르라합니다 http://www.twitter.com/pagalvin