Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

23
Optimizacija

Transcript of Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Page 1: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Optimizacija

Page 2: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 3: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 4: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 5: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 6: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Serve static content from a cookieless domainhttps://developers.google.com/speed/docs/best-practices/request#ServeFromCookielessDomainhttps://developers.google.com/speed/docs/best-practices/rtt#ParallelizeDownloadshttps://developers.google.com/speed/docs/best-practices/request#MinimizeRequestSizehttp://www.tomhoppe.com/index.php/2008/03/cross-sub-domain-javascript-ajax-iframe-etc/http://lesscss.org/http://easyxdm.net/wp/

Page 7: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Load css before javascripthttp://developer.yahoo.com/performance/rules.html#js_bottomhttps://developers.google.com/speed/docs/best-practices/rtt#PutStylesBeforeScripts

Page 8: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Odlozeno ucitavanje javascript-ahttp://msdn.microsoft.com/en-us/magazine/ff943568.aspxhttp://labjs.com/http://requirejs.org/http://www.commonjs.org/http://test.getify.com/concat-benchmark/test-1.html

Page 9: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Minify js, css, htmlhtml minifyhttp://perfectwebtutorials.com/2011/minify-html-place-javascript-at-bottom/http://www.robertsindall.co.uk/blog/minify-html-for-asp-net/

javascript minifyhttp://www.crockford.com/javascript/jsmin.htmlhttp://wonko.com/post/a_faster_jsmin_library_for_phphttp://www.asp.net/ajaxlibrary/act.ashx

minify csshttp://csstidy.sourceforge.net/usage.phphttp://www.dotnetperls.com/minify-css - odlican opis parametra za csstidyhttp://spriteme.org/

Page 10: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Osvezavanje statickih resursa

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

Page 11: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 12: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 13: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 14: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Global vs localvar 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();

Page 15: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

for-in vs forvar 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];}

Page 16: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 17: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 18: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 19: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Cache static resourceshttp://httpd.apache.org/docs/2.2/caching.htmlhttp://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

Page 20: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 21: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

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

Page 22: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Test primerihttp://jsperf.com/closurereferencespeedhttp://jsperf.com/intervalvsobject/2http://jsperf.com/for-vs-each-vs-each/2http://jsperf.com/for-vs-foreach/20http://jsperf.com/array-vs-object-vectoradditionhttp://jsperf.com/evalvsjson-parse

Page 23: Optimizacija - yclabs.files.wordpress.com · Alatke za optimizaciju

Korisnohttp://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.