So, I have a project in which I am trying to optimize a rather complex Javascript function for max - this is partly due to the fact that it is supposed to run on smartphones (Webkit) and count every bit.
I use various debugging and synchronization methods to go through my code and rewrite everything that may be slow - for example, parts of jQuery on which the native may work better and so on. What the function does is basically take a line of html text and cut it into exactly 3 DIVs that do not have a fixed position or size (client template mechanism).
Currently, the whole function takes about 100 ms to execute in the iPads browser (but in the working environment I ideally need to execute it 200 times), and the problem is that of these 100 ms, at least 20 ms because of this separate line of code (in 3 cycles):
var maxTop = $(cur).offset().top + $(cur).outerHeight();
"cur" is just a reference to the container div element, and the line above calculates its bottom position (so where my text should break). From looking at the jQuery offset code, I understand that it uses getBoundingClientRect and even removes the jQuery offset / size and calls it directly, does nothing to speed it up - therefore its getBoundingClientRect error (at least in Webkit). I have worked a bit on this, and I understand that it causes a redraw of the layout.
- , DOM-//, , ? ? , - ? -, ?
!