devon 2011-f-4-improve your-javascript

Improve your Javascript

Performance

Devon2011 DAUMWednesday, November 23, 11

About Me

Web Programmer

Frontend Programmer

FT Projects

Cafe

Tistory T-Edition

Daum Editor

Frontend Research / Support

2002 ~ 2009

2009 ~

Wednesday, November 23, 11

Why Slow


Javascript is an “interpreted” language


‘No’ Compiler Optimization


But, JIT Compilers in Modern Browser


JS Engine Benchmarks

IE9

Chrome13

Opera11.5

Firefox7

Safari5.1

0ms 750ms 1500ms 2250ms 3000ms

SunSpider Score in ms (lower is better)

http://www.pcmag.com/article2/0,2817,2349496,00.asp#fbid=ce57IR_ZxrY




JS Engine Benchmarks

IE9

Chrome13

Opera11.5

Firefox7

Safari5.1

0ms 750ms 1500ms 2250ms 3000ms

SunSpider Score in ms (lower is better)


IE7




Life of Javascript

Connect

Download

Parse

Execute

DOM Interaction

UI Updates


JS Engine cares only...

Connect

Download

Parse

Execute

DOM Interaction

UI Updates

Network Latency

Blocking Browser

DOM Interaction Cost

Rendering Issue


IE�� Empire

HTML5


2010/10 2011/4 2011/9 2011/10

Usage Share of Web Browsers

IE8 IE6 IE7 IE9 Chrome Safari Firefox

2011/10/03 www.daum.net 기준


http://www.daum.net

http://www.daum.net

Old Browsers Usage Share

Mobile Environment

Other Bottlenecks


Code Tuning Technique


Scope Chains


Nested Members


function toggle(element) { if (daum.util.dom.hasClass(element, "selected")) { daum.util.dom.removeClass(element, "selected"); } else { daum.util.dom.addClass(element, "selected"); }}


function toggle(element) { var domutil = daum.util.dom; if (domutil.hasClass(element, "selected")) { domutil.removeClass(element, "selected"); } else { domutil.addClass(element, "selected"); }}


L∞p


for (var i = 0; i < items.length; i++) { process(items[i]);}


var k = items.length - 1;do { process(items[k]);} while (k--);


Scope Chain

Nested Member

Loop


Scope Chain

Nested Member

Loop

FAIL


Real World Bottleneck


DOM

Reflow

UI Thread


Daum Top DOM visualization - http://www.aharef.info/static/htmlgraph/


http://www.aharef.info/static/htmlgraph/


DOM

Daum Top DOM visualization - http://www.aharef.info/static/htmlgraph/




‘The Document Object Model (DOM) is an application programming interface (API) for

HTML and XML documents’


DOM is not part of javascript engine

Javascript Engine DOM Engine

JScript (jscript.dll) Trident (mshtml.dll)

Nitro WebCore

V8 WebCore

TraceMonkey Gecko


‘Give�� me�� your�� money’


DOM is ExpensiveMinimize DOM AccessAvoid HTMLCollection


Reflow


UI Updates = Reflow + Repaint


Parsing HTML to construct the

DOM tree

Render treeconstruction

Layout of the render tree

Painting the render tree



DOM tree




{ width, height, x, y }








DOM tree





Causing Reflow

Page renders initially

Window is resized

Visible DOM elements are added or removed

Element change position

Element change size

margin, padding, border, width, height

text changes, image replaced with different size


Reflow is ExpensiveBatch Style Changes

Use Flow-Off TechniqueAvoid Geometry Access


UI Thread


UI Thread

Draw UI Updates

Execute Javascript


Only one job can happen at a time


Jobs for UI Updates and Javascript Execution are added to a UI Queue


button.addEventListener("click", function handleClick() { doHeavyJob(); resultDIV.innerHTML = "Finish!";});


UI UpdateButton

UI Thread

UI QueueUser clicks

Time

JavascripthandleClick()


UI UpdateButton

UI Thread

UI QueueUser clicks

Time


UI UpdateButton



UI UpdateButton

UI Thread

UI QueueUser clicks

Time


UI UpdateButton



User clicks

UI UpdateButton

JavascriptotherLogic()


UI UpdateButton

UI Thread

UI QueueUser clicks

Time


UI UpdateButton



User clicks

UI UpdateButton


User clicks

UI Update

Javascript

UI Update

Javascript


UI UpdateButton

UI Thread

UI QueueUser clicks

Time


UI UpdateButton



User clicks

UI UpdateButton


User clicks

UI Update

Javascript

UI Update

Javascript

UI Update

Javascript

UI Update

User clicksUser clicksUser clicksUser clicks


One Second

“Javascript that executes in whole seconds is probably doing something wrong...”

- Brendan Eich, Creator of Javascript


How Long Is Too Long?

“0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.”

- Jakob Nielsen, 1968


Yield control to UI Update


Yielding with Timers


Conclusion


1. Digg the low level JS Perf. characteristicsBut, premature optimization is evil


DOM

Reflow

UI Thread

2. Don’t touch the SLOW PART!


Make the Web FasterMake the Web Responsive


Thank You


devon 2011-f-4-improve your-javascript

Technology

dom daum

var doc

var body

dom visualization http

document object model

function initui

function toggleelement

var domutil