2020.2

before() and after() are resource intensive.
Try avoiding DOM modifications, especially within loops. Storing the content in a variable and
appending the information after the loop is more efficient: this way, the template will be touched
only once.
Example
The following example loads a snippet into a variable and uses the find() and text() commands
of the Designer scripting API.
var labelElm = loadhtml('snippets/label.html');
for(var i = 0; i < record.tables.products.length; i++) {
var label = labelElm.clone();
label.find('@ProductLabel@').text(record.tables.products
[i].ProductDescription);
results.after(label);
}
What's wrong with this code is that it inserts the personalized information within the loop. The
after() command runs as many times as there are records in the detail table 'products'.
The script below is much more efficient: it adds the personalized content to a string called
labelStr and only calls after() after the for loop.
var labelElm = loadhtml('snippets/label.html');
var labelStr = "";
for( var i = 0; i < record.tables.products.length); i++) {
var label = labelElm.clone();
label.find('@ProductLabel@').text(record.tables.products
[i].ProductDescription);
labelStr += label;
}
results.after(labelStr);
Use replace()
When personalizing HTML fragments retrieved from a snippet or from the template itself,
JavaScript's replace() method shows the best performance.
Replace() can only be used on Strings, while the commands loadhtml() and query() return or
a QueryResult, which is a set of strings, like the results object.
Page 398