BigPipe 학습
3899 단어 bigpipe
지난 10 년 동안 현대 웹 사 이 트 는 더욱 동태 적 이 고 내용 화 되 었 으 며 상호작용 도 점차적으로 강화 되 었 다.전통 적 인 페이지 처리 방식 은 똑 같은 속도 로 발전 하지 않 았 고 사용자 가 극치 성능 에 대한 추 구 를 만족 시 키 지 못 했다.
전통 페이지 의 상호작용 모델
먼저 페이지 의 전통 적 인 상호작용 모델 을 살 펴 보 자.
전통 적 인 페이지 인 터 랙 션 모델 은 일정한 순서에 따라 실 행 됩 니 다.모든 과정 은 중첩 할 수 없습니다.즉,모든 과정 이 같은 시간 에 실 행 될 수 없습니다.서버 측 이 데 이 터 를 가 져 오고 페이지 를 생 성 할 때 클 라 이언 트 가 방치 되 어 서버 측 이 데 이 터 를 생 성 하 기 를 기다 리 고 있 습 니 다.클 라 이언 트 가 서비스 전단 에서 돌아 오 는 페이지 를 받 고 자원 을 다운로드 하기 시 작 했 을 때 서버 는 클 라 이언 트 로부터 다음 요청 을 기다 리 고 있 습 니 다.여가 시간 은 자원 의 낭 비 를 초래한다.
클 라 이언 트 가 서버 에서 페이지 를 생 성 할 때 자원 다운로드 와 페이지 분석 을 동시에 할 수 있 고 페이지 에서 자원 다운로드 와 분석 을 하 는 과정 에서 서버 에서 도 페이지 를 계속 생 성 할 수 있다 면 전체적인 성능 이 향상 될 것 입 니 다.
빅 파이프 의 작업 방식
한 페이지 가 클 라 이언 트 와 서비스 전단 에 동시에 처 리 될 수 있 도록 먼저 우 리 는 완 성 된 페이지 를 몇 개의 작은 조각 으로 나 누 어야 한다.이런 작은 조각 들 은
pagelets이 라 고 불 린 다.그 다음 에 bigpipe 기술 을 통 해 페이지 를pagelet형식 으로 서비스 전단 에서 생 성하 고 클 라 이언 트 에 게 보 냅 니 다.BigPipe 는 페이지 생 성 절 차 를 몇 단계 로 나 누 었 습 니 다.1.서비스 전단 에서 클 라 이언 트 로부터 HTTP 요청 을 받 고 2.저장 소 에서 데 이 터 를 가 져 옵 니 다.3.HTML 을 생 성하 고 클 라 이언 트 에 응답 합 니 다.4.브 라 우 저 는 내용 을 분석 하고 CSS 를 다운로드 하기 시작 합 니 다.브 라 우 저 는 DOM Tree 를 생 성하 고 CSS Rule Tree 를 생 성 하 며 Rendering Tree 를 구성 하여 요 소 를 그립 니 다.5.자 바스 크 립 트 를 다운로드 하고 실행 합 니 다.
앞의 세 단 계 는 서비스 전단 에서 완성 되 고,뒤의 세 단 계 는 브 라 우 저 에서 실 행 됩 니 다.모든 pagelet 는 이상 의 모든 절 차 를 실행 해 야 하지만,bigpipe 는 이 pagelet 를 병행 하여 이 절 차 를 완성 할 수 있 습 니 다.
우선 클 라 이언 트 가 브 라 우 저 에 HTTP 요청 을 서버 에 보 냅 니 다.서버 는 먼저 닫 히 지 않 는 HTML 세 션 을 생 성 합 니 다.닫 히 지 않 는 탭 을 포함 하고 head 에 후속 으로 받 은
pagelet라 이브 러 리 를 처리 하 는BigPipe라 이브 러 리 를 포함 합 니 다.여기 서bigpipe.js클 라 이언 트 에 게 보 냅 니 다.javascriptBigPipe Test
이 럴 때 서버 는 페이지 를 계속 생 성 합 니 다
pagelets.클 라 이언 트 는 이미 CSS 와 다른 자원 을 다운로드 하기 시작 했다.서버 측 에서 하나의 pagelet 를 생 성 할 때 즉시flush클 라 이언 트 에 도착 합 니 다.pagelet 의 형식 은 다음 과 같 습 니 다.
big_pipe.onPageletArrive({id: “pagelet_composer”, content=<HTML>, css=[..], js=[..], …})
하나
pagelet에는id,HTML , CSS,JavaScript 가 포함 되 어 있다.클 라 이언 트 에서 하나의 pagelet(이때 서버 에서 다른 pagelet 를 계속 생 성 하고 있 음)를 받 았 을 때 바로 실행
onPageletArrive하 는 방법 입 니 다.BigPipe 라 이브 러 리 는 돌아 오 는 pagelet 정보 에 따라 즉시 CSS 자원 을 다운로드 하고 다운로드 한 후에 페이지 에 pagelet 세 션 을 표시 합 니 다.자 바스 크 립 트 의 다운로드 와 실행 은 페이지 의 렌 더 링 을 막 기 때문에 자 바스 크 립 트 다운로드 와 실행 우선 순위 가 낮 아 지고 모든pagelet이 다 보 여 질 때 까지 기 다 려 야 자 바스 크 립 트 자원 이 다운로드 되 고 실 행 됩 니 다.위의 절 차 를 반복 하고
pagelet이 모두 처 리 될 때 까지 이 절 차 는 끝 났 습 니 다.pagelet처리 하 는 과정 은 서버 측 과 클 라 이언 트 가 계속 유지 되 었 습 니 다 .빅 파 이 프 는 페 이 스 북 이 성능 최적화 탐색 과정 에서 자신의 업무 장면 과 결합 하여 제시 한 최적화 수단 으로 페 이 스 북 에서 큰 성 과 를 거 두 었 다.2009 년 에 그들 은 빅 파 이 프 와 다른 최적화 수단 을 사용 하여 사이트 의 응답 속 도 를 이전의 두 배로 향상 시 켰 다.
참고 자료
좋은 웹페이지 즐겨찾기
