问题
I plan to replicate the statistics javascript from BBC News, but I'm intrigued by the CPU usage of that script (after you press the Start button). Can be an adding script so expensive?
Can you tell me why that script is so CPU expensive? I'm new to javascript but i think that simple arithmetic operations are consuming too much client CPU. Is that ok?
回答1:
The sheer amount of numbers being increased are the source of the high CPU usage. On my AMD Phenom II X2, it runs up about 19% of CPU on Firefox when running it. The source of that page is actually http://www.realtimestatistics.org/ , and if you look at the javascript, it's obfuscated, but I suspect some setTimeout()/setInterval function that increases the number by an amount every period of time. At the rate that's going, I suspect it's probably using up all 1000 slots in a second to do that, or at least a hundred, seeing how smooth the numbers are. Then it has to update your page, probably using a document.getElementById() function, and the numbers are even formatted, and are a lovely blue, which adds even more to the load.
Simple arithmetic does consume CPU, but modern processors like my 3.4 gHz dual core can blast through them in no time, and you don't even see that CPU usage spike in Task Manager. However, the CPU usage on that script from BBC News is almost a constant stream, and that does show up when you check Task Manager. Arithmetic is no problem on clients, as long as it doesn't take long to execute, does not freeze/hang the page, or isn't recurring.
EDIT: After a bit of decompiling and some eh, tricks from my old reverse engineering days, here's the source of the script file being ran on that page: http://news.bbc.co.uk/nol/shared/spl/hi/sci_nat/10/the_internet/counters/js/internet_ticker.js
If you look at it, this is the line for updating:
var currentValue = Math.floor(details.base + details.rate/1000 * differenceInMS(details.start, new Date()));
glow.dom.get(details.div).html("<strong>"+commaFormatted(currentValue)+"</strong>");
It's adding, then dividing, and flooring, all pretty labor intensive, and it even has to create a new Date() variable as well. And tracing that differenceInMS() function, you see that you get even more of flooring and time functions. If I was doing this, I would have just did a simple setTimeout() with arithmetic, and probably a bit less labor intensive to keep finding the current date and time. Oh, and there you have it glow.dom.get() has to search and find that part of the page, and then it converts the numbers into comma form, before updating. Entire script is pretty thirsty for processing power.
Lesson learned: Either go with labor intensive and be short, or simple and long. Don't try to do what they're doing, both processor intensive and recurring at short time intervals. That drags down your CPU quickly. If that's burning 19% average on my dual cure 3.4 gHz AMD Phenom, imagine it running on something like an old laptop. That could easily max out the processor and cause page hangs and freezes. Oh, and as an added side note, running on the x64 version of Firefox is lowering the CPU usage on my x64 processor. Another reason for my years of begging Adobe and Firefox to go x64. Fingers crossed for Firefox 4.0.
来源：https://stackoverflow.com/questions/4534421/cpu-expensive-javascript