devon 2011-f-4-improve your-javascript
Post on 16-May-2015
514 Views
Preview:
TRANSCRIPT
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
Wednesday, November 23, 11
Why Slow
Wednesday, November 23, 11
Javascript is an “interpreted” language
Wednesday, November 23, 11
‘No’ Compiler Optimization
Wednesday, November 23, 11
But, JIT Compilers in Modern Browser
Wednesday, November 23, 11
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
Wednesday, November 23, 11
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
IE7
Wednesday, November 23, 11
Wednesday, November 23, 11
Life of Javascript
Connect
Download
Parse
Execute
DOM Interaction
UI Updates
Wednesday, November 23, 11
JS Engine cares only...
Connect
Download
Parse
Execute
DOM Interaction
UI Updates
Network Latency
Blocking Browser
DOM Interaction Cost
Rendering Issue
Wednesday, November 23, 11
IE����������� ������������������ Empire
HTML5
Wednesday, November 23, 11
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 기준
Wednesday, November 23, 11
Wednesday, November 23, 11
Old Browsers Usage Share
Mobile Environment
Other Bottlenecks
Wednesday, November 23, 11
Code Tuning Technique
Wednesday, November 23, 11
Scope Chains
Wednesday, November 23, 11
function initUI() { var body = document.body, links = document.getElementsByTagName("a"), i = 0, len = links.length; while (i < len) { update(links[i++]); } document.getElementById("go-btn").onclick = function() { start(); } bd.className = "active";}
Wednesday, November 23, 11
function initUI() { var doc = document, body = doc.body, links = doc.getElementsByTagName("a"), i = 0, len = links.length; while (i < len) { update(links[i++]); } doc.getElementById("go-btn").onclick = function() { start(); } bd.className = "active";}
Wednesday, November 23, 11
function initUI() { var doc = document, body = doc.body, links = doc.getElementsByTagName("a"), i = 0, len = links.length; while (i < len) { update(links[i++]); } doc.getElementById("go-btn").onclick = function() { start(); } bd.className = "active";}
Wednesday, November 23, 11
Nested Members
Wednesday, November 23, 11
function toggle(element) { if (daum.util.dom.hasClass(element, "selected")) { daum.util.dom.removeClass(element, "selected"); } else { daum.util.dom.addClass(element, "selected"); }}
Wednesday, November 23, 11
function toggle(element) { var domutil = daum.util.dom; if (domutil.hasClass(element, "selected")) { domutil.removeClass(element, "selected"); } else { domutil.addClass(element, "selected"); }}
Wednesday, November 23, 11
L∞p
Wednesday, November 23, 11
for (var i = 0; i < items.length; i++) { process(items[i]);}
Wednesday, November 23, 11
var k = items.length - 1;do { process(items[k]);} while (k--);
Wednesday, November 23, 11
Wednesday, November 23, 11
Scope Chain
Nested Member
Loop
Wednesday, November 23, 11
Scope Chain
Nested Member
Loop
Wednesday, November 23, 11
Scope Chain
Nested Member
Loop
FAIL
Wednesday, November 23, 11
Real World Bottleneck
Wednesday, November 23, 11
Wednesday, November 23, 11
DOM
Reflow
UI Thread
Wednesday, November 23, 11
Daum Top DOM visualization - http://www.aharef.info/static/htmlgraph/
Wednesday, November 23, 11
DOM
Daum Top DOM visualization - http://www.aharef.info/static/htmlgraph/
Wednesday, November 23, 11
‘The Document Object Model (DOM) is an application programming interface (API) for
HTML and XML documents’
Wednesday, November 23, 11
‘The Document Object Model (DOM) is an application programming interface (API) for
HTML and XML documents’
Wednesday, November 23, 11
DOM is not part of javascript engine
Javascript Engine DOM Engine
JScript (jscript.dll) Trident (mshtml.dll)
Nitro WebCore
V8 WebCore
TraceMonkey Gecko
Wednesday, November 23, 11
‘Give����������� ������������������ me����������� ������������������ your����������� ������������������ money’
Wednesday, November 23, 11
DOM is ExpensiveMinimize DOM AccessAvoid HTMLCollection
Wednesday, November 23, 11
Wednesday, November 23, 11
Wednesday, November 23, 11
Reflow
Wednesday, November 23, 11
UI Updates = Reflow + Repaint
Wednesday, November 23, 11
Parsing HTML to construct the
DOM tree
Render treeconstruction
Layout of the render tree
Painting the render tree
Wednesday, November 23, 11
Parsing HTML to construct the
DOM tree
Render treeconstruction
Layout of the render tree
Painting the render tree
Wednesday, November 23, 11
Parsing HTML to construct the
DOM tree
Render treeconstruction
Layout of the render tree
Painting the render tree
{ width, height, x, y }
{ width, height, x, y }
{ width, height, x, y }
{ width, height, x, y }
{ width, height, x, y }
{ width, height, x, y }
Wednesday, November 23, 11
Parsing HTML to construct the
DOM tree
Render treeconstruction
Layout of the render tree
Painting the render tree
Wednesday, November 23, 11
Wednesday, November 23, 11
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
Wednesday, November 23, 11
Reflow is ExpensiveBatch Style Changes
Use Flow-Off TechniqueAvoid Geometry Access
Wednesday, November 23, 11
Wednesday, November 23, 11
Wednesday, November 23, 11
UI Thread
Wednesday, November 23, 11
UI Thread
Draw UI Updates
Execute Javascript
Wednesday, November 23, 11
Wednesday, November 23, 11
Only one job can happen at a time
Wednesday, November 23, 11
Jobs for UI Updates and Javascript Execution are added to a UI Queue
Wednesday, November 23, 11
button.addEventListener("click", function handleClick() { doHeavyJob(); resultDIV.innerHTML = "Finish!";});
Wednesday, November 23, 11
UI UpdateButton
UI Thread
UI QueueUser clicks
Time
JavascripthandleClick()
Wednesday, November 23, 11
UI UpdateButton
UI Thread
UI QueueUser clicks
Time
JavascripthandleClick()
UI UpdateButton
JavascripthandleClick()
Wednesday, November 23, 11
UI UpdateButton
UI Thread
UI QueueUser clicks
Time
JavascripthandleClick()
UI UpdateButton
JavascripthandleClick()
JavascripthandleClick()
Wednesday, November 23, 11
UI UpdateButton
UI Thread
UI QueueUser clicks
Time
JavascripthandleClick()
UI UpdateButton
JavascripthandleClick()
JavascripthandleClick()
Wednesday, November 23, 11
UI UpdateButton
UI Thread
UI QueueUser clicks
Time
JavascripthandleClick()
UI UpdateButton
JavascripthandleClick()
JavascripthandleClick()
User clicks
UI UpdateButton
JavascriptotherLogic()
Wednesday, November 23, 11
UI UpdateButton
UI Thread
UI QueueUser clicks
Time
JavascripthandleClick()
UI UpdateButton
JavascripthandleClick()
JavascripthandleClick()
User clicks
UI UpdateButton
JavascripthandleClick()
User clicks
UI Update
Javascript
UI Update
Javascript
Wednesday, November 23, 11
UI UpdateButton
UI Thread
UI QueueUser clicks
Time
JavascripthandleClick()
UI UpdateButton
JavascripthandleClick()
JavascripthandleClick()
User clicks
UI UpdateButton
JavascripthandleClick()
User clicks
UI Update
Javascript
UI Update
Javascript
UI Update
Javascript
UI Update
User clicksUser clicksUser clicksUser clicks
Wednesday, November 23, 11
Wednesday, November 23, 11
One Second
“Javascript that executes in whole seconds is probably doing something wrong...”
- Brendan Eich, Creator of Javascript
Wednesday, November 23, 11
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
Wednesday, November 23, 11
Yield control to UI Update
Wednesday, November 23, 11
Yielding with Timers
Wednesday, November 23, 11
Wednesday, November 23, 11
Wednesday, November 23, 11
Conclusion
Wednesday, November 23, 11
1. Digg the low level JS Perf. characteristicsBut, premature optimization is evil
Wednesday, November 23, 11
DOM
Reflow
UI Thread
2. Don’t touch the SLOW PART!
Wednesday, November 23, 11
Make the Web FasterMake the Web Responsive
Wednesday, November 23, 11
Thank You
Wednesday, November 23, 11
top related