← Voltar aos diagramas

Browser Rendering Pipeline

Critical Rendering Path: do HTML byte ao pixel na tela — parsing, layout, paint e compositing

1. Navigation🌐DNS + TCP + TLSConnection Setup📥HTTP ResponseTTFBTTFB ideal < 200ms📄HTML ParserTokenizer → Treebytes🌳DOMDocument Object ModelParser Blocking<script> → blocks parsing<script async> → download parallel<script defer> → execute after DOMBLOCKING🎨CSS ParserStylesheets → CSSOM🎯CSSOMCSS Object ModelRENDER BLOCKING🌲Render TreeDOM + CSSOMDOMCSSOM📐LayoutReflow / GeometryEXPENSIVE🖌️PaintRasterize Layers🎮CompositeGPU LayersGPU ACCELERATEDCusto por OperaçãoLayout + Paint + CompositePaint + CompositeComposite only ✨(transform, opacity)Reflow Triggers (Layout Thrashing)Propriedades que triggeram reflow:width, height, margin, padding, border-widthfont-size, font-weight, line-height, text-alignposition, display, float, overflow, top/left/right/bottom⚠️Forced SyncLayoutRepaint Triggers (Paint Only)Propriedades que triggeram repaint (sem reflow):color, background-color, background-imagevisibility, outline, box-shadow, border-radiusborder-style, text-decorationCHEAPERCritical Rendering Path — Otimizações⚡Critical CSSInline <head>📜Defer JSasync / defer📦Preload<link rel=preload>✂️Code SplitDynamic import()🖼️Image Optsrcset + lazy🔤Font Strategyfont-display🗜️CompressionBrotli / gzip🚀HTTP/2 Push103 Early Hints

Navigation: browser recebe URL → DNS lookup → TCP + TLS → HTTP request. TTFB ideal < 200ms (varia com infra)

0/9