Inline template performance

[andrewjtait]

I was curious if inline templates would be faster than using an ERB file, but after running some benchmarks I was surprised to find it is actually much slower.

Here are the results for the tests I ran:

Warming up --------------------------------------
             inline:     3.754k i/100ms
          component:    14.523k i/100ms
            partial:     1.683k i/100ms
Calculating -------------------------------------
             inline:     37.789k (± 4.2%) i/s -    379.154k in  10.052879s
          component:    150.874k (± 3.0%) i/s -      1.510M in  10.020907s
            partial:     17.263k (± 4.5%) i/s -    173.349k in  10.070115s

Comparison:
          component::   150874.1 i/s
             inline::    37789.4 i/s - 3.99x  (± 0.00) slower
            partial::    17262.6 i/s - 8.74x  (± 0.00) slower

This is the code I used for the inline example:

class InlineComponent < ViewComponent::Base
  def initialize(name:)
    @name = name
  end

  def call
    content_tag :h1 do
      "hello #{@name}"
    end
  end
end

This makes me confident that sticking with template files is the best approach, but I was curious if anyone knows why this is slower? I'll continue to look into it myself, but if anyone already knows the cause I'd be interested to find out more.

[joelhawksley]

@andrewjtait thank you for filing this issue!

I wonder if this is a speed issue with ViewComponent or with content_tag. In my limited experience and based on some heresay, I believe that content_tag isn't the most performant way of building HTML.

Would you be up for running a similar benchmark on Rails itself, comparing content_tag and partials?

I do think we should consider documenting this issue and perhaps landing an update to our internal benchmark script to include this example. Would you be up for opening a PR?

[andrewjtait]

I wonder if this is a speed issue with ViewComponent or with content_tag.

@joelhawksley thats an interesting point. To test it I've changed the NameComponent used in the benchmark to use a content_tag and it looks as though it is the cause as the "component" test is now also slow:

Warming up --------------------------------------
             inline:     3.940k i/100ms
          component:     3.390k i/100ms
            partial:     1.178k i/100ms
Calculating -------------------------------------
             inline:     39.635k (± 4.1%) i/s -    397.940k in  10.059590s
          component:     33.701k (± 3.8%) i/s -    339.000k in  10.075763s
            partial:     11.574k (± 3.6%) i/s -    116.622k in  10.091735s

Comparison:
             inline::    39634.8 i/s
          component::    33701.4 i/s - 1.18x  (± 0.00) slower
            partial::    11574.2 i/s - 3.42x  (± 0.00) slower

I also ran the benchmarks to use content_tag but without a block (content_tag :h1, "hello #{@name}") and it seems to have a considerable effect:

Warming up --------------------------------------
             inline:    11.501k i/100ms
          component:     9.526k i/100ms
            partial:     1.545k i/100ms
Calculating -------------------------------------
             inline:    132.938k (± 6.2%) i/s -      1.334M in  10.081177s
          component:    107.408k (± 2.2%) i/s -      1.076M in  10.026770s
            partial:     17.358k (± 4.9%) i/s -    173.040k in  10.000433s

Comparison:
             inline::   132938.1 i/s
          component::   107408.0 i/s - 1.24x  (± 0.00) slower
            partial::    17357.6 i/s - 7.66x  (± 0.00) slower

Now that my tests are more consistent, it does confirm that inline templates are faster than using an ERB file. Which is what I would expect!

I do think we should consider documenting this issue and perhaps landing an update to our internal benchmark script to include this example. Would you be up for opening a PR?

I'm not sure if this is an issue worth documenting, it should be expected that the more stuff used within the template then the slower it will be - whether that's content_tag or something else. It was more of an oversight on my part really.

However I'd be happy to still add the "inline" benchmark if you think there is merit to it? I suppose a more accurate implementation of it would be something like:

class InlineComponent < ViewComponent::Base
  def initialize(name:)
    @name = name
  end

  def call
    "<h1>hello #{@name}</h1>".html_safe
  end
end

[andrewjtait]

Either way, I've raised the PR to add the benchmark here 🙂 #1024

[jrochkind]

wow, this is helpful, I was in the process of converting an app that used a sort of custom home grown similar-to ViewComponent, to actual ViewComponent... and I have a lot of inline components, and I was starting to wonder why I wasn't getting the speed gains I was expecting. Indeed, they all use content_tag. This is somewhat distressing; I wonder why content_tag is so slow, or if there is a good alternative to it for an inline component...

I guess it looks like trying to use it in it's two-arg form instead of with block param helps a lot, although of course is a lot less readadable. How odd. I wonder if it's worth trying to profile it in Rails and PR a perf improvement.