Optimizacija

Alatke za optimizaciju
https://developers.google.com/speed/pagespeed/download https://developers.google.com/web-toolkit/speedtracer/ http://yslow.org/ http://ajax.dynatrace.com/ajax/en/

Analiza optimizacije
http://www.yuiblog.com/blog/2006/11/28/performance-research-part-1/ https://developer.yahoo.com/performance/rules.html http://grails.org/plugin/ui-performance https://developers.google.com/speed/pagespeed/ https://developers.google.com/web-toolkit/speedtracer/speed-tracer-examples

Tips
- ukljuciti http kompresiju - css fajlove uvek ucitati pre javascript fajlova - kroz head tag ucitati javascript koji sadrzi document.write ili se oslanja na onlaod dogadjaj, ostali javscript ucitati dinamicki i postaviti init funkciju koja ce okinuti nakon ucitavanja ako je potreno - slikama uvek zadati dimenzije i treba izbegavati skaliranje - minify js, css, html - putanja do statickih fajlova mora da zavisi od broja verzije do statickih resursa ( js, css, image files) - poziv ka statickim resursima treba da bude upucen na drugi sub domen i pritom ne ukljicivati slanje cookie za sub domene. Obratiti paznju na putanju ka slikama u css i img tagovima(moguce resenje uvodjenjem promenjivih u css koriscnjemi lesscss) - velicina cookie ne sme da predje 2KB - uvek podesite tip enkondinga u http responsu

Enable HTTP Compression

http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/ http://httpd.apache.org/docs/2.0/mod/mod_deflate.html http://technet.microsoft.com/en-us/library/cc753681(v=ws.10).aspx

Serve static content from a cookieless domain

https://developers.google.com/speed/docs/best-practices/request#ServeFromCookielessDomain https://developers.google.com/speed/docs/best-practices/rtt#ParallelizeDownloads https://developers.google.com/speed/docs/best-practices/request#MinimizeRequestSize http://www.tomhoppe.com/index.php/2008/03/cross-sub-domain-javascript-ajax-iframe-etc/ http://lesscss.org/

http://easyxdm.net/wp/

Load css before javascript

http://developer.yahoo.com/performance/rules.html#js_bottom https://developers.google.com/speed/docs/best-practices/rtt#PutStylesBeforeScripts

Odlozeno ucitavanje javascript-a

http://msdn.microsoft.com/en-us/magazine/ff943568.aspx http://labjs.com/ http://requirejs.org/ http://www.commonjs.org/ http://test.getify.com/concat-benchmark/test-1.html

Minify js, css, html

html minify http://perfectwebtutorials.com/2011/minify-html-place-javascript-at-bottom/ http://www.robertsindall.co.uk/blog/minify-html-for-asp-net/ javascript minify http://www.crockford.com/javascript/jsmin.html http://wonko.com/post/a_faster_jsmin_library_for_php http://www.asp.net/ajaxlibrary/act.ashx minify css http://csstidy.sourceforge.net/usage.php http://www.dotnetperls.com/minify-css - odlican opis parametra za csstidy http://spriteme.org/

Osvezavanje statickih resursa

/css/default.css?v=23 /css/v_3/default.css

Combine Multiple JavaScript and CSS Files and Remove Overheads

http://geekswithblogs.net/rashid/archive/2007/07/25/Combine-Multiple-JavaScript-and-CSS-Files-and-Remove-Overheads.aspx http://www.totaldotnet.com/Article/ShowArticle30_CombineJavascript.aspx http://contentgator.codeplex.com/ http://aciddrop.com/2008/01/03/automatically-join-your-javascript-and-css-into-a-single-file/

Preloading images
http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html http://chipsandtv.com/articles/jquery-image-preload http://ditio.net/2010/02/14/jquery-preload-images-tutorial-and-example/

JavaScript Performance Best Practices

http://www.developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices http://www.developer.nokia.com/Community/Wiki/Tips_and_tricks_for_improving_JavaScript_performance http://dev.opera.com/articles/view/efficient-javascript/?page=2 http://blog.getify.com/labjs-why-not-just-concat/ http://limi.net/articles/resource-packages/ https://developer.mozilla.org/En/Offline_resources_in_Firefox

Global vs local
var i, str = ''; function globalScope() { for (i=0; i < 100; i++) { str += i; } } globalScope(); /////////////////////////////////////////////////////////////// function localScope() { var i, str = ''; for (i=0; i < 100; i++) { str += i; } } localScope();

for-in vs for
var sum = 0; for (var i in arr) { sum += arr[i]; } /////////////////////////////////////////////////////// var sum = 0; for (var i = 0, len = arr.length; i < len; i++) { sum += arr[i]; }

Array
arr.push(val); ////////////////////////////// arr[arr.length] = val;

Javascript patterns
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript http://elegantcode.com/2011/01/26/basic-javascript-part-8-namespaces/

String concat
http://nerds-central.blogspot.com/2007/03/hight-speed-string-concatenation-in.html http://nerds-central.blogspot.com/2007/03/fstringcat-even-faster-string.html

Cache static resources

http://httpd.apache.org/docs/2.2/caching.html
http://www.mabishu.com/blog/2009/12/08/using-memcache-server-as-apache-content-cach/ http://code.google.com/p/modmemcachecache/ http://www.yuiblog.com/blog/2006/11/28/performance-research-part-1/ http://stackoverflow.com/questions/2300134/is-it-worth-having-static-resources-in-a-separate-domain-server

Javascript Benchmark Tests

http://ejohn.org/blog/javascript-benchmark-quality/ http://www.webkit.org/perf/sunspider/sunspider.html http://v8.googlecode.com/svn/data/benchmarks/v7/run.html http://dromaeo.com/

Javascript Benchmark Tools

http://jsperf.com http://www.broofa.com/Tools/JSLitmus/ http://calendar.perfplanet.com/2010/bulletproof-javascript-benchmarks/ http://stackoverflow.com/questions/1003855/howto-benchmark-javascript-code

Test primeri
http://jsperf.com/closurereferencespeed http://jsperf.com/intervalvsobject/2 http://jsperf.com/for-vs-each-vs-each/2 http://jsperf.com/for-vs-foreach/20 http://jsperf.com/array-vs-object-vectoraddition http://jsperf.com/evalvsjson-parse

Korisno
http://css3pie.com/ - PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. http://modernizr.com/ - Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.