![Web'in öksüz evladı: JavaScript ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Javascript Performance Optimisation
Ähnlich wie Javascript Performance Optimisation (20)
Javascript Performance Optimisation
- 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ş
- 3. Kısaca..
- 7. Optimizasyon da ilk adım
- 9. Global yerine local daha iyi bir seçim
- 11. Git gel Gecko 6 saat
- 12. Event binding:
- 13. Tek binding ile toplu event handle etmek varken..
- 15. Aynı değeri defalarca istemek gereksiz
- 16. Web'in öksüz evladı: JavaScript JavaScript Tarihi Kısaca..
- 18. İlk kez 1995'de Netscape ile dağıtıldı.
- 19. Mocha -> LiveScript -> JavaScript
- 20. 1996 Kasım'da standartlaştırma için Ecma International'a gönderildi.
- 21. Web'in öksüz evladı: JavaScript Geleceğin Teknolojisi JavaScript Nerelerde Kullanılıyor?
- 23. PDF Dosyaları
- 24. SSB: Site Specific Browsers
- 25. Gmail, Twitter, Facebook masaüstü uygulamaları.
- 26. Mobil Uygulamalar, Masaüstü Widget'lar
- 27. PhoneGap, JSCocoa, Apple Widgets, Microsoft Gadgets
- 28. Tarayıcı eklentileri, Masaüstü uygulamaları
- 29. Opera, Chrome Eklentileri, Firebug, Chrome Webstore
- 32. Onlarca CommonJS implementasyonu çözümü
- 33. CommonJS ile;
- 34. Sunucu tarafında JavaScript Uygulamaları (CouchDB)
- 35. Komut satırı uygulamaları (NodeJS)
- 37. Hibrid uygulamalar (Adobe Air)
- 39. Herşey birer object'dir, yeni bir object için 'class' yerine 'function' kullanırız.
- 40. Anonymous function, isimsiz bir scope'dur. Aşağıdaki şekilde yazılır ve parametre gönderilir. Tabii ki bu da objectdir.
- 42. // code...
- 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;
- 46. Users.prototype.getUser = function(id){ return id;};
- 47. var id = 1,
- 48. user = new Users();
- 50. Web'in öksüz evladı: JavaScript Nonblocking Pattern Optimizasyonda İlk Adım
- 52. Script dosyaları yüklendikten sonra derlenme süreci vardır.
- 53. Derlenme sürecinde bir sonraki script dosyası da diğer tüm içerik gibi bekletilir.
- 54. Inline JavaScript satırları da yorumlanması için JS Engin'e gönderildiğinde diğer tüm içerik bekletilir.
- 55. Nonblocking pattern, diğer içeriği engellemeden JavaScript çalıştırmayı amaçlar.
- 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. Nonblocking Pattern Script tag'leri nerede konumlanmalıdır? … .. <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> </head> <body> … .. … .. <script src="js/main.js"></script> </body> </html>
- 59. HTML 4, eski bir teknik ve çoğu taraycı desteklemediği için bahsetmeyeceğiz.
- 61. var script = document.createElement('script'); script.src=”bar.js”;
- 63. AJAX ile Script Injection
- 64. XMLHttpRequest aracılığıyla js dosyası alınır ve body e append edilir.
- 65. var x = new XMLHttpRequest();
- 68. //.. xhr kontrol ve append kodları burada..
- 69. };
- 72. Minimizer ve Obfuscator kullanın.
- 73. Google closure veya YUI
- 74. Script taglarını </body> den hemen önce yerleştirin.
- 75. var script = document.createElement('script'); script.src=”bar.js”;
- 77. Sayfadaki tüm argumanların tamamlanmasını bekleyin.
- 78. Jquery'deki document.ready nin sırrı..
- 79. Script tag'ini dinamik oluşturun.
- 80. loader.js nin görevi: document.createElement('script');
- 83. YUI (Yahoo User Interfaces)
- 85. Kendi yazacağınız, 20 satır civarında bir loader.
- 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.
- 87. Web'in öksüz evladı: JavaScript Global Variables Suck! Global yerine local çok daha iyi bir seçim.
- 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. 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. 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. Global Variables Suck GLOBAL AS NESTED 430 milisaniye GLOBAL DEĞİŞKEN 300 milisaniye LOCAL DEĞİŞKEN 1 milisaniye
- 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. Web'in öksüz evladı: JavaScript DOM'a Erişimin Maaliyeti Git gel Gecko altı saat.
- 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. 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. DOM'a Erişimin Maliyeti Request document.getElementByID('mydiv'); Response <div id='mydiv'></div> 6 saat'lik mesafe NEDEN?
- 97. Web'in öksüz evladı: JavaScript Event Binding Tek binding ile toplu event handle etmek varken..
- 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. Event Binding document.addEventListener('click', function(){ // code... }); veya function foo(){ // code... }; document.addEventListener('click', foo); Event listener
- 100. Event Binding Bir event'in işleyişi <div id=”container”> <ul id=”navigation”> <a href=”/main”>Home</a> <li> event
- 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. 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. Event Binding (function() { document.getElementById('navigation').onclick = function(event){ var target = event.target; if (event.target.tagName == 'A') { alert('Şu sayfa açılacak: ' + target.attributes[0].value); document.location = target.attributes[0].value; }; event.preventDefault(); event.stopPropagation(); } }());
- 104. Web'in öksüz evladı: JavaScript Döngü İçindeki Değişkenler Aynı değeri defalarca istemek gereksiz
- 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. Döngü İçindeki Değişkenler 55.000 elemanı olan bir array için grafikteki performans farkı gözlenmiştir.
- 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. Web'in öksüz evladı: JavaScript SORULAR İrfan Durmuş