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

Source

• Evernote/Technote scraps/웹브라우저 어떻게 동작하나(2) - HTML5 대한민국 관심 그룹 10차 회의 발표 자료.md

Summary

HTML5 대한민국 관심 그룹 10차 회의 발표 자료로, 웹 브라우저의 동작 원리를 다룬 두 번째 시리즈입니다. 웹 페이지 성능 향상을 위해 WebKit 엔진에서 레이아웃 리플로우(Reflow)를 최소화하는 방법과 렌더링 과정(Repaint, Reflow, Restyle)에 대한 외부 참고 자료를 공유합니다.

Key Points

• 웹 브라우저 렌더링 엔진의 동작 원리 설명 (2 편)
• 웹 성능 최적화를 위한 레이아웃 리플로우(Reflow) 감소 기법
• WebKit 엔진의 레이아웃 트리거링 원리 및 렌더링 단계(Repaint, Reflow, Restyle) 분석

Related

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

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

• Didact: 리액트 원리 학습을 위한 DIY 가이드 시리즈 소개

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

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

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

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

• Social-Sensed Image Search

• GPU 동작 원리 및 아키텍처 개요

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

• Git remote-tracking branch 개념 및 동작 원리

• JavaScript this 키워드 동작 원리

• 터치스크린 작동 원리 (Gizmodo)

• 인터넷 동작 원리: WLAN 연결 및 DHCP 프로세스

• requestAnimationFrame 사용법

• JavaScript 엔진의 동작 원리 (V8 기준)

• 커리어와 최적화

• 자바스크립트 동작 원리: 엔진, 런타임, 호출 스택

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

• iPhone 5S 지문 스캐너 작동 원리 및 의미

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

• 하드 드라이브 온도 감지 원리

• AJAX 기본 원리 및 XMLHttpRequest 구현

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

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

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

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

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

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

• High Performance Browser Networking (O’Reilly)

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

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

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

• 피트니스 트래커의 수면 감지 원리

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

• s 목표)

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

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

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

• 자바스크립트 아키텍처 v0.4

• WebRTC 브라우저 간 보안 보장

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

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

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

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

• Play Framework 개요

• Web Framework Benchmark Inspired

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

• Web Fundamentals 및 Web Starter Kit 리소스

• Freemarker 템플릿 상속을 통한 레이아웃 관리

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

• Synchronized Cross-device Mobile Testing

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

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

• 크롬 개발자 도구 101

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

• React vs AngularJS 비교 (Quora)

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

• React vs Vue 비교 (2019 Edition, React Hooks 기준)

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

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

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

• Java 기반 웹 채팅 서버의 동시성 문제 및 아키텍처 검토

• Progressive React

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

• 브라우저 앙상블을 활용한 분산 컴퓨팅 (WeevilScout)

• 종성 분리 알고리즘

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

• 자바스크립트에서의 Continuation-passing style (CPS) 소개

• Thinking in React: React 컴포넌트 설계 방법론

• CSS :scope 가상 클래스의 용도 및 동작 방식

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

• Quora 기술 스택 및 아키텍처 분석

• AngularJS 와 RequireJS 를 활용한 대규모 웹 어플리케이션 개발

• JSWhiz: JavaScript 메모리 누수 정적 분석 도구

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

• 실시간 투표 애플리케이션 구축 (Node.js, Express, AngularJS, MongoDB)

• WebRTC 보안 아키텍처와 호환되지 않는 신원 프로토콜의 적응 방안

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

• HTTP 프로토콜 핵심 개념: 연결, 인증 및 캐싱 (Part 2)

• 이펙티브 자바스크립트 소개