브라우저 동작의 이해 - 리플로우와 리페인트 및 그 최적화

Source

• Evernote/IFTTT Feedly/브라우저 동작의 이해 - 리플로우와 리페인트 및 그 최적화.md

Summary

이 문서는 브라우저의 리플로우(Reflow)와 리페인트(Repaint) 개념 및 최적화 기법에 대한 내용을 다루고 있습니다. (원문 본문은 포함되지 않음)

Key Points

• 브라우저 렌더링 과정 중 리플로우와 리페인트의 정의
• 성능 저하를 유발하는 리플로우/리페인트 발생 원인
• DOM 조작 시 최적화를 위한 권장 사항

Related

• 웹 브라우저 동작 원리 (2) - 레이아웃 리플로우 최적화

• HTML5 Canvas 실시간 드로잉 성능 최적화 가이드

• 반응형 웹 디자인의 현황 (2013)

• 크롬 개발자 도구 101

• 소프트웨어 리팩토링 개요 및 기법

• DevTools Continuous Painting Mode를 활용한 페인팅 성능 프로파일링

• 반응형 웹과 컨텐츠 전략

• Social-Sensed Image Search

• Android ListView 커스터마이징 및 성능 최적화

• 2011년 3분기 웹 성능 최적화 핵심 링크 및 동향

• Immutable Caching 을 통한 웹 성능 최적화

• 2012년 1,2월 브라우저 기술 동향

• requestAnimationFrame 사용법

• Our checklist for improving mobile websites

• Resource Timing API 를 통한 네트워크 성능 측정

• 커리어와 최적화

• 웹 성능 크래시 코스 (Ilya Grigorik)

• Web Animations API: element.animate() (Chrome 36)

• 웹사이트 속도 테스트용 무료 온라인 도구 5 가지

• 미래형 반응형 웹 디자인 (Warpspire)

• 넷플릭스 성능 케이스스터디 (NHN FE.JS Wiki #184)

• Sitespeed.io를 사용한 웹사이트 성능 테스트

• Scala + Play Framework 2 Server 성능 향상 시키기

• imgix 성능 개선 및 문제 원인 분석 (2017)

• Google Chrome의 고성능 네트워킹 아키텍처

• High Performance Browser Networking (O’Reilly)

• 2020 년 웹 성능에 영향을 줄 6 가지 기술 (Simon Hearne)

• 임베디드 웹 서버: 제한된 리소스에서의 효율적 포맷팅

• Velocity 2014: PageSpeed 인사이트 및 QuickBooks Online 클라이언트 사이드 아키텍처

• Synchronized Cross-device Mobile Testing

• Polaris: MIT 의 웹 페이지 로딩 속도 개선 기술

• Explory: Flash 제작진의 멀티미디어 스토리텔링 앱

• Roll It: 브라우저 기반 크로스 디바이스 게임 구현 사례

• Requirify: 브라우저 콘솔에서 동적 라이브러리 로딩

• s 목표)

• Web Fundamentals 및 Web Starter Kit 리소스

• Sauce Labs: 크로스 브라우징 테스트 서비스

• Web Framework Benchmark Inspired

• HTTP Archive: jQuery 호스팅 및 버전 분산 분석 (2013)

• Yeoman: 도구를 활용한 더 나은 웹 개발

• Chrome DevTools 모바일 스크린캐스트 및 에뮬레이션

• 웹 해킹 및 보안 테스트 도구 리소스

• 홈페이지 구축 조건 및 계획

• The Web Ahead: Jen Simmons 인터뷰 요약

• 브라우저 개발자 도구의 25 가지 비법 (2011)

• The “When Can I Use” Web Widget

• Hiding Native HTML5 Video Controls in Full-Screen Mode

• 게임 개발팀 A의 정기 회의 매뉴얼

• CSS 최신 동향 파악을 위한 Adobe Web Platform 블로그

• 오프라인 웹 애플리케이션 만들기 (Mozilla 웹 기술 블로그)

• Google, Web Components 를 웹 개발의 미래로 제시 (2013)

• 웹 증강을 위한 엔드유저 언어: 생산자와 소비자 모두를 위한 접근

• 2012년 비즈니스 및 마케팅 트렌드 예측 자료 12선 (슬라이드쉐어)

• VueJS 프로젝트에 Prettier + ES6 Lint 적용

• HTML에서 Javascript와 CSS 기반으로 애니메이션을 구현하는 방법

• 크롬 컨퍼런스 핵심 요약 (Web Components, DevTools, Chrome Apps)

• 실시간 웹 협업도구 만들기 (홍영택)

• 31 CSS Web Design Galleries You’ll Love

• JavaScript 학습 자료 (2013)

• NDC 2012 강연 자료 링크 모음

• 웹 컴포넌트(1): Keep calm and usetheplatform

• HTML5 Web App Client-Side Storage 옵션 및 팁

• CSS를 이용한 클라이언트 측 전체 텍스트 검색

• 대학생을 위한 웹 개발 공부 체크리스트

• Gittip-links Chrome Extension 개발 기록

• ITViewpoint.com: 30분 만에 캔디팡 만들기 영상 소개

• Piwik 한국어 현지화 완료

• 8bit.js: Web Audio API 기반 8비트 사운드 라이브러리

• Puppeteer를 활용한 로컬 개발 서버 대체 방안 (web.dev 사례)

• KT 경제경영연구소 보고서 모음 (니오 필진)

• HTML5 기반 프리젠테이션 도구 소개

• Scrapy 로 웹사이트 크롤링 해보기

• awesome-javascript (스크랩 실패)

• Locust 데모 및 아키텍처 논의 (SRPOL)

• API 산업 초기 단계 및 Daum DNA API Meetup 후기

• WebRTC 브라우저 간 보안 보장

• 스크롤 후 고정 콘텐츠 (Scroll-Then-Fix Content)

• 야구9단 아키텍처 (NHN, 2011)

• 모바일 브라우저 탭 전환: Swipe vs. Scroll

• 리눅스 환경 HLS 스트리밍 참조 링크 모음

• HTTP 클라이언트 라이브러리의 리다이렉트 지원 방식 제안

• 브라우저 간 P2P 연결 (WebRTC)

• jQuery 애플리케이션 아키텍처 도구 (Addy Osmani)

• JavaScript 성능 향상을 위한 Thread-level Speculation (TLS)

• 메튜랩 웹사이트 재오픈 (2015)

• Countly: 실시간 모바일 앱 분석 도구

• HTML5 Video Player Comparison (2011)

• Web Push Notifications for a Simple Login System

• Chromecast 에서 Game Boy 에뮬레이터 실행 방법 (개념 증명)

• #)

• 3: TCP 대신 UDP(QUIC)를 사용하여 네트워크 성능 및 신뢰성 향상

• Web Workers: JavaScript 멀티스레딩

• GitHub의 jQuery 제거 사례

• Play Framework 개요

• Prototype용 선택 상자 플러그인

• HTML5 게임 오프라인 지원 가이드

• O 2013 실험 사례 연구

• Cube Slam: WebRTC 기반 실시간 브라우저 게임

• 아카마이, TCP 최적화 기술 ‘패스트TCP’ 공개

• PC 게임 실행 가능 여부 확인 방법

• Datasheet.net: 데이터시트 스니펫 도구

• 반응형 웹(RWD) 디자인 및 테스트 도구 모음

• Preme: Windows 창 관리 개선 도구

• Burst: 더 나은 파라미터화된 테스트 프레임워크

• 개드립용 크롬 확장 프로그램 만들기 (1 편)

• 스마트폰 브라우저에서 즐겨찾기 스크립트를 이용한 해외 사이트 번역

• Distributed Web Worker 개발 중 Promise 및 이벤트 처리 이슈

• 북마클릿(Bookmarklet) 정의

• WebAssembly (WASM) 개요 및 설계 목표

• List.js: HTML 리스트의 검색, 정렬, 필터링을 위한 경량 JavaScript 라이브러리

• 5 jQuery Notification Plugins

• 스마트폰 웹 브라우징 경험 개선 팁

• Typeform: 크로스 디바이스 설문조사 플랫폼