#perfmatters: 성능 닌자를 위한 도구 기술
개발 도구를 사용하는 방법을 아는 것은 성능 전문가가 되기 위한 핵심입니다. 콜트는 네트워크, 컴퓨팅, 렌더링이라는 세 가지 성능 핵심 요소를 살펴봄으로써 각 영역의 주요 문제와 이러한 문제를 찾고 근절하는 데 사용할 수 있는 도구에 대한 둘러보기를 제공했습니다.
- 이제 즐겨 사용하는 DevTools를 데스크톱에서 사용해 Android에서 Chrome을 프로파일링할 수 있습니다.
- 성능 작업의 반복 루프는 데이터 수집, 통찰력 확보, 조치 실행입니다.
- 페이지의 핵심 렌더링 경로에 있는 애셋의 우선순위를 지정합니다.
- 페인트는 비용이 너무 많이 듭니다.
- 앱에서 중요한 시기에 메모리 급변과 코드 실행을 방지합니다.
#perfmatters: 네트워크 성능 최적화
일반적으로 네트워크 및 지연 시간은 사이트의 총 페이지 로드 시간의 70% 를 차지합니다. 이는 상당한 비율이지만 개선하면 사용자에게 엄청난 혜택을 가져다줄 수 있다는 뜻이기도 합니다. 이 대담에서 일리아는 로드 시간을 개선하기 위한 Chrome의 최근 변경사항을 살펴보았으며, 네트워크 로드를 최저 수준으로 유지하기 위해 사용자의 환경에서 적용할 수 있는 몇 가지 변경사항을 살펴보았습니다.
- Chrome M27에는 새롭게 개선된 리소스 스케줄러가 있습니다.
- Chrome M28로 SPDY 사이트 속도가 훨씬 빨라졌습니다.
- Chrome의 간단한 캐시가 정비되었습니다.
- SPDY / HTTP/2.0은 전송 속도를 크게 개선합니다. nginx, Apache, Jetty를 위한 성숙한 SPDY 모듈이 있습니다.
- QUIC는 UDP를 기반으로 구축된 새롭고 실험적인 프로토콜입니다. 초창기이지만 작동하게 되면 사용자에게 도움이 됩니다.
#perfmatters: 60fps 레이아웃 및 렌더링
프로젝트에서 60fps를 맞추는 것은 사용자 참여와 직접적인 관련이 있으며 이는 성공에 매우 중요합니다. 이 대담에서 Nat과 Tom이 Chrome의 렌더링 파이프라인, 프레임 드롭의 일반적인 원인과 이를 방지하는 방법에 관해 이야기했습니다.
- 프레임 길이는 16ms입니다. JavaScript, 스타일 계산, 회화 및 합성 관련 내용을 다룹니다.
- 페인트는 extremely 비쌉니다. Paint Storm은 비용이 많이 드는 페인트 작업을 불필요하게 반복하는 곳입니다.
- 레이어는 페인트된 요소를 캐시하는 데 사용됩니다.
- 입력 핸들러 (터치 및 마우스휠 리스너)는 응답성을 멈출 수 있습니다. 가능하면 피하세요. 최소로 유지할 수 없는 경우
#perfmatters: 인스턴트 모바일 웹 앱
주요 렌더링 경로란 브라우저에서 페이지 페인팅을 시작하기 전에 브라우저에서 요구하는 모든 항목 (자바스크립트, HTML, CSS, 이미지)을 가리킵니다. 특히 셀룰러 네트워크의 스마트폰과 같이 네트워크가 제한된 기기를 사용하는 경우, 핵심 렌더링 경로에서 에셋을 제공하는 것에 우선순위를 두는 것이 중요합니다. Bryan은 Google에서 PageSpeed Insights 웹사이트의 애셋을 식별하고 우선순위를 지정하는 과정을 어떻게 진행했는지 이야기하여 로드 시간을 20초에서 1초 이상으로 단축했습니다.
- 렌더링 차단 자바스크립트 및 CSS를 제거합니다.
- 표시되는 콘텐츠의 우선순위를 지정합니다.
- 스크립트를 비동기식으로 로드합니다.
- 서버 측에서 초기 뷰를 HTML로 렌더링하고 자바스크립트로 보강합니다.
- 렌더링 차단 CSS를 최소화합니다. 초기 표시 영역을 표시하는 데 필요한 스타일만 게재한 후 나머지를 게재합니다.
- 렌더링 차단 CSS에 인라인된 큰 데이터 URI는 렌더링 성능에 해가 되며, 이미지 URL이 차단되지 않는 리소스를 차단합니다.