PageSpeed : Avoid long-running Scripts

Published

What is a Long Running Script ?

A long running script is "A script takes too long to run or is not responding".
One of the critical performance issues of JavaScript is that code execution  freezes a webpage. 
only one script can be run on a window/tab at a time, because JavaScript is a single threaded language.
all other user interactions are being halted at the time of execution. You might ask "Why so"? it is because JavaScript may change the structure of the webpage after execution. it'll not be good to see a page without dressed well. 
So if the JavaScript is not coded well, it might cause  the page to freeze and stop responding.

Most browsers will determine long running scripts and notify user via dialogue, asking whether to allow the actions or to stop executing the script.


How Does it affect the PageSpeed/performance?


The term "long running Script" itself tell us what it is. and how that will affect the page.

When we have scripts that running in our website or blog, there are possibilities to take it long time to execute if we haven't coded it well.


So, What determines the script is a Long Running Script ?


This depends on browser which is being used by user.

Internet Explorer Checks  whether the script is long running or not, by the the total amount of statements the JScript Engine has executed.
By default, it is 5 million statements and user can  alter it via a registry setting.
When the limit is exceeded, you'll get this message
“A script on this page is causing Internet Explorer to run slowly. If it continues to run, your compute may become unresponsive.” 

Firefox determines that a script is long-running by timing how long the script engine has been executing code continuously. The default time is set to 10 seconds and can be altered via about:config
After the time limit,you'll get this message.
 “A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue,”

Google Chrome does display a dialogue if there is any long running or unresponsive codes. 
and clicking on kill pages will flush out the page an memory.

As many experts have said, Opera doesn't seems to have detect long running scripts/ or they have their own solution for that problem.

Solution/Recommendation


Just Avoid long-running Scripts.
You may try using some JavaScript profiler to find performance bottlenecks. Firebug and chrome devtools supports profiling JavaScript.

No script should take longer than 100ms to execute on any browser at any time. If it takes any longer than that, the processing must be split up into smaller chunks.

if you are familiar with JavaScript, then below are some suggestions.

  • Update the DOM as infrequently as possible. Make your changes to in-memory DOM objects and append them only once to the DOM.
  • Use innerHTML. It's faster than DOM methods in most browsers.
  • Use event delegation instead of regular event handling.
  • Know which calls are expensive, and avoid them. For example, in jQuery, $("div.className") will be more expensive than $("#someId").
  • Loop as little as possible. If you have one function that collects DOM nodes, and another that processes them, you are looping twice. Instead, pass an anonymous function to the function that collects the nodes, and process the nodes as your are collecting them.
  • Use native functionality when possible. For example, forEach iterators.
  • Use setTimeout to let the browser breathe once in a while.
  • For expensive functions that have idempotent outputs, cache the results so that you don't have to recompute it.


Comments

Post a Comment

Subscribe to: Post Comments ( Atom )