Web'in öksüz evladı: JavaScript JavaScript Web tarihi boyunca çok az insanın önemsediği, çok güçlü, prototype tabanlı, Obj...
Web'in öksüz evladı: JavaScript <ul><li>JavaScript Tarihi:
Kısaca..
Geleceğin Teknolojisi:
Nerelerde JS kullanılıyor?
Nonblocking pattern:
Optimizasyon da ilk adım
Global variables suck!:
Global yerine local daha iyi bir seçim
DOM'a erişimin maaliyeti:
Git gel Gecko 6 saat
Event binding:
Tek binding ile toplu event handle etmek varken..
Döngü içindeki değişkenler:
Aynı değeri defalarca istemek gereksiz </li></ul>
Web'in öksüz evladı: JavaScript JavaScript Tarihi Kısaca..
JavaScript Tarihi <ul><li>JS, şu anki Mozilla Vakfı CTO'su Brendan Eich tarafından  Netscape için geliştirilmiştir.
İlk kez 1995'de Netscape ile dağıtıldı.
Mocha -> LiveScript -> JavaScript
1996 Kasım'da standartlaştırma için Ecma International'a  gönderildi. </li></ul>
Web'in öksüz evladı: JavaScript Geleceğin Teknolojisi JavaScript Nerelerde Kullanılıyor?
JavaScript: Geleceğin Teknolojisi <ul><li>250 Milyon web sitesi
PDF Dosyaları
SSB: Site Specific Browsers
Gmail, Twitter, Facebook masaüstü uygulamaları.
Mobil Uygulamalar, Masaüstü Widget'lar
PhoneGap, JSCocoa, Apple Widgets, Microsoft Gadgets
Tarayıcı eklentileri, Masaüstü uygulamaları
Opera, Chrome Eklentileri, Firebug, Chrome Webstore   </li></ul>
JavaScript: Geleceğin Teknolojisi <ul><li>Sunucu tarafında;
Nodejs/V8,  mod_js/SpiderMonkey
Onlarca CommonJS implementasyonu çözümü
CommonJS ile;
Sunucu tarafında JavaScript Uygulamaları (CouchDB)
Komut satırı uygulamaları (NodeJS)
Desktop/GUI Uygulamaları (Widget'lar)
Hibrid uygulamalar (Adobe Air)  </li></ul>
Başlamadan önce... Daha iyi anlamak için bilinmesi gerekenler; <ul><li>JavaScript bir değişkenin içerisinde  method taşıya...
Upcoming SlideShare
Loading in …5
×

Javascript Performance Optimisation

1,935 views

Published on

Date; 2011, October 07
Place; Meeting room of Triodor.

Example codes can be found on github;
http://github.com/irfan/javascript-presentation-codes

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,935
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript Performance Optimisation

  1. 1. Web'in öksüz evladı: JavaScript JavaScript Web tarihi boyunca çok az insanın önemsediği, çok güçlü, prototype tabanlı, Object-Orient bir dildir. Sunumun amacı: JavaScript Performans Optimizasyonu İrfan Durmuş
  2. 2. Web'in öksüz evladı: JavaScript <ul><li>JavaScript Tarihi:
  3. 3. Kısaca..
  4. 4. Geleceğin Teknolojisi:
  5. 5. Nerelerde JS kullanılıyor?
  6. 6. Nonblocking pattern:
  7. 7. Optimizasyon da ilk adım
  8. 8. Global variables suck!:
  9. 9. Global yerine local daha iyi bir seçim
  10. 10. DOM'a erişimin maaliyeti:
  11. 11. Git gel Gecko 6 saat
  12. 12. Event binding:
  13. 13. Tek binding ile toplu event handle etmek varken..
  14. 14. Döngü içindeki değişkenler:
  15. 15. Aynı değeri defalarca istemek gereksiz </li></ul>
  16. 16. Web'in öksüz evladı: JavaScript JavaScript Tarihi Kısaca..
  17. 17. JavaScript Tarihi <ul><li>JS, şu anki Mozilla Vakfı CTO'su Brendan Eich tarafından Netscape için geliştirilmiştir.
  18. 18. İlk kez 1995'de Netscape ile dağıtıldı.
  19. 19. Mocha -> LiveScript -> JavaScript
  20. 20. 1996 Kasım'da standartlaştırma için Ecma International'a gönderildi. </li></ul>
  21. 21. Web'in öksüz evladı: JavaScript Geleceğin Teknolojisi JavaScript Nerelerde Kullanılıyor?
  22. 22. JavaScript: Geleceğin Teknolojisi <ul><li>250 Milyon web sitesi
  23. 23. PDF Dosyaları
  24. 24. SSB: Site Specific Browsers
  25. 25. Gmail, Twitter, Facebook masaüstü uygulamaları.
  26. 26. Mobil Uygulamalar, Masaüstü Widget'lar
  27. 27. PhoneGap, JSCocoa, Apple Widgets, Microsoft Gadgets
  28. 28. Tarayıcı eklentileri, Masaüstü uygulamaları
  29. 29. Opera, Chrome Eklentileri, Firebug, Chrome Webstore </li></ul>
  30. 30. JavaScript: Geleceğin Teknolojisi <ul><li>Sunucu tarafında;
  31. 31. Nodejs/V8, mod_js/SpiderMonkey
  32. 32. Onlarca CommonJS implementasyonu çözümü
  33. 33. CommonJS ile;
  34. 34. Sunucu tarafında JavaScript Uygulamaları (CouchDB)
  35. 35. Komut satırı uygulamaları (NodeJS)
  36. 36. Desktop/GUI Uygulamaları (Widget'lar)
  37. 37. Hibrid uygulamalar (Adobe Air) </li></ul>
  38. 38. Başlamadan önce... Daha iyi anlamak için bilinmesi gerekenler; <ul><li>JavaScript bir değişkenin içerisinde method taşıyabilir, yani integer, string gibi function type'ımız vardır.
  39. 39. Herşey birer object'dir, yeni bir object için 'class' yerine 'function' kullanırız.
  40. 40. Anonymous function, isimsiz bir scope'dur. Aşağıdaki şekilde yazılır ve parametre gönderilir. Tabii ki bu da objectdir.
  41. 41. (function($, window){
  42. 42. // code...
  43. 43. }(jQuery, wndow));
  44. 44. Prototype tabanlı bir dildir, her objenin bir prototype'ı vardır. Prototype'daki bir değişkene erişirken, 'prototype'sız kullanılır. Aşağıdaki örneği inceleyelim;
  45. 45. function Users(){};
  46. 46. Users.prototype.getUser = function(id){ return id;};
  47. 47. var id = 1,
  48. 48. user = new Users();
  49. 49. user.getUser(id); </li></ul>
  50. 50. Web'in öksüz evladı: JavaScript Nonblocking Pattern Optimizasyonda İlk Adım
  51. 51. Nonblocking Pattern Nonblocking nedir ve neyi amaçlar? <ul><li>Tarayıcı script tagını gördüğünde, diğer tüm içeriğin yüklenmesini durdurur (image'ler, css'ler vb.) ve scriptleri yüklemeye başlar.
  52. 52. Script dosyaları yüklendikten sonra derlenme süreci vardır.
  53. 53. Derlenme sürecinde bir sonraki script dosyası da diğer tüm içerik gibi bekletilir.
  54. 54. Inline JavaScript satırları da yorumlanması için JS Engin'e gönderildiğinde diğer tüm içerik bekletilir.
  55. 55. Nonblocking pattern, diğer içeriği engellemeden JavaScript çalıştırmayı amaçlar. </li></ul>
  56. 56. Nonblocking Pattern Script elementlerinin olduğu bir sayfanın yüklenişi.. milisaniye main.js shared.js users.js other.js style.css Yükleme süresi Çalıştırma süresi
  57. 57. Nonblocking Pattern Script tag'leri nerede konumlanmalıdır? … .. <head> <meta http-equiv=&quot;Content-type&quot; content=&quot;text/html; charset=utf-8&quot;> </head> <body> … .. … .. <script src=&quot;js/main.js&quot;></script> </body> </html>
  58. 58. Nonblocking Pattern Nonblocking Teknikleri; <ul><li>Gecikmeli Scriptler (Deferred Scripts)
  59. 59. HTML 4, eski bir teknik ve çoğu taraycı desteklemediği için bahsetmeyeceğiz.
  60. 60. Dinamik Script Elementi
  61. 61. var script = document.createElement('script'); script.src=”bar.js”;
  62. 62. document.getElementsByTagName('head')[0].appendChild(script);
  63. 63. AJAX ile Script Injection
  64. 64. XMLHttpRequest aracılığıyla js dosyası alınır ve body e append edilir.
  65. 65. var x = new XMLHttpRequest();
  66. 66. x.open('get', 'main.js', true);
  67. 67. x.onreadystatechange = function(){
  68. 68. //.. xhr kontrol ve append kodları burada..
  69. 69. }; </li></ul>
  70. 70. Nonblocking Pattern Önerilen Teknik <ul><li>Tüm dosyaları birleştirin.
  71. 71. loader.js ve main.js
  72. 72. Minimizer ve Obfuscator kullanın.
  73. 73. Google closure veya YUI
  74. 74. Script taglarını </body> den hemen önce yerleştirin.
  75. 75. var script = document.createElement('script'); script.src=”bar.js”;
  76. 76. document.getElementsByTagName('head')[0].appendChild(script);
  77. 77. Sayfadaki tüm argumanların tamamlanmasını bekleyin.
  78. 78. Jquery'deki document.ready nin sırrı..
  79. 79. Script tag'ini dinamik oluşturun.
  80. 80. loader.js nin görevi: document.createElement('script'); </li></ul>
  81. 81. Nonblocking Pattern Loader çözümleri <ul><li>LazyLoad library
  82. 82. github.com/rgrove/lazyload
  83. 83. YUI (Yahoo User Interfaces)
  84. 84. http://developer.yahoo.com/yui/
  85. 85. Kendi yazacağınız, 20 satır civarında bir loader.
  86. 86. Script tag'i event leri ile script dosyasının yüklenip hazır olduğunu anlayabiliyoruz. Hiç bir script dosyası sayfa tamamen hazır olmadan yüklenmemeli ve çalıştırılmamalı. obj.readyState (ie) ve/ya obj.onLoad (diğerleri) eventleri beklenmeli. Bu loader, dinamik olarak oluşturacağı script objesine src olarak yüklemek istediğiniz dosya yolunu verdikten sonra sayfaya append etmeli. </li></ul>
  87. 87. Web'in öksüz evladı: JavaScript Global Variables Suck! Global yerine local çok daha iyi bir seçim.
  88. 88. Global Variables Suck İçiçe property'leri olan globaldeki bir objenin propertylerine erişmek; var obj = {}; obj.smth = {}; obj.smth.more = {}; obj.smth.more.first = 2; obj.smth.more.second = 3; obj.smth.more.data; function sum_nested_vars(){ for(var i = 0; i < 200000; i++){ obj.smth.more.data = obj.smth.more.first + obj.smth.more.second; } return obj.smth.more.data; } sum_nested_vars();
  89. 89. Global Variables Suck Global değişkenlere/methodlara erişmek var first = 2, second = 3; function sum_global_vars(){ var data; for(var i = 0; i < 200000; i++){ data = first + second; } return data; } sum_global_vars();
  90. 90. Global Variables Suck Local değişkenler kullanmak function sum_local_vars(){ var first = 2, second = 3, data; for(var i = 0; i < 200000; i++){ data = first + second; } return data; } sum_local_vars();
  91. 91. Global Variables Suck GLOBAL AS NESTED 430 milisaniye GLOBAL DEĞİŞKEN 300 milisaniye LOCAL DEĞİŞKEN 1 milisaniye
  92. 92. Global Variables Suck // … function sum_nested_vars(){ var first = obj.smth.more.first, second = obj.smth.more.second, data = obj.smth.more.data; for(var i = 0; i < 200000; i++){ data = first + second; } obj.smth.more.data = data; return data; } // ... // ... function sum_nested_vars(){ for(var i = 0; i < 200000; i++){ obj.smth.more.data = obj.smth.more.first + obj.smth.more.second; } return obj.smth.more.data; } // ... Nested global objeden local değişkene optimizasyon. Uygulamanın büyüklüğüne göre bu farkın çok açılacağını veya kapanacağını unutmayın! 430 milisaniye 1 milisaniye
  93. 93. Web'in öksüz evladı: JavaScript DOM'a Erişimin Maaliyeti Git gel Gecko altı saat.
  94. 94. DOM'a Erişimin Maliyeti function innerHtmlBadWay(){ for (var i = 0; i < 10000; i++){ document.getElementById('myDiv').innerHTML += 'x'; } } innerHtmlBadWay(); Her bir işlem için layout engine'e erişmektense, tüm datayı bir variable içerisinde toplayıp tek seferde yazmak çok daha hızlıdır. function innerHtmlGoodWay(){ var data = 'x'; for (var i = 0; i < 10000; i++){ data += 'x'; } document.getElementById('myDiv').innerHTML += data; } innerHtmlGoodWay(); X √
  95. 95. DOM'a Erişimin Maliyeti 10.000 kez DOM'a innerHTML ile erişmek yerine datayı değişkene atayıp bir kez layout engine gitmek arasındaki farkı gösteren grafik. For içinde erişmek: 3050 milisaniye Variable'a atamak: 1 milisaniye
  96. 96. DOM'a Erişimin Maliyeti Request document.getElementByID('mydiv'); Response <div id='mydiv'></div> 6 saat'lik mesafe NEDEN?
  97. 97. Web'in öksüz evladı: JavaScript Event Binding Tek binding ile toplu event handle etmek varken..
  98. 98. Event Binding Event'ler, click, hover, focus, keypress, mouseover vb. DOM eventleri olabileceği gibi, developer tarafından tanımlanmış özel eventler da olabilir. Event nedir?
  99. 99. Event Binding document.addEventListener('click', function(){ // code... }); veya function foo(){ // code... }; document.addEventListener('click', foo); Event listener
  100. 100. Event Binding Bir event'in işleyişi <div id=”container”> <ul id=”navigation”> <a href=”/main”>Home</a> <li> event
  101. 101. Event Binding Bir event'in işleyişi Event, window objesine kadar parent'ler üzerinden ilerler. <div id=”container”> <ul id=”navigation”> <a href=”/main”>Home</a> <li> Event objedir ve target property'si vardır. Target property'si tıklanan DOM elementinin referansıdır, ve değişmez. event event
  102. 102. Event Binding <ul id=”navigation”> <li><a href=”/main”>Home</a></li> <li> <a href=”/foo”>Foo</a> </li> <li><a href=”/bar”>Bar</a></li> <li><a href=”/baz”>Baz</a></li> <li><a href=”/about”>About</a></li> </ul> Event objesi parent'ler üzerinden ilerlediğine göre, her bir link için ayrı ayrı event atamak yerine, liste içerisindeki tüm eventleri burada yakalayabiliriz. event
  103. 103. Event Binding (function() { document.getElementById('navigation').onclick = function(event){ var target = event.target; if (event.target.tagName == 'A') { alert('Şu sayfa açılacak: nn' + target.attributes[0].value); document.location = target.attributes[0].value; }; event.preventDefault(); event.stopPropagation(); } }());
  104. 104. Web'in öksüz evladı: JavaScript Döngü İçindeki Değişkenler Aynı değeri defalarca istemek gereksiz
  105. 105. Döngü İçindeki Değişkenler for (var i=0; i < things.length; i++) { typeof things[i]; }; var l = things.length; for (var i=0; i < l; i++) { typeof things[i]; }; iyi daha iyi var l = things.length i=0; for (; i < l; i++) { typeof things[i]; }; kötü
  106. 106. Döngü İçindeki Değişkenler 55.000 elemanı olan bir array için grafikteki performans farkı gözlenmiştir.
  107. 107. Okunabilecek Kitaplar
  108. 108. Ek: Kaynaklar: - Wikipedia - Nicholas C. Zakas: High Performance JavaScript İndirilebilir sunum: slideshare.net/irfandurmus/javascript-performance-optimisation Sunumdaki Kodlar: github.com/irfan/javascript-presentation-codes
  109. 109. Web'in öksüz evladı: JavaScript SORULAR İrfan Durmuş

×