1. "불필요한 페인트 회피하기: Animated GIF 에디션" By Paul Lewis
(이 글은 불필요한 페인트 회피하기(원문)을 먼저 읽으시는 것을 권장합니다.)
최적의 렌더링 성능을 위해 페인팅의 작업 시간을 16ms 이하(60fps)로 유지하는데 필요한 병목 지점의 탐색과 수정에 크롬 개발자 도구를 사용할 수 있습니다.
특히 animated GIF는 그 특성 상 렌더링이 프레임 단위로 지속되며 브라우저들이 이 GIF의 가시성을 확인하는 것보다 그냥 렌더링하는 것이 일반적으로 더 빠르기 때문에 지속적인 렌더링이 일어날 수 있습니다. 크롬 개발자 도구의 'Show paint rectangles' 기능을 이용하여 이러한 불필요한 페인팅의 발생 여부를 확인할 수 있습니다. 이를 통해 불필요한 페인팅을 줄여 부드러운 프레임율을 이루는 방법을 살펴봅니다.
최적의 렌더링 성능을 위해 페인팅의 작업 시간을 16ms 이하(60fps)로 유지하는데 필요한 병목 지점의 탐색과 수정에 크롬 개발자 도구를 사용할 수 있습니다.
특히 animated GIF는 그 특성 상 렌더링이 프레임 단위로 지속되며 브라우저들이 이 GIF의 가시성을 확인하는 것보다 그냥 렌더링하는 것이 일반적으로 더 빠르기 때문에 지속적인 렌더링이 일어날 수 있습니다. 크롬 개발자 도구의 'Show paint rectangles' 기능을 이용하여 이러한 불필요한 페인팅의 발생 여부를 확인할 수 있습니다. 이를 통해 불필요한 페인팅을 줄여 부드러운 프레임율을 이루는 방법을 살펴봅니다.
참고 글
2. "불필요한 페인트 회피하기" By Paul Lewis
('불필요한 페인트 회피하기 : Animated GIF 에디션(원문)'의 이전 글입니다.)
모던 브라우저에서 웹 페이지 내의 엘리먼트들은 1개 이상의 레이어로 그룹지어 렌더링되며 엘리먼트의 시각적 변화는 포함된 레이어와 상위의 레이어로 연쇄 렌더링되어 성능 상의 영향이 발생할 수 있습니다.
크롬 개발자 도구에서 Show paint rectangles를 이용하여 이러한 페인팅의 발생 여부를 확인할 수 있습니다. 불필요한 페인팅을 줄여 부드러운 프레임율을 이루는 방법을 살펴봅니다. (이 글에서는 스크롤 시 hover로 인한 렌더링 오버헤드로 인한 스크롤의 성능 저하를 개선하는 것을 예로 들고 있습니다.)
모던 브라우저에서 웹 페이지 내의 엘리먼트들은 1개 이상의 레이어로 그룹지어 렌더링되며 엘리먼트의 시각적 변화는 포함된 레이어와 상위의 레이어로 연쇄 렌더링되어 성능 상의 영향이 발생할 수 있습니다.
크롬 개발자 도구에서 Show paint rectangles를 이용하여 이러한 페인팅의 발생 여부를 확인할 수 있습니다. 불필요한 페인팅을 줄여 부드러운 프레임율을 이루는 방법을 살펴봅니다. (이 글에서는 스크롤 시 hover로 인한 렌더링 오버헤드로 인한 스크롤의 성능 저하를 개선하는 것을 예로 들고 있습니다.)
참고 글
- 원문 - Avoiding Unnecessary Paints
- 번역 - 불필요한 페인트 회피하기 (live)
3. "Yeoman과 Polymer를 이용한 웹앱 개발" By Addy Osmani
Yeoman은 스캐폴딩을 제공하는 Yo, 패키지 의존성을 관리하는 Bower, 빌드 도구인 Grunt를 포함하는 Workflow 도구입니다. Polymer는 Web Component를 지원하지 않는 브라우저에서도 이를 사용할 수 있는 Polyfill 라이브러리입니다.
이 글은 라이브러리(Polymer)와 도구(Yeoman)를 이용하여 Web Component 기반의 App을 개발하는 방법을 알아봅니다.
참고 글
- 원문 - Building Web Apps With Yeoman And Polymer
- 번역 - Yeoman과 Polymer를 이용한 웹앱 개발 (live)
4. "웹 개발자를 위한 이미지 압축" By Colt McAnlis
사이트 로딩 성능에 큰 영향을 주는 원인 중 대부분 이미지입니다. 이 글은 로딩 성능을 개선하기 위한 다음과 같은 내용들을 설명합니다.
- 이미지를 최대한 직접 최적화하고, 나머지는 자동화된 최적화 사용
- WebP를 고려
- 로딩 시 시각적으로 느리지 않게 보이도록 Progressive로 저장
- 보다 나은 압축률과 투명 처리를 위한 다른 방법들
참고 글
- 원문 - Image Compression for Web Developers
- 번역 - 웹개발자를 위한 이미지 압축 (live)
기타
아직 merged 이후 사이트 업데이트는 대기 상태입니다.한글 버전이 사이트에 업로드되면 업데이트하도록 하겠습니다.- 25일부터 live 상태입니다. :)
