30 JavaScript optimization tips

Monitis.com - Hosted Web Server Monitoring Platform

30 JavaScript

Optimization Tips

Monitis.com

Uptime and performance monitoring company

http://portal.monitis.com/




Tip

#1 –

Evalu

ate

Loca

l V

ari

able

s

blogs.msdn.com/b/ie/archive/200

6/08/28/728654.aspxPrimarily, specific to IE, because

local variables are found based

on the most to the least specific

scope and can pass through

multiple levels of scope, the look-

ups can result in generic queries.

When defining the function

scope, within a local variable

without a preceding var

declaration, it is important to

precede each variable with var in

order to define the current scope

in order to prevent the look-up

and to speed up the code.




http://blogs.msdn.com/b/ie/archive/2006/08/28/728654.aspx



Tip

#2 –

Cre

ate

sh

ort

cut

codes

to

speed u

p c

odin

g

www.spoonfeddesign.com/4

-easy-tips-to-improve-javasc

ript-efficiency

For useful codes that are

constantly being used,

speeding up the coding

process can be achieved by

creating shortcuts for

longer codes, for example,

document.getElementById.

By creating a shortcut,

longer scripts will not take

as long to code and will

save time in the overall

process.




http://www.spoonfeddesign.com/4-easy-tips-to-improve-javascript-efficiency




Tip #

3 –

Manip

ula

te

ele

ment

fragm

ents

befo

re

addin

g t

hem

to D

OM

www.jquery4u.com/dom-

modification/improve-java

script-performance

Before placing the elements to the DOM,

ensure that all tweaks

have been performed in

order to improve JavaScript performance.

This will eliminate the

need to set aside Prepend

or Append jQuery APIs.




http://www.jquery4u.com/dom-modification/improve-javascript-performance




Tip

#4 –

Save b

yte

s

by u

sing M

inifi

cati

on

sixrevisions.com/web-development

/10-ways-to-improve-your-web-pag

e-performance

Reduce the file size of your

JavaScript documents by removing

characters (tabs, source code

documents, spaces etc. without

changing the functionality of the

file.

There are a number of minification

tools that can assist in this

process, and have the ability to

reverse the minification.

Minification is the process of

removing all unnecessary

characters from source code,

without changing its functionality.




http://sixrevisions.com/web-development/10-ways-to-improve-your-web-page-performance




Tip

#5 –

Don’t

use

nest

ed

loops

if n

ot

requir

ed

www.techstrut.com/2009/

08/04/10-javascript-perfor

mance-tips

Avoid unwanted loops,

such as for/while, in order

to keep the JavaScript

linear and to prevent from

having to go through

thousands of objects.

Unwanted loops can

cause the browser to work

harder to process the

codes and can slow down

the process.




http://www.techstrut.com/2009/08/04/10-javascript-performance-tips




Tip

#6 –

Cach

e o

bje

cts

to incr

ease

perf

orm

ance



mance-tips

Many times, scripts will be

repeatedly used to access

a certain object. By storing a repeated access

object inside a user defined variable, as well

as using a variable in

subsequent references to

that object, performance

improvement can be

achieved immediately.








Tip

#7 –

Use

a .

js

file

to c

ach

e s

crip

ts

www.javascriptkit.com/jav

atutors/efficientjs.shtmlBy using this technique,

increased performance

can be achieved because

it allows the browser to

load the script once and

will only recall it from

cache should the page be

reloaded or revisited.




http://www.javascriptkit.com/javatutors/efficientjs.shtml

http://www.javascriptkit.com/javatutors/efficientjs.shtml


Tip

#8 –

Pla

ce JavaScr

ipt

at

the b

ott

om

of

the

page

developer.yahoo.com/blog

s/ydn/posts/2007/07/high_

performanc_5

Placing the scripts as low

as possible in the page will

increase the rendering

progress, and also increase download parallelization. The result

is that the page will seem

to load faster, and in some

cases it can also save on

the total amount of code

needed.




http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5




Tip

#9 –

Use

jQ

uery

as

a f

ram

ew

ork



mance-tips

Used for the scripting of

HTML, jQuery is an easy

to use JavaScript library

that can help to speed up

any website. jQuery provides a large number

of plug-ins that can quickly be used, by even

novice programmers.








Tip

#10 –

Com

pre

ss

your

file

s w

ith G

Zip

devmoose.com/coding/10-

ways-to-instantly-speed-up

-your-website

GZip can reduce a JavaScript file considerably,

saving bandwidth, and

accelerate the response

time. JavaScript files can

be very large, and without

compression, it can bog

down any website. Smaller

files provide a faster and

more satisfying web experience.




http://devmoose.com/coding/10-ways-to-instantly-speed-up-your-website




Tip

#11-

Don’t

use

“W

ith” k

eyw

ord

blogs.msdn.com/b/ie/archi

ve/2006/08/28/728654.as

px

The “With” keyword is

considered a black-sheep

because it suffers from

several flaws that can be

very frustrating. Although

it makes the process of

working with local properties simpler, “With”

can make looking up

variables in other scopes

more expensive.








Tip

#12 –

Min

imiz

e

request

s fo

r H

TTP

www.websiteoptimization.

com/speed/tweak/httpMinimize HTTP requests

to render pages by combining external files

and including JavaScript

directly within XHTML

pages. Each time a unique HTTP takes a trip

to a server, the result is a

large number of delays.




http://www.websiteoptimization.com/speed/tweak/http

http://www.websiteoptimization.com/speed/tweak/http


Tip

#13 –

Im

ple

ment

Event

Dele

gati

on

www.djavaweb.com/blog/75-spe

ed-up-your-web–develop-smart-

event-handlers.htmlWith Event Delegation, it

becomes easier to use a single

event handler to manage a type

of event for the entire page.

Without using Event Delegation,

large web applications can

grind to a halt because of too

many event handlers. Benefits

of Event Delegation include;

less functionality to manage,

fewer ties between code and

DOM, and less memory required

to process.




http://www.djavaweb.com/blog/75-speed-up-your-web--develop-smart-event-handlers.html




Tip

#14 –

Don’t

use

the s

am

e s

crip

t tw

ice

www.abhishekbharadwaj.

com/2010/12/speed-up-y

our-website-avoid-duplica

te-scripts

Duplicate scripts will have

a significant impact on

performance. Duplicate

scripts will create unnecessary requests on

HTTP, especially in the IE

browser. Using a SCRIPT

tag, in an HTML page, will

help to avoid accidentally

duplicating scripts.




http://www.abhishekbharadwaj.com/2010/12/speed-up-your-website-avoid-duplicate-scripts





Tip

#15 –

Rem

ove

Double

Dollar

$$ www.mellowmorning.com

/2008/05/18/javascript-op

timization-high-performan

ce-js-apps

Using “double dollar $$”

function is not necessarily

needed, when it comes to

improving the speed of a

website.




http://www.mellowmorning.com/2008/05/18/javascript-optimization-high-performance-js-apps





Tip

#16 –

Cre

ati

ng

refe

rence

vari

able

s

mondaybynoon.com/2009

/04/27/a-couple-of-quick-t

ips-for-javascript-optimiza

tion

When working with a

specific node repeatedly,

it is best to define a variable with that particular note, instead of

switching to it repeatedly.

This is not a significant

enhancement but it can

have a bigger impact on

a large scale.




http://mondaybynoon.com/2009/04/27/a-couple-of-quick-tips-for-javascript-optimization





Tip

#17 –

Incr

ease

speed

of

Obje

ct D

ete

ctio

n

dean.edwards.name/webl

og/2005/12/js-tip1

A more efficient method

to using Object Detection

is to use a code created

dynamically based off of

object detection, rather

than performing object

detection inside of a

function.




http://dean.edwards.name/weblog/2005/12/js-tip1

http://dean.edwards.name/weblog/2005/12/js-tip1


Tip

#18 –

Wri

te

eff

ect

ive L

oops

robertnyman.com/2008/0

4/11/javascript-loop-perfo

rmance

Depending on the browser, the method

used to write Loops can

have a great effect on the

performance of a site.

Improper writing of loops

can slow down pages with

lots of queries and running a number of

loops in parallel.




http://robertnyman.com/2008/04/11/javascript-loop-performance




Tip

#19 –

Short

en

Sco

pe C

hain

s

homepage.mac.com/rue/JS

_Optimization_TechniquesGlobal scopes can be slow,

because each time a

function executes, it cause

a temporary calling scope

to be created. JavaScript

searchers for the first item

in the scope chain, and if

it doesn’t find the variable,

it swells up the chain until

it hits the global object.




http://homepage.mac.com/rue/JS_Optimization_Techniques



Tip

#20 –

Index

dir

ect

ly t

o N

odeLis

ts

homepage.mac.com/rue/J

S_Optimization_Technique

s

NodeLists are live and

can take up a lot of memory, as they are

updated when an underlying document

changes. Its quicker to

index directly into a list,

as a browser will not need

to create a node list object.








Tip

#21 –

Don’t

use

‘eval’

www.javascripttoolbox.co

m/bestpractices/#evalAlthough the “eval” function is a good method

to run arbitrary code,

each string that is passed

to the eval function has to

be parsed and executed

on-the-fly. This cost has to

be paid every time the

execution reaches an eval

function call.




http://www.javascripttoolbox.com/bestpractices/%23eval

http://www.javascripttoolbox.com/bestpractices/%23eval


Tip

#22 –

Use

Funct

ion I

nlinin

g

portal.acm.org/citation.cfm?id

=844097

Function Inlining helps to

eliminate call costs, and

replaces a function call with

the body of the called

function. In JavaScript,

performing a function call is

an expensive operation

because it takes several

preparatory steps to perform:

allocating space for parameters, copying the

parameters, and resolving the

function name.




http://portal.acm.org/citation.cfm?id=844097

http://portal.acm.org/citation.cfm?id=844097


Tip

#23 –

Im

ple

ment

Com

mon S

ub-e

xpre

ssio

n

Elim

inati

on

sunilkumarn.wordpress.com/20

10/10/19/common-subexpressi

on-elimination-cse

Common sub-expression

elimination (CSE) is a

performance-targeted compiler

optimization technique that

searches for instances of

identical expressions and

replaces them with a single

variable holding the computed

value. You can expect that

using a single local variable for

a common sub-expression will

always be faster than leaving

the code unchanged.




http://sunilkumarn.wordpress.com/2010/10/19/common-subexpression-elimination-cse




Tip

#24 –

Build D

OM

node a

nd a

ll its

sub-

nodes

offl

ine

archive.devwebpro.com/d

evwebpro-39-0030514Opt

imizingJavaScriptforExecu

tionSpeed.html

When adding complex

content such as tables to

a site, performance is

improved by adding complex sub-trees offline.




http://archive.devwebpro.com/devwebpro-39-0030514OptimizingJavaScriptforExecutionSpeed.html





Tip

#25 –

Try

not

to

use

glo

bal vari

able

s

wiki.forum.nokia.com/index.p

hp/JavaScript_Performance_B

est_Practices#JavaScript_Perf

ormace_Best_PracticesBecause the scripting engine

needs to look through the

scope, when referencing

global variables from within

function or another scope,

the variable will be destroyed

when the local scope is lost.

If variables in global scope

cannot persist through the

lifetime of the script, the

performance will be improved.




http://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices%23JavaScript_Performace_Best_Practices





Tip

#26 –

Use

pri

mit

ive

funct

ions

opera

tions

vs.

fu

nct

ion c

alls

wiki.forum.nokia.com/ind

ex.php/JavaScript_Perform

ance_Best_Practices#Java

Script_Performace_Best_P

ractices

Improved speed can be

achieved in performance

critical loops and functions by using equivalent primitive functions instead of function calls.










Tip

#27 –

Don’t

reta

in

alive r

efe

rence

s of

oth

er

docu

ments

dev.opera.com/articles/view/ef

ficient-javascript/?page=4#do

creferences

By not retaining alive

references of other documents after the script has

finished with them, faster

performance will be achieved.

This is because any references to those objects

from that document are not to

be kept in its entire DOM tree,

and the scripting environment

will not be kept alive in RAM.

Thus the document itself is no

longer loaded.




http://dev.opera.com/articles/view/efficient-javascript/?page=4%23docreferences




Tip

#28 –

Use

X

MLH

ttpR

equest

dev.opera.com/articles/view/

efficient-javascript/?page=4#

docreferences

XMLHttpRequest helps to

reduce the amount of content

coming from the server, and

avoids the performance

impact of destroying and

recreating the scripting

environment in between

page loads. Its is important to

ensure that XMLHttpRequest

is supported, or otherwise it

can lead to problems and

confusion.








Tip

#29 –

Avoid

usi

ng

try-c

atc

h-fi

nally

dev.opera.com/articles/view/

efficient-javascript/?page=2Whenever the catch clause is

executed, where the caught

exception object is assigned

to a variable, “try-catch-

finally” creates a new

variable in the current scope

at runtime. A number of

browsers do not handle this

process efficiently because

the variable is created and

destroyed at runtime. Avoid

it!




http://dev.opera.com/articles/view/efficient-javascript/?page=2



Tip

#30 –

Don’t

m

isuse

for-

in

dev.opera.com/articles/vi

ew/efficient-javascript/?pa

ge=2

Because the “for-in” loop

requires the script engine

to build a list of all the

enumerable properties,

coding inside for loop

does not modify the array.

It iterates pre-compute

the length of the array

into a variable len inside

for loop scope.







Technology

30 JavaScript optimization tips