Rendering Performance Guide for Developers by Paul Lewis

Pipeline

  1. Request-Response
  2. Get / HTTP/ 1.1
  3. Transform the returned HTML document to DOM
  4. Styling the DOM - Apply CSS (Recalculate Style)
  5. Get the Render Tree (Equal with the DOM, except without the unrendered elements such as <head> or elements have display: none CSS style)
  6. Laying out the document -> transform to Boxes (Layout)
  7. Rasterizer (Paint)
drawPoints drawRect
drawOval clear
drawRectangle translate
drawRoundedRect save
drawPath restore
drawBitmap clipPath
drawtext moveTo
drawLine lineTo
  1. Moving Elements will cause the re-painting issue
    • Use Layers to solve the issue
Layer Creation Criteria
3D or perspective transform
HW-accelerated video element
HW-accelerated canvas element (2D or 3D)
Contains a compsited plugin
CSS animation on opacity
Animated webkit transform
Accelerated CSS fileters
Rendered on top of another layer
  1. To the Screen

Milliseconds

  • 100 ms - Response Time
  • 16 ms - Frame Time (60fps)
comments powered by Disqus