Download to read offline
![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](https://image.slidesharecdn.com/devon-2011-f-4-improveyourjavascript-120821082207-phpapp02/75/Devon-2011-f-4-improve-your-javascript-20-2048.jpg)
![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](https://image.slidesharecdn.com/devon-2011-f-4-improveyourjavascript-120821082207-phpapp02/75/Devon-2011-f-4-improve-your-javascript-21-2048.jpg)
![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](https://image.slidesharecdn.com/devon-2011-f-4-improveyourjavascript-120821082207-phpapp02/75/Devon-2011-f-4-improve-your-javascript-22-2048.jpg)
![for (var i = 0; i items.length; i++) {
process(items[i]);
}
Wednesday, November 23, 11](https://image.slidesharecdn.com/devon-2011-f-4-improveyourjavascript-120821082207-phpapp02/75/Devon-2011-f-4-improve-your-javascript-27-2048.jpg)
![var k = items.length - 1;
do {
process(items[k]);
} while (k--);
Wednesday, November 23, 11](https://image.slidesharecdn.com/devon-2011-f-4-improveyourjavascript-120821082207-phpapp02/75/Devon-2011-f-4-improve-your-javascript-28-2048.jpg)
Uploaded byDaum DNA
Devon 2011-f-4-improve your-javascript
The document discusses ways to improve JavaScript performance. It explains that JavaScript is an interpreted language without compiler optimizations, but modern browsers include just-in-time compilers. It also discusses bottlenecks like network latency, DOM interactions, and reflows caused by layout changes. Techniques to improve performance include reducing scope chain lookups, minimizing nested property access, optimizing loops, and minimizing DOM access and reflows.
More Related Content
![File upload using multer in node.js and express.js [2021 tutorial]](https://cdn.slidesharecdn.com/ss_thumbnails/fileuploadusingmulterinnode-210407055102-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Devon 2011-f-4-improve your-javascript
![Daum devday 13 [bap]](https://cdn.slidesharecdn.com/ss_thumbnails/daumdevday13-bap-130225010411-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Devon 2011-f-4-improve your-javascript
- 1. Improve your Javascript Performance Devon2011 DAUM Wednesday, November 23, 11
- 2. About Me Web Programmer 2002 ~ 2009 Frontend Programmer 2009 ~ FT Projects Cafe Tistory T-Edition Daum Editor Frontend Research / Support Wednesday, November 23, 11
- 3.
- 4.
- 5. Javascript is an “interpreted” language Wednesday, November 23, 11
- 6. ‘No’ Compiler Optimization Wednesday, November 23, 11
- 7. But, JIT Compilers in Modern Browser Wednesday, November 23, 11
- 8. 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
- 9. JS Engine Benchmarks IE7 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
- 10.
- 11. Life of Javascript Connect Download Parse Execute DOM Interaction UI Updates Wednesday, November 23, 11
- 12. JS Engine caresonly... Connect Network Latency Download Blocking Browser Parse Execute DOM Interaction DOM Interaction Cost UI Updates Rendering Issue Wednesday, November 23, 11
- 13.
- 14. Empire HTML5 Wednesday, November 23, 11
- 15. Usage Share ofWeb Browsers 2010/10 2011/4 2011/9 2011/10 IE8 IE6 IE7 IE9 Chrome Safari Firefox 2011/10/03 www.daum.net 기준 Wednesday, November 23, 11
- 16.
- 17. Old Browsers UsageShare Mobile Environment Other Bottlenecks Wednesday, November 23, 11
- 18. Code Tuning Technique Wednesday,November 23, 11
- 19.
- 20. 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
- 21. 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
- 22. 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
- 23.
- 24. 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
- 25. 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
- 26.
- 27. for (var i= 0; i items.length; i++) { process(items[i]); } Wednesday, November 23, 11
- 28. var k =items.length - 1; do { process(items[k]); } while (k--); Wednesday, November 23, 11
- 29.
- 30. Scope Chain Nested Member Loop Wednesday, November 23, 11
- 31. Scope Chain Nested Member Loop Wednesday, November 23, 11
- 32. Scope Chain FA IL Nested Member Loop Wednesday, November 23, 11
- 33. Real World Bottleneck Wednesday,November 23, 11
- 34.
- 35. DOM Reflow UI Thread Wednesday, November 23, 11
- 36. Daum Top DOMvisualization - http://www.aharef.info/static/htmlgraph/ Wednesday, November 23, 11
- 37. DOM Daum Top DOM visualization - http://www.aharef.info/static/htmlgraph/ Wednesday, November 23, 11
- 38. ‘The Document ObjectModel (DOM) is an application programming interface (API) for HTML and XML documents’ Wednesday, November 23, 11
- 39. ‘The Document ObjectModel (DOM) is an application programming interface (API) for HTML and XML documents’ Wednesday, November 23, 11
- 40. DOM is notpart of javascript engine Javascript Engine DOM Engine JScript (jscript.dll) Trident (mshtml.dll) Nitro WebCore V8 WebCore TraceMonkey Gecko Wednesday, November 23, 11
- 41.
- 42.
- 43.
- 44.
- 45. DOM is Expensive Minimize DOM Access Avoid HTMLCollection Wednesday, November 23, 11
- 46.
- 47.
- 48.
- 49. UI Updates =Reflow + Repaint Wednesday, November 23, 11
- 50. Parsing HTML to Render tree Layout of the Painting the construct the construction render tree render tree DOM tree Wednesday, November 23, 11
- 51. Parsing HTML to Render tree Layout of the Painting the construct the construction render tree render tree DOM tree Wednesday, November 23, 11
- 52. Parsing HTML to Render tree Layout of the Painting the construct the construction render tree render tree DOM 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
- 53. Parsing HTML to Render tree Layout of the Painting the construct the construction render tree render tree DOM tree Wednesday, November 23, 11
- 54.
- 55. 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
- 56. Reflow is Expensive Batch Style Changes Use Flow-Off Technique Avoid Geometry Access Wednesday, November 23, 11
- 57.
- 58.
- 59.
- 60. UI Thread Draw UI Updates Execute Javascript Wednesday, November 23, 11
- 61.
- 62. Only one jobcan happen at a time Wednesday, November 23, 11
- 63. Jobs for UIUpdates and Javascript Execution are added to a UI Queue Wednesday, November 23, 11
- 64. button.addEventListener(click, function handleClick(){ doHeavyJob(); resultDIV.innerHTML = Finish!; }); Wednesday, November 23, 11
- 65. UI Thread UI Queue User clicks UI Update Button Javascript handleClick() Time Wednesday, November 23, 11
- 66. UI Thread UI Update Button UI Queue User clicks UI Update Javascript Button handleClick() Javascript handleClick() Time Wednesday, November 23, 11
- 67. UI Thread UI Update Javascript Button handleClick() UI Queue User clicks UI Update Javascript Button handleClick() Javascript handleClick() Time Wednesday, November 23, 11
- 68. UI Thread UI Update Javascript Button handleClick() UI Queue User clicks UI Update Javascript Button handleClick() Javascript handleClick() Time Wednesday, November 23, 11
- 69. UI Thread UI Update Javascript Button handleClick() UI Queue User clicks User clicks UI Update Javascript UI Update Button handleClick() Button Javascript Javascript handleClick() otherLogic() Time Wednesday, November 23, 11
- 70. UI Thread UI Update Javascript Button handleClick() UI Queue User clicks User clicks User clicks UI Update Javascript UI Update UI Update Button handleClick() Button Javascript Javascript Javascript handleClick() handleClick() UI Update Javascript Time Wednesday, November 23, 11
- 71. UI Thread UI Update Javascript Button handleClick() User clicks User clicks UI Queue User clicks User clicks User clicks User clicks User clicks UI Update Javascript UI Update UI Update UI Update Button handleClick() Button Javascript Javascript Javascript Javascript handleClick() handleClick() UI Update UI Update Javascript Time Wednesday, November 23, 11
- 72.
- 73. “Javascript that executesin whole seconds is probably doing something wrong...” - Brendan Eich, Creator of Javascript One Second Wednesday, November 23, 11
- 74. How Long IsToo 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
- 75. Yield control to UI Update Wednesday, November 23, 11
- 76. Yielding with Timers Wednesday,November 23, 11
- 77.
- 78.
- 79.
- 80. 1. Digg thelow level JS Perf. characteristics But, premature optimization is evil Wednesday, November 23, 11
- 81. 2. Don’t touchthe SLOW PART! DOM Reflow UI Thread Wednesday, November 23, 11
- 82. Make the WebFaster Make the Web Responsive Wednesday, November 23, 11
- 83.