Are there performance benefits to ember-template-lint/no-unnecessary-concat?

Performance
1

Does anyone know if the difference between these two is purely stylistic (note the quotes around the src attribute)?

<img src="{{this.companyLogo}}">
<img src={{this.companyLogo}}>

Are there minor performance benefits to the second approach since it seems that there might not be a concatenation operation happening based on ember-template-lint/no-unnecessary-concat?

1 Like
2

I was unsure about this so I compiled both of those and here’s what comes out. You can find this in your built app by searching for the name of the template:

// <img src="{{this.companyLogo}}">
Ember.HTMLBars.template({
    "id": "jfube/fC",
    "block": "[[[10,\"img\"],[15,\"src\",[29,[[30,0,[\"companyLogo\"]]]]],[12],[13]],[],false,[]]",
    "moduleName": "sample/templates/application.hbs",
    "isStrictMode": false
  });

// <img src={{this.companyLogo}}>
Ember.HTMLBars.template({
    "id": "US8uEe1X",
    "block": "[[[10,\"img\"],[15,\"src\",[30,0,[\"companyLogo\"]]],[12],[13]],[],false,[]]",
    "moduleName": "sample/templates/application.hbs",
    "isStrictMode": false
});

The “block” property is the compiled template code, as a string (because that lets you delay the parse cost until you actually need it). It’s easier to read if we pull it out and parse it:

// <img src="{{this.companyLogo}}">
let block1 = [
  [
    [10, "img"],
    [15, "src", 
      [29, 
        [
         [30, 0, ["companyLogo"]]
        ]
      ]
    ],
    [12],
    [13]
  ],
  [],
  false,
  []
]

// <img src={{this.companyLogo}}>
let block2 = [
  [
    [10, "img"],
    [15, "src",
      [30, 0,["companyLogo"]]
    ],
    [12],
    [13]
  ],
  [],
  false,
  []
]

The extra 29 in the first example is the Concat opcode.

So yes, you really do get an extra concatenation at runtime when you use the quotes.

Is that expensive enough to matter? I would guess not but I haven’t measured.

4 Likes
3

@ef4 thank you for that insight! very interesting.