The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Seems Like There's Effectively No Difference Parsing Minified CSS vs. Non-Minified

TL;DR

I ran a few samples pulling timing data for page loads in an attempt to tell if there was a difference between page load times with Minified vs. Non-Minified CSS. I wasn't able to identify one with my limited data run.

Based on

Notes And Methodology

TODO: Pull subtitle into page object
  • This is an attempt to see if there's a difference between the parsing times of a minified vs non-minified CSS file

  • It's tough to figure out exactly what to look for. The data I'm using is "domLoading", "domInteractive", "domContentLoaded", and "domComplete" from my Vivaldi browser's Navigation Timing API

  • My hypothesis based on the diagram on the

  • All this work happens after the file is received which should mean network times are taken out of it. I'm taking this approach to limit things to one variable at a time

  • Times have a resolution of milliseconds via the

  • This is only 5 runs per file type. That's not much. It was all manual and I don't have a non-trivial way to do a bigger run. Take it for what it's worth

  • The test files used were the `bulma.css`` and `bulma.min.css`` file which weigh in at 245,486 bytes and 207,302 bytes respectively

  • I'm not using any of the styles from the CSS, but based off this

  • That page also points to the idea only real difference in timing would be lexing from the characters to the tokens

  • I ran the HTML file off localhost and called the CSS files externally in order to use a server that compressed them with brotli

  • The raw (non-minified) version of the file had domLoading to domInteractive times between 224 and 333ms. The minified version was 241 to 279ms

  • That makes me think that for my human level of processing any difference would be washed out by jitter across the rest of the system.

  • The raw is up top if you want to play with it. The results are below the data and code

The Data And Results

Code
import json 

data = json.loads("""{
  "raw": [
    {
      "connectStart": 1703880386425,
      "navigationStart": 1703880386424,
      "secureConnectionStart": 0,
      "fetchStart": 1703880386424,
      "domContentLoadedEventStart": 1703880386700,
      "responseStart": 1703880386427,
      "domInteractive": 1703880386700,
      "domainLookupEnd": 1703880386425,
      "responseEnd": 1703880386427,
      "redirectStart": 0,
      "requestStart": 1703880386426,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880386434,
      "domComplete": 1703880386708,
      "domainLookupStart": 1703880386425,
      "loadEventStart": 1703880386708,
      "domContentLoadedEventEnd": 1703880386700,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880386426
    },

    {
      "connectStart": 1703880427334,
      "navigationStart": 1703880427331,
      "secureConnectionStart": 0,
      "fetchStart": 1703880427332,
      "domContentLoadedEventStart": 1703880427562,
      "responseStart": 1703880427335,
      "domInteractive": 1703880427561,
      "domainLookupEnd": 1703880427334,
      "responseEnd": 1703880427335,
      "redirectStart": 0,
      "requestStart": 1703880427334,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880427337,
      "domComplete": 1703880427571,
      "domainLookupStart": 1703880427334,
      "loadEventStart": 1703880427571,
      "domContentLoadedEventEnd": 1703880427562,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880427334
    },

    {
      "connectStart": 1703880465546,
      "navigationStart": 1703880465544,
      "secureConnectionStart": 0,
      "fetchStart": 1703880465544,
      "domContentLoadedEventStart": 1703880465887,
      "responseStart": 1703880465547,
      "domInteractive": 1703880465886,
      "domainLookupEnd": 1703880465546,
      "responseEnd": 1703880465548,
      "redirectStart": 0,
      "requestStart": 1703880465547,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880465553,
      "domComplete": 1703880465897,
      "domainLookupStart": 1703880465546,
      "loadEventStart": 1703880465897,
      "domContentLoadedEventEnd": 1703880465887,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880465547
    },

    {
      "connectStart": 1703880502035,
      "navigationStart": 1703880502030,
      "secureConnectionStart": 0,
      "fetchStart": 1703880502030,
      "domContentLoadedEventStart": 1703880502272,
      "responseStart": 1703880502036,
      "domInteractive": 1703880502271,
      "domainLookupEnd": 1703880502035,
      "responseEnd": 1703880502037,
      "redirectStart": 0,
      "requestStart": 1703880502035,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880502040,
      "domComplete": 1703880502280,
      "domainLookupStart": 1703880502035,
      "loadEventStart": 1703880502280,
      "domContentLoadedEventEnd": 1703880502272,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880502035
    },

    {
      "connectStart": 1703880545372,
      "navigationStart": 1703880545370,
      "secureConnectionStart": 0,
      "fetchStart": 1703880545370,
      "domContentLoadedEventStart": 1703880545694,
      "responseStart": 1703880545373,
      "domInteractive": 1703880545693,
      "domainLookupEnd": 1703880545372,
      "responseEnd": 1703880545375,
      "redirectStart": 0,
      "requestStart": 1703880545373,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880545377,
      "domComplete": 1703880545705,
      "domainLookupStart": 1703880545372,
      "loadEventStart": 1703880545705,
      "domContentLoadedEventEnd": 1703880545694,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880545373
    }
  ],
  "minified": [
    {
      "connectStart": 1703880594601,
      "navigationStart": 1703880594600,
      "secureConnectionStart": 0,
      "fetchStart": 1703880594600,
      "domContentLoadedEventStart": 1703880594855,
      "responseStart": 1703880594603,
      "domInteractive": 1703880594854,
      "domainLookupEnd": 1703880594601,
      "responseEnd": 1703880594603,
      "redirectStart": 0,
      "requestStart": 1703880594602,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880594604,
      "domComplete": 1703880594864,
      "domainLookupStart": 1703880594601,
      "loadEventStart": 1703880594865,
      "domContentLoadedEventEnd": 1703880594855,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880594602
    },

    {
      "connectStart": 1703880644884,
      "navigationStart": 1703880644882,
      "secureConnectionStart": 0,
      "fetchStart": 1703880644882,
      "domContentLoadedEventStart": 1703880645151,
      "responseStart": 1703880644885,
      "domInteractive": 1703880645151,
      "domainLookupEnd": 1703880644884,
      "responseEnd": 1703880644885,
      "redirectStart": 0,
      "requestStart": 1703880644884,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880644886,
      "domComplete": 1703880645161,
      "domainLookupStart": 1703880644884,
      "loadEventStart": 1703880645161,
      "domContentLoadedEventEnd": 1703880645151,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880644884
    },

    {
      "connectStart": 1703880714914,
      "navigationStart": 1703880714913,
      "secureConnectionStart": 0,
      "fetchStart": 1703880714913,
      "domContentLoadedEventStart": 1703880715160,
      "responseStart": 1703880714915,
      "domInteractive": 1703880715160,
      "domainLookupEnd": 1703880714914,
      "responseEnd": 1703880714916,
      "redirectStart": 0,
      "requestStart": 1703880714915,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880714919,
      "domComplete": 1703880715171,
      "domainLookupStart": 1703880714914,
      "loadEventStart": 1703880715171,
      "domContentLoadedEventEnd": 1703880715160,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880714915
    },

    {
      "connectStart": 1703880780962,
      "navigationStart": 1703880780959,
      "secureConnectionStart": 0,
      "fetchStart": 1703880780960,
      "domContentLoadedEventStart": 1703880781245,
      "responseStart": 1703880780963,
      "domInteractive": 1703880781244,
      "domainLookupEnd": 1703880780962,
      "responseEnd": 1703880780964,
      "redirectStart": 0,
      "requestStart": 1703880780962,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880780965,
      "domComplete": 1703880781255,
      "domainLookupStart": 1703880780962,
      "loadEventStart": 1703880781255,
      "domContentLoadedEventEnd": 1703880781245,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880780962
    },

    {
      "connectStart": 1703880820470,
      "navigationStart": 1703880820467,
      "secureConnectionStart": 0,
      "fetchStart": 1703880820468,
      "domContentLoadedEventStart": 1703880820745,
      "responseStart": 1703880820471,
      "domInteractive": 1703880820745,
      "domainLookupEnd": 1703880820470,
      "responseEnd": 1703880820471,
      "redirectStart": 0,
      "requestStart": 1703880820470,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880820475,
      "domComplete": 1703880820755,
      "domainLookupStart": 1703880820470,
      "loadEventStart": 1703880820755,
      "domContentLoadedEventEnd": 1703880820746,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880820470
    }
  ]
}""")

for content in ["raw", "minified"]:
  print(content)
  for num, run in enumerate(data[content]):
    li = run["domInteractive"] - run["domLoading"]
    icl = run["domContentLoadedEventStart"] - run["domInteractive"]
    clc = run["domComplete"] - run["domContentLoadedEventStart"]

    print(f"- Run, {num}, L-I, {li}, I-CL, {icl}, CL-C {clc}")
    print(run["domLoading"])
  print()
Results
raw
- Run, 0, L-I, 266, I-CL, 0, CL-C 8
1703880386434
- Run, 1, L-I, 224, I-CL, 1, CL-C 9
1703880427337
- Run, 2, L-I, 333, I-CL, 1, CL-C 10
1703880465553
- Run, 3, L-I, 231, I-CL, 1, CL-C 8
1703880502040
- Run, 4, L-I, 316, I-CL, 1, CL-C 11
1703880545377

minified
- Run, 0, L-I, 250, I-CL, 1, CL-C 9
1703880594604
- Run, 1, L-I, 265, I-CL, 0, CL-C 10
1703880644886
- Run, 2, L-I, 241, I-CL, 0, CL-C 11
1703880714919
- Run, 3, L-I, 279, I-CL, 1, CL-C 10
1703880780965
- Run, 4, L-I, 270, I-CL, 0, CL-C 10
1703880820475

Legend

  • L-I = domLoading to domInteractive

  • I-CL = domInteractive to domContentLoadedEventStart

  • CL-C = domContentLoadedEventStart to domComplete

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Seems Like There's Effectively No Difference Parsing Minified CSS
vs. Non-Minified

-- tldr/

I ran a few samples pulling timing data for page loads in
an attempt to tell if there was a difference between
page load times with Minified vs. Non-Minified CSS. I
wasn't able to identify one with my limited data run. 

Based on >this Constructing the Object Model>https://web.dev/articles/critical-rendering-path/constructing-the-object-model>
post it looks like the only difference between the two
would be lexing the characters into tokens. Someone 
with more resources will have to dig further into
the weeds to see difference there.

-- h2

Notes And Methodology

-- list

- This is an attempt to see if there's a difference between
the parsing times of a minified vs non-minified CSS file

- It's tough to figure out exactly what to look for. The 
data I'm using is "domLoading", "domInteractive", 
"domContentLoaded", and "domComplete" from my Vivaldi browser's
Navigation Timing API

- My hypothesis based on the diagram on 
the >MDN Navigation and resource timings page>https://developer.mozilla.org/en-US/docs/Web/Performance/Navigation_and_resource_timings page>
is that the CSS processing and creating of the >CSS Object Model>https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path#css_object_model>
is that the creation of the CSSOM happens in-between domLoading and domInteractive (along with a bunch of other stuff)

- All this work happens after the file is received which should mean network times are taken
out of it. I'm taking this approach to limit things to one variable at a time

- Times have a resolution of milliseconds via the >DOMHighResTimeStamp>https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/High_precision_timing#domhighrestimestamp>

- This is only 5 runs per file type. That's not much. It
was all manual and I don't have a non-trivial way to do
a bigger run. Take it for what it's worth

- The test files used were the `bulma.css`` and `bulma.min.css`` file which 
weigh in at 245,486 bytes and 207,302 bytes respectively

- I'm not using any of the styles from the CSS, but based off
this >Constructing the Object Model>https://web.dev/articles/critical-rendering-path/constructing-the-object-model>
post I expect that is effectively irrelevant. According to that page, by
the time rendering happens everything has been converted into object

- That page also points to the idea only real difference in timing would
be lexing from the characters to the tokens

- I ran the HTML file off localhost and called the CSS files externally
in order to use a server that compressed them with brotli

- The raw (non-minified) version of the file had domLoading to domInteractive
times between 224 and 333ms. The minified version was 241 to 279ms

- That makes me think that for my human level of processing any difference
would be washed out by jitter across the rest of the system. 

- The raw is up top if you want to play with it. The results
are below the data and code

-- h2

The Data And Results


-- code
-- python

import json 

data = json.loads("""{
  "raw": [
    {
      "connectStart": 1703880386425,
      "navigationStart": 1703880386424,
      "secureConnectionStart": 0,
      "fetchStart": 1703880386424,
      "domContentLoadedEventStart": 1703880386700,
      "responseStart": 1703880386427,
      "domInteractive": 1703880386700,
      "domainLookupEnd": 1703880386425,
      "responseEnd": 1703880386427,
      "redirectStart": 0,
      "requestStart": 1703880386426,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880386434,
      "domComplete": 1703880386708,
      "domainLookupStart": 1703880386425,
      "loadEventStart": 1703880386708,
      "domContentLoadedEventEnd": 1703880386700,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880386426
    },

    {
      "connectStart": 1703880427334,
      "navigationStart": 1703880427331,
      "secureConnectionStart": 0,
      "fetchStart": 1703880427332,
      "domContentLoadedEventStart": 1703880427562,
      "responseStart": 1703880427335,
      "domInteractive": 1703880427561,
      "domainLookupEnd": 1703880427334,
      "responseEnd": 1703880427335,
      "redirectStart": 0,
      "requestStart": 1703880427334,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880427337,
      "domComplete": 1703880427571,
      "domainLookupStart": 1703880427334,
      "loadEventStart": 1703880427571,
      "domContentLoadedEventEnd": 1703880427562,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880427334
    },

    {
      "connectStart": 1703880465546,
      "navigationStart": 1703880465544,
      "secureConnectionStart": 0,
      "fetchStart": 1703880465544,
      "domContentLoadedEventStart": 1703880465887,
      "responseStart": 1703880465547,
      "domInteractive": 1703880465886,
      "domainLookupEnd": 1703880465546,
      "responseEnd": 1703880465548,
      "redirectStart": 0,
      "requestStart": 1703880465547,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880465553,
      "domComplete": 1703880465897,
      "domainLookupStart": 1703880465546,
      "loadEventStart": 1703880465897,
      "domContentLoadedEventEnd": 1703880465887,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880465547
    },

    {
      "connectStart": 1703880502035,
      "navigationStart": 1703880502030,
      "secureConnectionStart": 0,
      "fetchStart": 1703880502030,
      "domContentLoadedEventStart": 1703880502272,
      "responseStart": 1703880502036,
      "domInteractive": 1703880502271,
      "domainLookupEnd": 1703880502035,
      "responseEnd": 1703880502037,
      "redirectStart": 0,
      "requestStart": 1703880502035,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880502040,
      "domComplete": 1703880502280,
      "domainLookupStart": 1703880502035,
      "loadEventStart": 1703880502280,
      "domContentLoadedEventEnd": 1703880502272,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880502035
    },

    {
      "connectStart": 1703880545372,
      "navigationStart": 1703880545370,
      "secureConnectionStart": 0,
      "fetchStart": 1703880545370,
      "domContentLoadedEventStart": 1703880545694,
      "responseStart": 1703880545373,
      "domInteractive": 1703880545693,
      "domainLookupEnd": 1703880545372,
      "responseEnd": 1703880545375,
      "redirectStart": 0,
      "requestStart": 1703880545373,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880545377,
      "domComplete": 1703880545705,
      "domainLookupStart": 1703880545372,
      "loadEventStart": 1703880545705,
      "domContentLoadedEventEnd": 1703880545694,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880545373
    }
  ],
  "minified": [
    {
      "connectStart": 1703880594601,
      "navigationStart": 1703880594600,
      "secureConnectionStart": 0,
      "fetchStart": 1703880594600,
      "domContentLoadedEventStart": 1703880594855,
      "responseStart": 1703880594603,
      "domInteractive": 1703880594854,
      "domainLookupEnd": 1703880594601,
      "responseEnd": 1703880594603,
      "redirectStart": 0,
      "requestStart": 1703880594602,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880594604,
      "domComplete": 1703880594864,
      "domainLookupStart": 1703880594601,
      "loadEventStart": 1703880594865,
      "domContentLoadedEventEnd": 1703880594855,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880594602
    },

    {
      "connectStart": 1703880644884,
      "navigationStart": 1703880644882,
      "secureConnectionStart": 0,
      "fetchStart": 1703880644882,
      "domContentLoadedEventStart": 1703880645151,
      "responseStart": 1703880644885,
      "domInteractive": 1703880645151,
      "domainLookupEnd": 1703880644884,
      "responseEnd": 1703880644885,
      "redirectStart": 0,
      "requestStart": 1703880644884,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880644886,
      "domComplete": 1703880645161,
      "domainLookupStart": 1703880644884,
      "loadEventStart": 1703880645161,
      "domContentLoadedEventEnd": 1703880645151,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880644884
    },

    {
      "connectStart": 1703880714914,
      "navigationStart": 1703880714913,
      "secureConnectionStart": 0,
      "fetchStart": 1703880714913,
      "domContentLoadedEventStart": 1703880715160,
      "responseStart": 1703880714915,
      "domInteractive": 1703880715160,
      "domainLookupEnd": 1703880714914,
      "responseEnd": 1703880714916,
      "redirectStart": 0,
      "requestStart": 1703880714915,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880714919,
      "domComplete": 1703880715171,
      "domainLookupStart": 1703880714914,
      "loadEventStart": 1703880715171,
      "domContentLoadedEventEnd": 1703880715160,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880714915
    },

    {
      "connectStart": 1703880780962,
      "navigationStart": 1703880780959,
      "secureConnectionStart": 0,
      "fetchStart": 1703880780960,
      "domContentLoadedEventStart": 1703880781245,
      "responseStart": 1703880780963,
      "domInteractive": 1703880781244,
      "domainLookupEnd": 1703880780962,
      "responseEnd": 1703880780964,
      "redirectStart": 0,
      "requestStart": 1703880780962,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880780965,
      "domComplete": 1703880781255,
      "domainLookupStart": 1703880780962,
      "loadEventStart": 1703880781255,
      "domContentLoadedEventEnd": 1703880781245,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880780962
    },

    {
      "connectStart": 1703880820470,
      "navigationStart": 1703880820467,
      "secureConnectionStart": 0,
      "fetchStart": 1703880820468,
      "domContentLoadedEventStart": 1703880820745,
      "responseStart": 1703880820471,
      "domInteractive": 1703880820745,
      "domainLookupEnd": 1703880820470,
      "responseEnd": 1703880820471,
      "redirectStart": 0,
      "requestStart": 1703880820470,
      "unloadEventEnd": 0,
      "unloadEventStart": 0,
      "domLoading": 1703880820475,
      "domComplete": 1703880820755,
      "domainLookupStart": 1703880820470,
      "loadEventStart": 1703880820755,
      "domContentLoadedEventEnd": 1703880820746,
      "loadEventEnd": 0,
      "redirectEnd": 0,
      "connectEnd": 1703880820470
    }
  ]
}""")

for content in ["raw", "minified"]:
  print(content)
  for num, run in enumerate(data[content]):
    li = run["domInteractive"] - run["domLoading"]
    icl = run["domContentLoadedEventStart"] - run["domInteractive"]
    clc = run["domComplete"] - run["domContentLoadedEventStart"]

    print(f"- Run, {num}, L-I, {li}, I-CL, {icl}, CL-C {clc}")
    print(run["domLoading"])
  print()

-- results/

raw
- Run, 0, L-I, 266, I-CL, 0, CL-C 8
1703880386434
- Run, 1, L-I, 224, I-CL, 1, CL-C 9
1703880427337
- Run, 2, L-I, 333, I-CL, 1, CL-C 10
1703880465553
- Run, 3, L-I, 231, I-CL, 1, CL-C 8
1703880502040
- Run, 4, L-I, 316, I-CL, 1, CL-C 11
1703880545377

minified
- Run, 0, L-I, 250, I-CL, 1, CL-C 9
1703880594604
- Run, 1, L-I, 265, I-CL, 0, CL-C 10
1703880644886
- Run, 2, L-I, 241, I-CL, 0, CL-C 11
1703880714919
- Run, 3, L-I, 279, I-CL, 1, CL-C 10
1703880780965
- Run, 4, L-I, 270, I-CL, 0, CL-C 10
1703880820475


-- /results

-- h2

Legend

-- list

- L-I = domLoading to domInteractive

- I-CL = domInteractive to domContentLoadedEventStart

- CL-C = domContentLoadedEventStart to domComplete


-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/Performance/Navigation_and_resource_timings
-- title: MDN: Navigation and resource timings


-- ref
-- url: https://web.dev/articles/critical-rendering-path/constructing-the-object-model
-- title: Constructing the Object Model - web.dev

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/Performance/Navigation_and_resource_timings
-- title: Navigation and resource timings - MDN

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path#css_object_model
-- title: Critical rendering path - CSS Object Model (CSSOM) - MDN

-- ref
-- url: https://web.dev/articles/critical-rendering-path/render-tree-construction
-- title: Render-tree Construction, Layout, and Paint

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/High_precision_timing#domhighrestimestamp
-- title: High precision timing - DOMHighResTimeStamp - MDN

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Resource_timing
-- title: Resource timing - MDN

-- ref
-- url: https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Navigation_timing
-- title: Navigation timing - MDN

-- categories
-- CSS 

-- metadata
-- date: 2023-12-29 15:17:43
-- id: 2aeq40qn
-- site: aws
-- type: post
-- status: published