5

I wrote a small jquery plugin that basically converts all words in an html element to spans, makes them invisible and then animates them into view. I made it so that you can define the time that it's supposed to take to load the whole element, and based on tests the math seems to be right, but in practice it takes quite a bit longer.

See jsfiddle: http://jsfiddle.net/A2DNN/

Note the variables "per" and "ms", this basically tells it to process "per" number of words every "ms" milliseconds.

In the log you'll see it'll process 1 word ever 1 ms, which should result in a MUCH faster loading time.

So I'm just wondering, is it possible that the CPU is forming a bottleneck here? In that JS is fading items into view, which is handled by the CPU, which isn't very fast at graphical processing.

It sounds almost silly to ask, I'd expect these days a CPU would laugh at a small bit of work load like this.

Naatan
  • 3,424
  • 4
  • 32
  • 51
  • 4
    No small workload, considering the enormous amount of layers of abstraction your JavaScript must go through to be ran on actual metal. – Brad Oct 03 '11 at 19:30
  • 3
    The vast majority of the work is not in the javascript itself; it's in the browser's DOM since it has to create a leaf-heavy tree of `span` tags, not to mention the inline styling of each one of them independently. – namuol Oct 03 '11 at 19:31
  • Ok, so basically JS isn't the bottleneck.. the DOM is. That's a shame, guess for the time being I can't really work around that. Feel free to submit your comment as an answer. – Naatan Oct 03 '11 at 19:33

1 Answers1

3

It is due to a minimum timeout forced by the browser's JavaScript implementation. You can't have a 1ms timeout, it is slightly more than that. There has already been a discussion about that here.

Community
  • 1
  • 1
Igor Zinov'yev
  • 3,676
  • 1
  • 33
  • 49
  • That seems to be it. I just tried it in Chrome which loads it significantly faster (I was using Firefox). I get why they imposed the limit, but at the same time it feels like a nasty workaround on their side to prevent abuse. – Naatan Oct 03 '11 at 19:37
  • Maybe, but is it really that necessary to have a 1ms timeout? Have you tried to process more than one `span` per function call? You can't really tell if ten words appear simultaneously or with a 1ms delay. – Igor Zinov'yev Oct 03 '11 at 19:44
  • 1
    Yeah that might be a good compromise, thanks for the suggestion. – Naatan Oct 03 '11 at 19:46
  • 1
    I did as you suggested, set it to at the minimum process spans every 5 ms and the results look exactly the same as Chrome (ie. it worked, thanks!). Still weird though, seems Firefox was auto adjusting the interval I gave it to a larger number, but that number apparently was higher than the browsers minimum allowed ms. Weird. – Naatan Oct 03 '11 at 19:51
  • As I recall from the docs, the 4ms timeout minimum is used in FF starting with v4, but maybe it is only used when you switch the browser to the standards compliance mode? Have you tried using the HTML5 or XHTML DOCTYPE? – Igor Zinov'yev Oct 04 '11 at 08:09
  • Yeah I was already using the HTML5 doctype. No matter though, the workaround works and visually you can hardly tell the difference. – Naatan Oct 04 '11 at 16:49