Forum How do I...?

Horrible JS performance. What's going on?

jiia
Hey, I'm having a huge problem with Prince. I'm manipulating a huge document with numerous tables inside it. The customer wanted some features that I could not implement without crawling through the entire document multiple times in JS. Once I got everything working I noticed that the generation time had increased by at least tenfold.

I did some benchmarking and found out that Chrome executes my scripts in the combined.html in 30 milliseconds. However for Prince it takes a whopping 39226 ms to execute the same scripts.

The documents are condifential for the time being so I can't attach them here yet. But I can say that the problematic part of the document consists of multiple tables with just over 10,000 table cells in total.

I understand that prince can be a little slower, but being over 1000 times slower seems weird! Does anyone have any idea what might be the problem?

Prince log:
charts.init:  0 ms.
buildTOC.init:  150 ms.
changeHeaderText:  7063 ms.
findPageBreaks:  24958 ms.
fixPdfUtils:  7055 ms.


Chrome log:
charts.init:  0 ms.
buildTOC.init:  18 ms.
changeHeaderText:  4 ms.
findPageBreaks:  7 ms.
fixPdfUtils:  1 ms.
  1. pdf-scripts.txt5.4 kB
mikeday
Which version of Prince are you running?
jiia
Prince 10 rev 5
mikeday
Would you be able to email me (mikeday@yeslogic.com) a sample script that demonstrates the problem? Then we can run some performance profiling.
mikeday
It appears that the problem is due to getElementsByTagName, which has to handle live lists of DOM nodes and has not been heavily optimised yet. We may be able to address this in a future release of Prince.
jiia
Hey, thanks for the tips! I used querySelectorAll as you suggested and the performance boost was huge!

// Old
$('.selector')

// New
$(document.querySelectorAll('.selector'))


charts.init:  0 ms.
buildTOC.init:  166 ms.
changeHeaderText:  24 ms.
findPageBreaks:  1843 ms.
fixPdfUtils:  12 ms.


From 39 seconds to just 2 seconds :)
mikeday
That's great! We will shortly release an updated build that greatly improves the speed of getElementsByTagName and getElementsByClassName, but querySelectorAll is still the best option for most situations.
mikeday
The new latest build with faster live node list methods is now available. :)