Optimizing JavaScript

The most common use of the language JavaScript is a web page. Free action scripts written by us may deter potential users. We should therefore strive to make our applications run smoothly andquickly. JavaScript as a language interpretowalny is incomparably slower than kompilowalnych language, usually written in JS programs are so small that this could not be observed. Problems begin when your code grows and we begin to see the alarming slowdown.

How do I fix this:

1. Tools

We need the right tools to be able to check whether the amendments introduced by us produce any results. With the help can come to us in addition to Firefox Firebug, by means of which we will be able to track any errors in our script and monitor the speed of implementation of selected parts of our application.

Page views snippets can be monitored through the console:

console.time (naszaFunkcja “);
naszaFunkcja ();
console.timeEnd (naszaFunkcja “);

The page refreshes to where there is this code in the console Firebug’a should see a notification:

Optymalizacja Javascript  - Firebug konsola

So now we know how we will examine whether the changes produce the effect, so we can start to implement.

2. Change of variables global to local

Instead of:

var glob = 2;

function fun () (

* glob = glob glob glob *;

)

Write:

var glob = 2;

function fun () (

var loc = glob;

loc = loc * loc * loc;

loc = glob;

)

Rationale: Access to local variables in JS is much faster than the variable global (more about the scope chain). Such action makes sense only if the global variable referenced in function more than once.

3. Avoid using with

Rationale: Adds additional fields to the scopechain, which significantly affect the rate of appeals to local and global variables.

4. Remember to use var when declaring variables.

5. Access to object attributes

Please note that access to the object attribute such object.name will always be faster than object.name.name. (There is no difference between appeals object.name and object. ["Name"].)

Instead of:

function fun (date) (

if (data.count> 0) (

for (var i = 0 and <data.count i + +) (

fun_2 (data.item [i]);

)

)

)

Write:

function fun (date) (

var count = data.count, item = data.item;

if (count> 0) (

for (var i = 0; i <count; i + +) (

fun_2 (item [i]);

)

)

)

6. Loops

Not important which type of loop you (while, for, do-while) most important is that treatments are moving inside the loop and the number of iterations the loop executes.

Instead of:

for (var i = 0 and <data.count i + +) (

)

Write:

var count = data.count;

for (var i = 0; i <count; i + +) (

)

End loop condition:  i <count verify that the expression i <count == true, and thus performs a doublecomparison.

So instead of:

for (var i = 0 and <data.count i + +) (

)

Write:

var count = data.count;

for (var i = count; and-;) (

)

All forEach loop type (including available in libraries such as JQuery) are slower than standard loop. It is therefore necessary to consider the change in the standard loops, at least in critical parts of our application.

7. HOME

Please note that access to facilities, the DOM is very slow.

So avoid:

var divs = document.getElementsByTagName ( “div”);

for (var i = 0 and <divs.length i + +) (

)

Applying:

var divs = document.getElementsByTagName ( “div”);

for (var i = 0, len = divs.length i <len; i + +) (

)

If you are forced to frequently refer to sets of elements, consider rewriting them to an array (array access to be efficient).

8. Change layout

Any change made by us in the DOM (adding new blocks), changes in CSS‘August enforce the browser re-count the position of page elements. More on reflow.

Instead of:

element.style.height = “100px”;

element.style.display = “block”;

element.style.fontSize = “14px”;

Use:

. new_style (

height: 100px;

display: block;

font-size: 14px;

)

element.className = “new_style”;

Ograniczysz quantity thus “refreshes” from three to one.

9. JS launch in the background.

If you already have made all possible amendments, but still we are not satisfied with the results, we try to make our application did not hinderusers. Ways that will help us in this:

  • Mobilization of the critical pieces of code (or entire functions) in the background using

setTimeout ( ‘fun ()’, 1);

make, that we will not wait for finite functions fun ().

  • Importing a file with our code at the end of time just before the </ body> spowalniało will not load the contents page.

10. At the end of

One of the latest treatments that we can do is to archive a file with JavaScript code using JSMin, which includeremove from the file comments and unnecessary whitespace.

Developed by:  Speed Up Your JavaScript

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • MySpace
  • PDF

Related Posts

  1. No comments yet.

  1. No trackbacks yet.

*

Founder:

Fachowa budowa domu Lublinedytor edytorToner do drukarki HP HP 27X czarny / black, HP C4127X, C4127X Jesli interesują Ciebie tonery do drukarek HP koniecznie zajrzyj na naszą stronę!