Javascript Performance Optimisation

Javascript Performance Optimisation
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ş
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
Web'in öksüz evladı: JavaScript JavaScript Tarihi Kısaca..
İ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.
Web'in öksüz evladı: JavaScript Geleceğin Teknolojisi JavaScript Nerelerde Kullanılıyor?
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
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)
Herşey birer object'dir, yeni bir object için 'class' yerine 'function' kullanırız.
Anonymous function, isimsiz bir scope'dur. Aşağıdaki şekilde yazılır ve parametre gönderilir. Tabii ki bu da objectdir.
(function($, window){
// code...
}(jQuery, wndow));
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;
function Users(){};
Users.prototype.getUser = function(id){ return id;};
var id = 1,
user = new Users();
user.getUser(id);
Web'in öksüz evladı: JavaScript Nonblocking Pattern Optimizasyonda İlk Adım
Script dosyaları yüklendikten sonra derlenme süreci vardır.
Derlenme sürecinde bir sonraki script dosyası da diğer tüm içerik gibi bekletilir.
Inline JavaScript satırları da yorumlanması için JS Engin'e gönderildiğinde diğer tüm içerik bekletilir.
Nonblocking pattern, diğer içeriği engellemeden JavaScript çalıştırmayı amaçlar.
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
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>
HTML 4, eski bir teknik ve çoğu taraycı desteklemediği için bahsetmeyeceğiz.
Dinamik Script Elementi
var script = document.createElement('script'); script.src=”bar.js”;
document.getElementsByTagName('head')[0].appendChild(script);
AJAX ile Script Injection
XMLHttpRequest aracılığıyla js dosyası alınır ve body e append edilir.
var x = new XMLHttpRequest();
x.open('get', 'main.js', true);
x.onreadystatechange = function(){
//.. xhr kontrol ve append kodları burada..
};
loader.js ve main.js
Minimizer ve Obfuscator kullanın.
Google closure veya YUI
Script taglarını </body> den hemen önce yerleştirin.
var script = document.createElement('script'); script.src=”bar.js”;
document.getElementsByTagName('head')[0].appendChild(script);
Sayfadaki tüm argumanların tamamlanmasını bekleyin.
Jquery'deki document.ready nin sırrı..
Script tag'ini dinamik oluşturun.
loader.js nin görevi: document.createElement('script');
github.com/rgrove/lazyload
YUI (Yahoo User Interfaces)
http://developer.yahoo.com/yui/
Kendi yazacağınız, 20 satır civarında bir loader.
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.
Web'in öksüz evladı: JavaScript Global Variables Suck! Global yerine local çok daha iyi bir seçim.
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();
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();
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();
Global Variables Suck GLOBAL AS NESTED 430 milisaniye GLOBAL DEĞİŞKEN 300 milisaniye LOCAL DEĞİŞKEN 1 milisaniye
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
Web'in öksüz evladı: JavaScript DOM'a Erişimin Maaliyeti Git gel Gecko altı saat.
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 √
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
DOM'a Erişimin Maliyeti Request document.getElementByID('mydiv'); Response <div id='mydiv'></div> 6 saat'lik mesafe NEDEN?
Web'in öksüz evladı: JavaScript Event Binding Tek binding ile toplu event handle etmek varken..
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?
Event Binding document.addEventListener('click', function(){ // code... }); veya function foo(){ // code... }; document.addEventListener('click', foo); Event listener
Event Binding Bir event'in işleyişi <div id=”container”> <ul id=”navigation”> <a href=”/main”>Home</a> <li> event
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
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
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(); } }());
Web'in öksüz evladı: JavaScript Döngü İçindeki Değişkenler Aynı değeri defalarca istemek gereksiz
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ü
Döngü İçindeki Değişkenler 55.000 elemanı olan bir array için grafikteki performans farkı gözlenmiştir.
Okunabilecek Kitaplar
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
Web'in öksüz evladı: JavaScript SORULAR İrfan Durmuş

Check these out next

Javascript Performance Optimisation

Recommended

More Related Content

Similar to Javascript Performance Optimisation(20)

Recently uploaded(20)

Javascript Performance Optimisation