Performance observations

[thevtm]

Firstly, I want to say I’ve really enjoyed using this library, so I decided to explore its performance under load.

To do this, I ran a benchmark comparing a few straightforward optimization strategies. Specifically, I looked at performance differences between smaller components with just a few elements versus a larger component containing 1000 elements.

One observation stood out: collapsing components into a single Raw() significantly improved performance, showing gains over 300x for the larger component.

While I don’t have specific recommendations at the moment, I thought it might be interesting to share these findings with you.

$ go test -v --benchmem --bench . ./scratch/go-components-benchmark_test.go
goos: linux
goarch: amd64
cpu: Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
BenchmarkStaticSmall
BenchmarkStaticSmall-12              	 3588330	       323.9 ns/op	     104 B/op	       7 allocs/op
BenchmarkStaticSmallToRaw
BenchmarkStaticSmallToRaw-12         	36431824	        39.23 ns/op	      24 B/op	       1 allocs/op
BenchmarkDynamicSmall
BenchmarkDynamicSmall-12             	 3742520	       321.5 ns/op	      96 B/op	       7 allocs/op
BenchmarkDynamicSmallToRaw
BenchmarkDynamicSmallToRaw-12        	 6603398	       204.6 ns/op	      72 B/op	       4 allocs/op
BenchmarkStaticLarge
BenchmarkStaticLarge-12              	    2380	    635167 ns/op	  206971 B/op	   10810 allocs/op
BenchmarkStaticLargeCache
BenchmarkStaticLargeCache-12         	    3696	    320086 ns/op	   39575 B/op	    5030 allocs/op
BenchmarkStaticLargeToRaw
BenchmarkStaticLargeToRaw-12         	  530688	      2081 ns/op	   18432 B/op	       1 allocs/op
BenchmarkStaticLargeToRawCache
BenchmarkStaticLargeToRawCache-12    	  573744	      2024 ns/op	   18432 B/op	       1 allocs/op
PASS
ok  	command-line-arguments	11.965s

Code

package main

import (
	"bytes"
	"fmt"
	"testing"

	gc "maragu.dev/gomponents"
	h "maragu.dev/gomponents/html"
)

func StaticSmall() gc.Node {
	return h.H1(gc.Text("Hello, World!"))
}

func BenchmarkStaticSmall(b *testing.B) {
	buf := new(bytes.Buffer)

	for i := 0; i < b.N; i++ {
		StaticSmall().Render(buf)
		buf.Reset()
	}
}

func BenchmarkStaticSmallToRaw(b *testing.B) {
	node := StaticSmall()

	buf := new(bytes.Buffer)
	node.Render(buf)
	raw_str := buf.String()

	component := func() gc.Node {
		return gc.Raw(raw_str)
	}

	buf = new(bytes.Buffer)

	for i := 0; i < b.N; i++ {
		component().Render(buf)
		buf.Reset()
	}
}

func DynamicSmall(s string) gc.Node {
	return h.H1(gc.Text(s))
}

func BenchmarkDynamicSmall(b *testing.B) {
	buf := new(bytes.Buffer)

	for i := 0; i < b.N; i++ {
		DynamicSmall("foobar").Render(buf)
		buf.Reset()
	}
}

func BenchmarkDynamicSmallToRaw(b *testing.B) {
	node := DynamicSmall("%s")

	buf := new(bytes.Buffer)
	node.Render(buf)
	raw_str := buf.String()

	component := func(s string) gc.Node {
		return gc.Raw(fmt.Sprintf(raw_str, s))
	}

	buf = new(bytes.Buffer)

	for i := 0; i < b.N; i++ {
		component("foobar").Render(buf)
		buf.Reset()
	}
}

func StaticLarge() gc.Node {
	lis := make(gc.Group, 1000)

	for i := 0; i < 1000; i++ {
		lis[i] = h.Li(gc.Textf("Item %d", i))
	}

	return h.HTML(
		h.Head(
			h.Meta(gc.Attr("charset", "UTF-8")),
			h.Title("Hello, World!"),
		),
		h.Body(
			h.H1(gc.Text("Hello, World!")),
			h.P(gc.Text("This is a paragraph")),
			h.A(gc.Text("Click me"), gc.Attr("href", "/")),
			h.Ul(lis),
		),
	)
}

func BenchmarkStaticLarge(b *testing.B) {
	buf := new(bytes.Buffer)

	for i := 0; i < b.N; i++ {
		StaticLarge().Render(buf)
		buf.Reset()
	}
}

func BenchmarkStaticLargeCache(b *testing.B) {
	buf := new(bytes.Buffer)
	node := StaticLarge()

	for i := 0; i < b.N; i++ {
		node.Render(buf)
		buf.Reset()
	}
}

func BenchmarkStaticLargeToRaw(b *testing.B) {
	node := StaticLarge()

	buf := new(bytes.Buffer)
	node.Render(buf)
	raw_str := buf.String()

	component := func() gc.Node {
		return gc.Raw(raw_str)
	}

	buf = new(bytes.Buffer)

	for i := 0; i < b.N; i++ {
		component().Render(buf)
		buf.Reset()
	}
}

func BenchmarkStaticLargeToRawCache(b *testing.B) {
	node := StaticLarge()

	buf := new(bytes.Buffer)
	node.Render(buf)
	raw_str := buf.String()

	component := func() gc.Node {
		return gc.Raw(raw_str)
	}

	node_raw := component()

	buf = new(bytes.Buffer)

	for i := 0; i < b.N; i++ {
		node_raw.Render(buf)
		buf.Reset()
	}
}

[markuswustenberg]

@thevtm thanks for that! Yeah, I would expect just pushing one big string literal with raw being faster. That's okay.

I would actually be interested in finding out how long some large documents with, say, a few thousand elements and attributes (built deterministically) take to render, and then outputting the result of that benchmark as part of the CI pipeline, to catch whether refactors make anything worse. If you'd be interested in contributing, let me know! 😊