DataTables 3 beta + FontAwesome performance issues
DataTables 3 beta + FontAwesome performance issues
toow
Posts: 1Questions: 0Answers: 0
Hi,
I'm seeing performance issues when using the DataTables 3 beta with FontAwesome JS+SVG icons.
Compared to DataTables 2, the same dataset and rendering pattern results in significantly increased rendering time (~10× slower). My table has numerous <span class="fa..."> elements being generated by render functions.
Profiling shows FontAwesome's MutationObserver callbacks increasing from ~85 samples in DataTables 2 (6.3%) to ~6195 samples (84%) in DataTables 3, with nearly all time spent in the observer callback itself.
Example using DT3beta: https://jsfiddle.net/htqrkc4y/
Same example using DT2: https://jsfiddle.net/pfowrdqx/
DT3beta "fixed" example: https://jsfiddle.net/k8myha6d/
(The performance issue is hopefully very noticeable if you try to reorder the columns, etc).
As shown in the 3rd link, Disabling Font Awesome’s mutation observer and manually calling FontAwesome.dom.i2svg() once, via the initComplete option, seems to resolve the issue, perhaps suggesting that increased DOM mutation frequency or timing differences in DT3 may be triggering excessive Font Awesome processing?
Thanks, can't begin to say how much I love DataTables and am looking forward to DT3! 
Replies
We're also using DT and FontAwesome and recently saw warnings and errors in the console while using the libraries together. We also were using v6.x branch of Fontawesome and I decided to upgrade to v7.2+. After the upgrade to the newer version the warnings and errors disappeared.
Perhaps worth a try
Really interesting this one - many thanks for the test cases.
What I can see happening is:
The upshot is that
querySelectorAllin the FontAwesome code is running many individual times for the DT3 code, while for the DT2 code with jQuery it is running just once on all of the elements, and that is massively faster.What I need to do is group the
appendoperations to the table body. At the moment I callElement.prototype.append()for each element, and that's what I believe is causing the issue.I will look into using a document fragment and then appending that. Unfortunately, I need to dash out just now, but I'll look into this further tomorrow and report back.
Allan
I made a couple of commits last night and your example is running much better with FA now: https://jsfiddle.net/0vpqd485/ .
Those changes will be in v3.0.0 which it ships (a couple of weeks).
Many thanks for the feedback!
Allan