Skip to content

Latest commit

 

History

History
70 lines (62 loc) · 2.36 KB

README.md

File metadata and controls

70 lines (62 loc) · 2.36 KB

Rendering Micro Benchmark

A benchmark for html rendering engines which calculates repeatable, cross-browser breakdowns of rendering performance.

Latest version: https://renderingmicro.pr.gg

Example: drop-down icon

We can use this tool to measure the cost of various approaches for drawing a chevron (drop-down) icon.

1. SVG data url background-image

<style>
  .svg-image {
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>');
  }
</style>
<div class="svg-image"></div>

This approach turns out to be surprisingly expensive:

Browser Platform Total (ms) Parse (ms) Style (ms) Layout (ms) Paint (ms)
Chrome MacOS, M1 0.76 0.05 0.58 0.01 0.12
Chrome Android, Pixel 9 1.58 0.12 1.14 0.01 0.31
Safari MacOS, M1 1.08 0.05 0.20 0.03 0.80
Firefox MacOS, M1 0.71 0.10 0.21 0.03 0.38

2. Inline SVG

<style>
  .inline-svg {
    width: 24px;
    height: 24px;
  }
</style>
<svg class="inline-svg" viewBox="0 0 24 24">
  <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>
</svg>
<div class="css-clip-path"></div>

This is just an inline version of the background-image approach, but is significantly faster:

Browser Platform Total (ms) Parse (ms) Style (ms) Layout (ms) Paint (ms)
Chrome MacOS, M1 0.18 0.06 0.04 0.03 0.06
Chrome Android, Pixel 9 0.42 0.14 0.11 0.07 0.09
Safari MacOS, M1 0.26 0.07 0.08 0.06 0.06
Firefox MacOS, M1 0.33 0.10 0.08 0.04 0.09

3. CSS clip-path

<style>
  .css-clip-path {
    clip-path: path('M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z');
    width: 24px;
    height: 24px;
    background-color: black;
  }
</style>
<div class="css-clip-path"></div>

This is fairly close to using inline SVG:

Browser Platform Total (ms) Parse (ms) Style (ms) Layout (ms) Paint (ms)
Chrome MacOS, M1 0.12 0.05 0.03 0.01 0.03
Chrome Android, Pixel 9 0.27 0.13 0.06 0.02 0.07
Safari MacOS, M1 0.20 0.05 0.07 0.03 0.05
Firefox MacOS, M1 0.30 0.10 0.07 0.03 0.10