SlideShare a Scribd company logo
1 of 42
High Performance Ajax Applications Julien Lecomte http://www.julienlecomte.net/blogfiles/performance/ajax-perf.ppt http://www.slideshare.net/julien.lecomte/high-performance-ajax-applications
Part 1 Developing For High Performance
Planning and designing for high performance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Engineering high performance: A few basic rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Measuring performance ,[object Object],[object Object],[object Object],[object Object],[object Object]
Part 2 High Performance Page Load
Yahoo!'s Exceptional Performance rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Asset optimization ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Reduce unminified code size ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Optimize initial rendering (1/4) Miscellaneous tips... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Optimize initial rendering (2/4) Don’t always wait for  onload ... ,[object Object],[object Object],[object Object],YAHOO.util.Event.onDOMReady( function  () { // Do something here... // e.g., attach event handlers. });
Optimize initial rendering (3/4) Post-load script loading ,[object Object],[object Object],[object Object],[object Object],[object Object],<script> window.onload =  function  () { var  script = document.createElement( &quot;script&quot; ); script.src = ...; document.body.appendChild(script); }; </script>
Optimize initial rendering (4/4) Conditional preloading ,[object Object],[object Object],[object Object],[object Object]
Part 3 High Performance JavaScript
Reduce the amount of symbolic look-up: The scope chain (1/2) var  g =  7 ; function  f(a) { var  v =  8 ; x = v + a + g; } f(6); parent ,[object Object],[object Object]
Reduce the amount of symbolic look-up: The scope chain (2/2) ,[object Object],[object Object],[object Object],var  arr = ...; var  globalVar =  0 ; ( function  () { var  i; for (i =  0 ; i < arr.length; i++) { globalVar++; } })(); var  arr = ...; var  globalVar =  0 ; ( function  () { var  i, l, localVar; l = arr.length; localVar = globalVar; for (i =  0 ; i < l; i++) { localVar++; } globalVar = localVar; })(); (faster on all A-grade browsers)
Reduce the amount of symbolic look-up: The prototype chain function  A () {} A.prototype.prop1 = ...; function  B () { this .prop2 = ...; } B.prototype =  new  A(); var  b =  new  B(); B.prototype ,[object Object],[object Object]
Optimize object instantiation ,[object Object],[object Object],[object Object],function  Foo () {...} Foo.prototype.bar =  function  () {...}; function  Foo () { this .bar =  function  () {...}; }
Don’t use  eval ! ,[object Object],[object Object],setTimeout( function  () { // Code to execute on a timeout },  50 ); ,[object Object]
Optimize string concatenation ,[object Object],var  s =  “xxx”  +  “yyy” ; s +=  “zzz” ; ,[object Object],var  i, s =  “” ; for (i =  0 ; i <  10000 ; i++) { s +=  “x” ; } var  i, s = []; for (i =  0 ; i <  10000 ; i++) { s[i] =  “x” ; } s = s.join( “” ); ,[object Object],[object Object]
Optimize regular expressions ,[object Object],[object Object],[object Object],[object Object],if ( /loaded|complete/ .test(document.readyState)) {...} (?:(?:)?[])*(?:(?:(?:[^()<>@,;:&quot;.00-31]+(?:(?:(?:)?[])+||(?=[&quot;()<>@,;:&quot;.]))|&quot; (?:[^amp;quot;]|.|(?:(?:)?[]))*&quot;(?:(?:)?[])*)(?:(?:(?:)?[])*(?:[^()<>@,;:&quot;.00-31 ]+(?:(?:(?:)?[])+||(?=[&quot;()<>@,;:&quot;.]))|&quot;(?:[^amp;quot;]|.|(?:(?:)?[]))*&quot;(?:(?:)?[]) *))*@(?:(?:)?[])*(?:[^()<>@,;:&quot;.00-31]+(?:(?:(?:)?[])+||(?=[&quot;()<>@,;:&quot;.]))| ([^]|.)*(?:(?:)?[])*)(?:(?:(?:)?[])*(?:[^()<>@,;:&quot;.00-31]+(?:(?:(?:)? [])+||(?=[&quot;()<>@,;:&quot;.]))|([^]|.)*(?:(?:)?[])*))*|(?:[^()<>@,;:&quot;.00- 31]+(?:(?:(?:)?[])+||(?=[&quot;()<>@,;:&quot;.]))|&quot;(?:[^amp;quot;]|.|(?:(?:)?[]))*&quot;(?:(?:)?[ ])*)*lt;(?:(?:)?[])*(?:@(?:[^()<>@,;:&quot;.00-31]+(?:(?:(?:)?[])+||(?=[&quot;()<>@,;:&quot;. ]))|([^]|.)*(?:(?:)?[])*)(?:(?:(?:)?[])*(?:[^()<>@,;:&quot;.00-31]+(?:(?:(?: )?[])+||(?=[&quot;()<>@,;:&quot;.]))|([^]|.)*(?:(?:)?[])*))*(?:,@(?:(?:)?[]))
Caching ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],var  fn = ( function  () { var  b =  false , v; return   function  () { if  (!b) { v = ...; b =  true ; } return  v; }; })(); function  fn () { if  (!fn.b) { fn.v = ...; fn.b =  true ; } return  fn.v; } var  fn =  function  () { var  v = ...; return  (fn =  function  () { return  v; })(); }; Module pattern Store value in function object Lazy function definition
How to handle long running JavaScript processes (1/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
How to handle long running JavaScript processes (2/2) function  doSomething (callbackFn) { // Initialize a few things here... ( function  () { // Do a little bit of work here... if  ( termination condition ) { // We are done callbackFn(); }  else  { // Process next chunk setTimeout(arguments.callee, 0); } })(); }
Miscellaneous tips (1/2) ,[object Object],var  a =  1 , b =  2 , c; c = Math.min(a, b); c = a < b ? a : b; ,[object Object],var  i; for  (i =  0 ; i <  100000 ; i++) { try  { ... }  catch  (e) { ... } } var  i; try  { for  (i =  0 ; i <  100000 ; i++) { ... } }  catch  (e) { ... } myArray.push(value); myArray[myArray.length] = value; myArray[idx++] = value;
Miscellaneous tips (2/2) ,[object Object],var  key, value; for  (key in myArray) { value = myArray[key]; ... } var  i, value, length = myArray.length; for  (i =  0 ; i < length; i++) { value = myArray[i]; ... } ,[object Object],function  fn () { if  (...) { ... }  else  { ... } } var  fn; if  (...) { fn =  function  () {...}; }  else  { fn =  function  () {...}; }
Part 4 High Performance Dynamic HTML
Document tree modification Using  innerHTML var  i, j, el, table, tbody, row, cell; el = document.createElement( &quot;div&quot; ); document.body.appendChild(el); table = document.createElement( &quot;table&quot; ); el.appendChild(table); tbody = document.createElement( &quot;tbody&quot; ); table.appendChild(tbody); for  (i =  0 ; i <  1000 ; i++) { row = document.createElement( &quot;tr&quot; ); for  (j =  0 ; j <  5 ; j++) { cell = document.createElement( &quot;td&quot; ); row.appendChild(cell); } tbody.appendChild(row); } var  i, j, el, idx, html; idx =  0 ; html = []; html[idx++] =  &quot;<table>&quot; ; for  (i =  0 ; i <  1000 ; i++) { html[idx++] =  &quot;<tr>&quot; ; for  (j =  0 ; j <  5 ; j++) { html[idx++] =  &quot;<td></td>&quot; ; } html[idx++] =  &quot;</tr>&quot; ; } html[idx++] =  &quot;</table>&quot; ; el = document.createElement( &quot;div&quot; ); document.body.appendChild(el); el.innerHTML = html.join( &quot;&quot; ); ( much  faster on all A-grade browsers) Warning: See  http://www.julienlecomte.net/blog/2007/12/38/
Document tree modification Using  cloneNode var  i, j, el, table, tbody, row, cell; el = document.createElement( &quot;div&quot; ); document.body.appendChild(el); table = document.createElement( &quot;table&quot; ); el.appendChild(table); tbody = document.createElement( &quot;tbody&quot; ); table.appendChild(tbody); for  (i =  0 ; i <  1000 ; i++) { row = document.createElement( &quot;tr&quot; ); for  (j =  0 ; j <  5 ; j++) { cell = document.createElement( &quot;td&quot; ); row.appendChild(cell); } tbody.appendChild(row); } var  i, el, table, tbody, template, row, cell; el = document.createElement( &quot;div&quot; ); document.body.appendChild(el); table = document.createElement( &quot;table&quot; ); el.appendChild(table); tbody = document.createElement( &quot;tbody&quot; ); table.appendChild(tbody); template = document.createElement( &quot;tr&quot; ); for  (i =  0 ; i <  5 ; i++) { cell = document.createElement( &quot;td&quot; ); template.appendChild(cell); } for  (i =  0 ; i <  1000 ; i++) { row = template.cloneNode(true); tbody.appendChild(row); } (faster on all A-grade browsers – sometimes  much  faster) Warning: expando properties/attached event handlers are lost!
Document tree modification Using DocumentFragment ,[object Object],[object Object],[object Object],var  i, j, el, table, tbody, row, cell, docFragment; docFragment = document.createDocumentFragment(); el = document.createElement( &quot;div&quot; ); docFragment.appendChild(el); table = document.createElement( &quot;table&quot; ); el.appendChild(table); tbody = document.createElement( &quot;tbody&quot; ); table.appendChild(tbody); for  (i =  0 ; i <  1000 ; i++) { ... } document.body.appendChild(docFragment);
Limit the number of event handlers (1/2) ,[object Object],[object Object],[object Object],<div id= &quot;container&quot; > <ul> <li id= &quot;li-1&quot; > List Item 1 </li> <li id= &quot;li-2&quot; > List Item 2 </li> <li id= &quot;li-3&quot; > List Item 3 </li> <li id= &quot;li-4&quot; > List Item 4 </li> <li id= &quot;li-5&quot; > List Item 5 </li> ... </ul> </div> div#container ul li#li- x text node
Limit the number of event handlers (2/2) YAHOO.util.Event.addListener( &quot;container&quot; ,  &quot;click&quot; ,  function  (e) { var  el = YAHOO.util.Event.getTarget(e); while (el.id !==  &quot;container&quot; ) { if (el.nodeName.toUpperCase() ===  &quot;LI&quot; ) { // Do something here... break; } else { el = el.parentNode; } } });
Limiting reflows ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],el.style.cssText =  &quot;display:block;width:auto;height:100px;...&quot; ; YAHOO.util.Dom.replaceClass(el,  &quot;foo&quot; ,  &quot;bar&quot; ); el.setAttribute( &quot;style&quot; ,  &quot;display:block;width:auto;height:100px;...&quot; );
Miscellaneous tips... ,[object Object],[object Object],[object Object],[object Object]
Part 5 High Performance Layout and CSS
Miscellaneous tips... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Part 6 High Performance Ajax
Ajax Best Practices ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],var  callback = { success:  function  () {  /* Do something */  }, failure:  function  () {  /* Do something */  }, timeout:  5000 }; YAHOO.util.Connect.asyncRequest( &quot;GET&quot; , url, callback);
Improving perceived network latency using the optimistic pattern ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Miscellaneous tips... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Part 7 Performance Tools
Performance Tools ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

What's hot

Active Directoryデータの Security Descriptor
Active Directoryデータの Security DescriptorActive Directoryデータの Security Descriptor
Active Directoryデータの Security DescriptorMichio Koyama
 
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~Unity Technologies Japan K.K.
 
Android app ppt
Android app pptAndroid app ppt
Android app pptADI ADARSH
 
Active Directory をInternetから使用するための4つのシナリオ
Active Directory をInternetから使用するための4つのシナリオActive Directory をInternetから使用するための4つのシナリオ
Active Directory をInternetから使用するための4つのシナリオjunichi anno
 
Go言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 springGo言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 springTakuya Ueda
 
エンジニアのための Windows Virtual Desktop 設計術
エンジニアのための Windows Virtual Desktop 設計術エンジニアのための Windows Virtual Desktop 設計術
エンジニアのための Windows Virtual Desktop 設計術Takashi Ushigami
 
Ultra HD Video Scaling: Low-Power HW FF vs. CNN-based Super-Resolution
Ultra HD Video Scaling: Low-Power HW FF vs. CNN-based Super-ResolutionUltra HD Video Scaling: Low-Power HW FF vs. CNN-based Super-Resolution
Ultra HD Video Scaling: Low-Power HW FF vs. CNN-based Super-ResolutionIntel® Software
 
ユニットテストを意識して安心しよう
ユニットテストを意識して安心しようユニットテストを意識して安心しよう
ユニットテストを意識して安心しようYuta Matsumura
 
カスタムROM開発者の視点から見たAndroid
カスタムROM開発者の視点から見たAndroidカスタムROM開発者の視点から見たAndroid
カスタムROM開発者の視点から見たAndroidandroid sola
 
テストを書こう!!
テストを書こう!!テストを書こう!!
テストを書こう!!拓 小林
 
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編infinite_loop
 
FIDO2導入してみたを考えてみた
FIDO2導入してみたを考えてみたFIDO2導入してみたを考えてみた
FIDO2導入してみたを考えてみたFIDO Alliance
 
プロセスマイニングとソースコード解析を用いたマイクロサービス分割(ソフトウェアエンジニアリングシンポジウム2021 発表資料)
プロセスマイニングとソースコード解析を用いたマイクロサービス分割(ソフトウェアエンジニアリングシンポジウム2021 発表資料)プロセスマイニングとソースコード解析を用いたマイクロサービス分割(ソフトウェアエンジニアリングシンポジウム2021 発表資料)
プロセスマイニングとソースコード解析を用いたマイクロサービス分割(ソフトウェアエンジニアリングシンポジウム2021 発表資料)NTT DATA Technology & Innovation
 
サブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in express
サブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in expressサブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in express
サブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in expressTakahiro YAMAGUCHI
 
androidstudio.pptx
androidstudio.pptxandroidstudio.pptx
androidstudio.pptxSundaresanB5
 
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計Yoshinori Matsunobu
 

What's hot (20)

Active Directoryデータの Security Descriptor
Active Directoryデータの Security DescriptorActive Directoryデータの Security Descriptor
Active Directoryデータの Security Descriptor
 
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
 
Android app ppt
Android app pptAndroid app ppt
Android app ppt
 
Active Directory をInternetから使用するための4つのシナリオ
Active Directory をInternetから使用するための4つのシナリオActive Directory をInternetから使用するための4つのシナリオ
Active Directory をInternetから使用するための4つのシナリオ
 
Go言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 springGo言語で作る webアプリ@gocon 2013 spring
Go言語で作る webアプリ@gocon 2013 spring
 
エンジニアのための Windows Virtual Desktop 設計術
エンジニアのための Windows Virtual Desktop 設計術エンジニアのための Windows Virtual Desktop 設計術
エンジニアのための Windows Virtual Desktop 設計術
 
Android studio installation
Android studio installationAndroid studio installation
Android studio installation
 
Ultra HD Video Scaling: Low-Power HW FF vs. CNN-based Super-Resolution
Ultra HD Video Scaling: Low-Power HW FF vs. CNN-based Super-ResolutionUltra HD Video Scaling: Low-Power HW FF vs. CNN-based Super-Resolution
Ultra HD Video Scaling: Low-Power HW FF vs. CNN-based Super-Resolution
 
[BurpSuiteJapan]Burp Suite導入・操作
[BurpSuiteJapan]Burp Suite導入・操作[BurpSuiteJapan]Burp Suite導入・操作
[BurpSuiteJapan]Burp Suite導入・操作
 
ユニットテストを意識して安心しよう
ユニットテストを意識して安心しようユニットテストを意識して安心しよう
ユニットテストを意識して安心しよう
 
カスタムROM開発者の視点から見たAndroid
カスタムROM開発者の視点から見たAndroidカスタムROM開発者の視点から見たAndroid
カスタムROM開発者の視点から見たAndroid
 
テストを書こう!!
テストを書こう!!テストを書こう!!
テストを書こう!!
 
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
 
FIDO2導入してみたを考えてみた
FIDO2導入してみたを考えてみたFIDO2導入してみたを考えてみた
FIDO2導入してみたを考えてみた
 
DLL読み込みの問題を読み解く
DLL読み込みの問題を読み解くDLL読み込みの問題を読み解く
DLL読み込みの問題を読み解く
 
Xml applications
Xml applicationsXml applications
Xml applications
 
プロセスマイニングとソースコード解析を用いたマイクロサービス分割(ソフトウェアエンジニアリングシンポジウム2021 発表資料)
プロセスマイニングとソースコード解析を用いたマイクロサービス分割(ソフトウェアエンジニアリングシンポジウム2021 発表資料)プロセスマイニングとソースコード解析を用いたマイクロサービス分割(ソフトウェアエンジニアリングシンポジウム2021 発表資料)
プロセスマイニングとソースコード解析を用いたマイクロサービス分割(ソフトウェアエンジニアリングシンポジウム2021 発表資料)
 
サブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in express
サブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in expressサブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in express
サブドメイン前提のチーム機能開発で踏んだ
OAuthの罠の話 in express
 
androidstudio.pptx
androidstudio.pptxandroidstudio.pptx
androidstudio.pptx
 
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
 

Viewers also liked

Topic Models - LDA and Correlated Topic Models
Topic Models - LDA and Correlated Topic ModelsTopic Models - LDA and Correlated Topic Models
Topic Models - LDA and Correlated Topic ModelsClaudia Wagner
 
Testing Ajax, Mobile Apps the Agile Way
Testing Ajax, Mobile Apps the Agile WayTesting Ajax, Mobile Apps the Agile Way
Testing Ajax, Mobile Apps the Agile WayClever Moe
 
Nodejs Applications in Production
Nodejs Applications in ProductionNodejs Applications in Production
Nodejs Applications in ProductionHamidreza Soleimani
 
High Performance NodeJS
High Performance NodeJSHigh Performance NodeJS
High Performance NodeJSDicoding
 
Cloud Performance Testing with LoadRunner
Cloud Performance Testing with LoadRunnerCloud Performance Testing with LoadRunner
Cloud Performance Testing with LoadRunnerRichard Bishop
 
Quick Tour of Text Mining
Quick Tour of Text MiningQuick Tour of Text Mining
Quick Tour of Text MiningYi-Shin Chen
 
Extreme JavaScript Performance
Extreme JavaScript PerformanceExtreme JavaScript Performance
Extreme JavaScript PerformanceThomas Fuchs
 
Lo Mejor de Cibeles Madrid Fashion Week - Otoño/Invierno 2010 - 2011
Lo Mejor de Cibeles Madrid Fashion Week - Otoño/Invierno 2010 - 2011Lo Mejor de Cibeles Madrid Fashion Week - Otoño/Invierno 2010 - 2011
Lo Mejor de Cibeles Madrid Fashion Week - Otoño/Invierno 2010 - 2011Compulsiva Accesorios
 
Patrick Shields Digitising the Public Sector
Patrick Shields   Digitising the Public SectorPatrick Shields   Digitising the Public Sector
Patrick Shields Digitising the Public SectorSoftware AG South Africa
 
Thought Leadership from Social Sector Masters
Thought Leadership from Social Sector MastersThought Leadership from Social Sector Masters
Thought Leadership from Social Sector MastersSalesforce.org
 
同玩節海報事件
同玩節海報事件同玩節海報事件
同玩節海報事件lalacamp07
 
The Distribution of Household Income, Federal Taxes, and Government Spending
The Distribution of Household Income, Federal Taxes, and Government SpendingThe Distribution of Household Income, Federal Taxes, and Government Spending
The Distribution of Household Income, Federal Taxes, and Government SpendingCongressional Budget Office
 
LAST Conference - The Mickey Mouse model of leadership for software delivery ...
LAST Conference - The Mickey Mouse model of leadership for software delivery ...LAST Conference - The Mickey Mouse model of leadership for software delivery ...
LAST Conference - The Mickey Mouse model of leadership for software delivery ...Nish Mahanty
 

Viewers also liked (20)

Phyche
PhychePhyche
Phyche
 
Topic Models - LDA and Correlated Topic Models
Topic Models - LDA and Correlated Topic ModelsTopic Models - LDA and Correlated Topic Models
Topic Models - LDA and Correlated Topic Models
 
Testing Ajax, Mobile Apps the Agile Way
Testing Ajax, Mobile Apps the Agile WayTesting Ajax, Mobile Apps the Agile Way
Testing Ajax, Mobile Apps the Agile Way
 
Nodejs Applications in Production
Nodejs Applications in ProductionNodejs Applications in Production
Nodejs Applications in Production
 
High Performance NodeJS
High Performance NodeJSHigh Performance NodeJS
High Performance NodeJS
 
Cloud Performance Testing with LoadRunner
Cloud Performance Testing with LoadRunnerCloud Performance Testing with LoadRunner
Cloud Performance Testing with LoadRunner
 
Quick Tour of Text Mining
Quick Tour of Text MiningQuick Tour of Text Mining
Quick Tour of Text Mining
 
Extreme JavaScript Performance
Extreme JavaScript PerformanceExtreme JavaScript Performance
Extreme JavaScript Performance
 
Lo Mejor de Cibeles Madrid Fashion Week - Otoño/Invierno 2010 - 2011
Lo Mejor de Cibeles Madrid Fashion Week - Otoño/Invierno 2010 - 2011Lo Mejor de Cibeles Madrid Fashion Week - Otoño/Invierno 2010 - 2011
Lo Mejor de Cibeles Madrid Fashion Week - Otoño/Invierno 2010 - 2011
 
Patrick Shields Digitising the Public Sector
Patrick Shields   Digitising the Public SectorPatrick Shields   Digitising the Public Sector
Patrick Shields Digitising the Public Sector
 
Thought Leadership from Social Sector Masters
Thought Leadership from Social Sector MastersThought Leadership from Social Sector Masters
Thought Leadership from Social Sector Masters
 
同玩節海報事件
同玩節海報事件同玩節海報事件
同玩節海報事件
 
Comic Analysis
Comic AnalysisComic Analysis
Comic Analysis
 
The Distribution of Household Income, Federal Taxes, and Government Spending
The Distribution of Household Income, Federal Taxes, and Government SpendingThe Distribution of Household Income, Federal Taxes, and Government Spending
The Distribution of Household Income, Federal Taxes, and Government Spending
 
Your Garden and Global Warming
Your Garden and Global WarmingYour Garden and Global Warming
Your Garden and Global Warming
 
Quick Introduction to the Semantic Web, RDFa & Microformats
Quick Introduction to the Semantic Web, RDFa & MicroformatsQuick Introduction to the Semantic Web, RDFa & Microformats
Quick Introduction to the Semantic Web, RDFa & Microformats
 
4º básico a semana 25 abril al 29 abril
4º básico a  semana 25 abril  al 29 abril4º básico a  semana 25 abril  al 29 abril
4º básico a semana 25 abril al 29 abril
 
KungFuPR
KungFuPRKungFuPR
KungFuPR
 
LAST Conference - The Mickey Mouse model of leadership for software delivery ...
LAST Conference - The Mickey Mouse model of leadership for software delivery ...LAST Conference - The Mickey Mouse model of leadership for software delivery ...
LAST Conference - The Mickey Mouse model of leadership for software delivery ...
 
Driving school
Driving schoolDriving school
Driving school
 

Similar to High Performance Ajax Applications

Angular Optimization Web Performance Meetup
Angular Optimization Web Performance MeetupAngular Optimization Web Performance Meetup
Angular Optimization Web Performance MeetupDavid Barreto
 
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slidesDavid Barreto
 
Silicon Valley CodeCamp 2008: High performance Ajax with ExtJS and ASP.NET
Silicon Valley CodeCamp 2008: High performance Ajax with ExtJS and ASP.NETSilicon Valley CodeCamp 2008: High performance Ajax with ExtJS and ASP.NET
Silicon Valley CodeCamp 2008: High performance Ajax with ExtJS and ASP.NETMats Bryntse
 
The Web on OSGi: Here's How
The Web on OSGi: Here's HowThe Web on OSGi: Here's How
The Web on OSGi: Here's Howmrdon
 
My 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningMy 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningSyed Irtaza Ali
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performancekaven yan
 
The Theory Of The Dom
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Domkaven yan
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceSebastian Springer
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web AppsTimothy Fisher
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga
 
Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit
Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnitWriting and Testing JavaScript-heavy Web 2.0 apps with JSUnit
Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnitAlex Chaffee
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Artur Cistov
 
GWT is Smarter Than You
GWT is Smarter Than YouGWT is Smarter Than You
GWT is Smarter Than YouRobert Cooper
 
Asp.net performance
Asp.net performanceAsp.net performance
Asp.net performanceAbhishek Sur
 
Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e bigAndy Peterson
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web PerformanceAdam Lu
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppKaty Slemon
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest servicesIoan Eugen Stan
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingHoat Le
 

Similar to High Performance Ajax Applications (20)

Angular Optimization Web Performance Meetup
Angular Optimization Web Performance MeetupAngular Optimization Web Performance Meetup
Angular Optimization Web Performance Meetup
 
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slides
 
Silicon Valley CodeCamp 2008: High performance Ajax with ExtJS and ASP.NET
Silicon Valley CodeCamp 2008: High performance Ajax with ExtJS and ASP.NETSilicon Valley CodeCamp 2008: High performance Ajax with ExtJS and ASP.NET
Silicon Valley CodeCamp 2008: High performance Ajax with ExtJS and ASP.NET
 
The Web on OSGi: Here's How
The Web on OSGi: Here's HowThe Web on OSGi: Here's How
The Web on OSGi: Here's How
 
My 70-480 HTML5 certification learning
My 70-480 HTML5 certification learningMy 70-480 HTML5 certification learning
My 70-480 HTML5 certification learning
 
Ajax Performance
Ajax PerformanceAjax Performance
Ajax Performance
 
The Theory Of The Dom
The Theory Of The DomThe Theory Of The Dom
The Theory Of The Dom
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit
Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnitWriting and Testing JavaScript-heavy Web 2.0 apps with JSUnit
Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
 
GWT is Smarter Than You
GWT is Smarter Than YouGWT is Smarter Than You
GWT is Smarter Than You
 
Asp.net performance
Asp.net performanceAsp.net performance
Asp.net performance
 
Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e big
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web Performance
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest services
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
backend
backendbackend
backend
 

Recently uploaded

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 

Recently uploaded (20)

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 

High Performance Ajax Applications

  • 1. High Performance Ajax Applications Julien Lecomte http://www.julienlecomte.net/blogfiles/performance/ajax-perf.ppt http://www.slideshare.net/julien.lecomte/high-performance-ajax-applications
  • 2. Part 1 Developing For High Performance
  • 3.
  • 4.
  • 5.
  • 6. Part 2 High Performance Page Load
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. Part 3 High Performance JavaScript
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. How to handle long running JavaScript processes (2/2) function doSomething (callbackFn) { // Initialize a few things here... ( function () { // Do a little bit of work here... if ( termination condition ) { // We are done callbackFn(); } else { // Process next chunk setTimeout(arguments.callee, 0); } })(); }
  • 25.
  • 26.
  • 27. Part 4 High Performance Dynamic HTML
  • 28. Document tree modification Using innerHTML var i, j, el, table, tbody, row, cell; el = document.createElement( &quot;div&quot; ); document.body.appendChild(el); table = document.createElement( &quot;table&quot; ); el.appendChild(table); tbody = document.createElement( &quot;tbody&quot; ); table.appendChild(tbody); for (i = 0 ; i < 1000 ; i++) { row = document.createElement( &quot;tr&quot; ); for (j = 0 ; j < 5 ; j++) { cell = document.createElement( &quot;td&quot; ); row.appendChild(cell); } tbody.appendChild(row); } var i, j, el, idx, html; idx = 0 ; html = []; html[idx++] = &quot;<table>&quot; ; for (i = 0 ; i < 1000 ; i++) { html[idx++] = &quot;<tr>&quot; ; for (j = 0 ; j < 5 ; j++) { html[idx++] = &quot;<td></td>&quot; ; } html[idx++] = &quot;</tr>&quot; ; } html[idx++] = &quot;</table>&quot; ; el = document.createElement( &quot;div&quot; ); document.body.appendChild(el); el.innerHTML = html.join( &quot;&quot; ); ( much faster on all A-grade browsers) Warning: See http://www.julienlecomte.net/blog/2007/12/38/
  • 29. Document tree modification Using cloneNode var i, j, el, table, tbody, row, cell; el = document.createElement( &quot;div&quot; ); document.body.appendChild(el); table = document.createElement( &quot;table&quot; ); el.appendChild(table); tbody = document.createElement( &quot;tbody&quot; ); table.appendChild(tbody); for (i = 0 ; i < 1000 ; i++) { row = document.createElement( &quot;tr&quot; ); for (j = 0 ; j < 5 ; j++) { cell = document.createElement( &quot;td&quot; ); row.appendChild(cell); } tbody.appendChild(row); } var i, el, table, tbody, template, row, cell; el = document.createElement( &quot;div&quot; ); document.body.appendChild(el); table = document.createElement( &quot;table&quot; ); el.appendChild(table); tbody = document.createElement( &quot;tbody&quot; ); table.appendChild(tbody); template = document.createElement( &quot;tr&quot; ); for (i = 0 ; i < 5 ; i++) { cell = document.createElement( &quot;td&quot; ); template.appendChild(cell); } for (i = 0 ; i < 1000 ; i++) { row = template.cloneNode(true); tbody.appendChild(row); } (faster on all A-grade browsers – sometimes much faster) Warning: expando properties/attached event handlers are lost!
  • 30.
  • 31.
  • 32. Limit the number of event handlers (2/2) YAHOO.util.Event.addListener( &quot;container&quot; , &quot;click&quot; , function (e) { var el = YAHOO.util.Event.getTarget(e); while (el.id !== &quot;container&quot; ) { if (el.nodeName.toUpperCase() === &quot;LI&quot; ) { // Do something here... break; } else { el = el.parentNode; } } });
  • 33.
  • 34.
  • 35. Part 5 High Performance Layout and CSS
  • 36.
  • 37. Part 6 High Performance Ajax
  • 38.
  • 39.
  • 40.
  • 42.