Why is Marko Fast?

Targeted Compilation

The Marko compiler produces two outputs: one for the server, and one for the browser. Each compilation produces code optimized for its specific environment. To get a feel for this, visit our playground and select "Client JS" or "Server JS" in the preview menu.

HTML Streaming

Marko has first-class support for HTML streaming, allowing content to be sent to the browser as soon as it's ready rather than waiting for the entire page to finish rendering:

// Fast content renders immediately
<h1>${input.title}</h1>
<section>
  <${input.content}/>
</section>
// Slow content streams when ready
<await|recommendations|=fetchRecommendations(input.id)>
  <ul>
    <for|item| of=recommendations>
      <li>${item.title}</li>
    </for>
  </ul>
</await>

export interface Input {
  title: string;
  content: Marko.Body;
  id: string;
}
// Fast content renders immediately
<h1>${input.title}</h1>
<section>
  <${input.content}/>
</section>
// Slow content streams when ready
<await|recommendations|=fetchRecommendations(input.id)>
  <ul>
    <for|item| of=recommendations>
      <li>${item.title}</li>
    </for>
  </ul>
</await>

// Fast content renders immediately
h1 -- ${input.title}
section
  ${input.content}
// Slow content streams when ready
await|recommendations|=fetchRecommendations(input.id)
  ul
    for|item| of=recommendations
      li -- ${item.title}

export interface Input {
  title: string;
  content: Marko.Body;
  id: string;
}
// Fast content renders immediately
h1 -- ${input.title}
section
  ${input.content}
// Slow content streams when ready
await|recommendations|=fetchRecommendations(input.id)
  ul
    for|item| of=recommendations
      li -- ${item.title}

Marko flushes the heading and main section immediately. When fetchRecommendations() resolves, the recommendations section streams to the client.

Marko has supported streaming since 2013, predating other frontend frameworks by nearly a decade. See HTML Streaming for more details.

JS Scales from Zero

A key difference between Marko 6 and other frameworks is what it doesn't need to include in the client bundle. Static content compiles to zero client-side JavaScript even when it is in the same template as interactive content, and work that happens on the server is never re-executed by browser JS unless necessary.

<h1>${input.product.name}</h1>
<p>${input.product.description}</p>
<div>Price: $${input.product.price}</div>

<let/quantity=1>
<button onClick() { quantity-- }>
  -
</button>
<span>${quantity}</span>
<button onClick() { quantity++ }>
  +
</button>

export interface Input {
  product: Marko.AttrTag<{ name: string; content: Marko.Body; price: number }>
}

<h1>${input.product.name}</h1>
<p>${input.product.description}</p>
<div>Price: $${input.product.price}</div>

<let/quantity=1>
<button onClick() { quantity-- }>
  -
</button>
<span>${quantity}</span>
<button onClick() { quantity++ }>
  +
</button>

h1 -- ${input.product.name}
p -- ${input.product.description}
div -- Price: $${input.product.price}

let/quantity=1
button onClick() { quantity-- } -- -
span -- ${quantity}
button onClick() { quantity++ } -- +

export interface Input {
  product: Marko.AttrTag<{ name: string; content: Marko.Body; price: number }>
}

h1 -- ${input.product.name}
p -- ${input.product.description}
div -- Price: $${input.product.price}

let/quantity=1
button onClick() { quantity-- } -- -
span -- ${quantity}
button onClick() { quantity++ } -- +

Tree-Shakeable Runtime

The Marko runtime is not distributed as a single JavaScript file. The compiler generates code that imports only the specific runtime helpers needed by each template.

<let/color="red">
<div style={ "background-color": color }>
  Content
</div>

let/color="red"
div style={ "background-color": color } -- Content

The compiled code imports a helper for applying the style:

import { _attr_style_item } from "marko/dom";

// ...rest of compiled output

Templates only import the helpers they use, and bundlers tree-shake the rest. This means if a Marko feature isn't used in an app, no code for it is included in the bundle.

Compile-Time Reactivity

Reactivity analysis happens entirely at compile time:

<let/count=0>
<const/doubled=count * 2>

<button onClick() { count++ }>
  ${count} × 2 = ${doubled}
</button>

let/count=0
const/doubled=count * 2

button onClick() { count++ } -- ${count} × 2 = ${doubled}

Before generating runtime code, the compiler determines that count is mutable state, doubled depends on count, and the text nodes in the button depend on count and doubled. When count changes, the runtime executes a pre-computed sequence: recalculate doubled, and update two text nodes inside the button. No dependency tracking happens at runtime.

What is a Fast Framework?

A fast framework needs more than performance optimizations. The wins in this page mean little if developers write inefficient code or create request waterfalls. A truly fast framework provides a language design that guides developers toward efficient patterns by default.

Marko is a performance pit of success. HTML streaming is built in and works naturally with async operations, static content remains static without manual optimization, and reactivity happens at compile time. The framework handles these concerns automatically when developers write straightforward component code.

Over 12 years of development, Marko has accumulated lessons about what matters for real-world performance and evolved accordingly. These architectural decisions, combined with hundreds of smaller optimizations, make Marko the fastest SSR framework with the smallest client bundles and an effective tool for building efficient websites.

Further Reading

• Why Marko?
• Targeted Compilation
• Fine-Grained Bundling
• HTML Streaming

Contributors

Helpful? You can thank these awesome people! You can also edit this doc if you see any issues or want to improve it.

• LuLaValva
• You?