Rendering Modes of Master CSS
Master CSS provides three rendering modes, which you can choose according to project scale and application scenarios to meet your current business requirements.
It's flexible — can be runtime, zero-runtime, or even both.
Recommended Progressive Rendering Learn more | Easiest Runtime Rendering Learn more | Zero Runtime Static Extraction Learn more |
|---|---|---|
Hybrid | Runtime | Zero-runtime |
Applicable technologies | ||
SSG, SSR | CSR, SPA | - |
Generated source | ||
HTML string | Runtime DOM Tree |
|
Application scenarios | ||
SaaS Software as a Service | SaaS Software as a Service | - |
Highly dynamic applications | Highly dynamic applications | Semi-dynamic applications |
Dashboard | Dashboard | Semi-dynamic dashboard |
Static site | Static site | Static site |
Page load | ||
Lazy loading runtime engine | ~16KB runtime engine | No runtime engine |
Page-used CSS | Generate CSS at runtime | Load all pages CSS |
Internal CSS | Render-blocking JS resources | Render-blocking CSS resources |
Fastest | - | - |
SEO metrics evaluation | ||
FCP (First Contentful Paint) | - | - |
The cost of browser-calculating CSS | ||
Minimal, CSS generated on demand | Minimal, CSS generated on demand | Including page-unused CSS |
~0.01ms/class generation cycle | ~0.01ms/class generation cycle | None, pre-generated CSS |
Browser caching | ||
Internal CSS in HTML | External JS file | External CSS file |
Dynamic and conditoinal class names | ||
Fully dynamic | Fully dynamic | Semi-dynamic |
Fully dynamic | Fully dynamic | Semi-dynamic |
The reliability of CSS rules | ||
|
| Scan all source files |
100% reliability | 100% reliability | Irregular sources |
Setup difficulty | ||
transform HTML method | Import engine into the entry file | Import CSS into the entry file |
Guide | Guide | Guide |