Web Program Performance Optimization                        Email:designsor@gmail.com                        Twitter:twitt...
Program Optimization ?Program ?Performance Optimization ?
data structure + algorithm (Worth)
Whats Algorithm?Simplify data structure.Good design patterns may be not fastest.
One Billion loop Performance for languagetime.ctime.pytime.jstime.phpCan you guess who the fastest?           time.c 0.28s...
Wheres web program different than common program?            We need more and more things to do.
Fat client,thin client;B/S or ERP;Web site;Web game;More and more.Back-end or Front-enddevelopment and optimization.Histor...
Browser - > server -> DB;DB-> server -> Browser;Read:Browser->server->Cache->DB;1,Cache->server->Browser;2,DB->Cache->serv...
I/ONetwork I/ODisk I/OMemory I/O
NosqlCassandraMongoMemcachedRedisTerracottaSomethings else for back-end development
1,You type an URL into address bar in your preferred browser.2,The browser parses the URL to find the protocol, host, port...
Front-end-processResource downloads(cache and server handle)CDNDNSJs Module downloads(Sync and Asyn)Pack codeHTTP and brow...
Resource downloadsAccept-Encoding:gzipCache-control,max-age,last-Modified, expires, eTagTransfer-Encoding:keep-alive,Conne...
CDNCloudFlareSpeedy MirrorWeblukerPublic Resources on SAETaobao CDN
DNS
Js Module downloads(Sync and Asyn)sync               function loadByQueue(list,type,callback){                     Var _lo...
Pack codeCss:No gzipJs:More fastest execute,more smallerGoogle Closure Compiler vs yuicompress
HTTP and browsers limitGet fast than postURLs over 2,000 characters will not work in the most popular web browser.HTTP1.1 ...
Handle slowly usersvar someapp = new app();someapp.init();var someapp = new app();$.extend(someapp,{Speed:null,checkSpeed:...
Front-end-executeDom RenderingCss RenderingJavascript ExecutedTest and code refactoringSome code skills
Dom Rendering
Css Rendering1,Use efficient CSS selectors2,Avoid CSS expressions3,Put CSS in the document head4,Specify a character set5,...
Javascript ExecuteOrderLoading and ExecutionData Access and Cache(closures,scope)DOM ScriptingRepaints and ReflowsEvent De...
Test and code refactoringrefactoring based on TestWrite Testable codeUi test and Unit test
Some code skillsAvoid Double EvaluationUse Object/Array LiteralsDont repeat workLazy/Conditional Advance Loading(code or a...
Front-end-schemeImg optimizationDesignSeoMore choose for userTailor-made
Img optimizationJPG GIF PNG(8,24,32)PngcrushJpegtranGifsicleSmush.itAvoid AlphaImageLoaderOptimizing SpritesAvoid Scaling ...
Design
SeoDefine keywordsIn order of popularityRemoved Repeat keywordsTop three is titleDescription meta tagKeywords meta tagh1-h...
More choose for userSlowly userSpecial userDisability userDifferent terminal user
Tailor-madeUser habits AnalysisAdvance load assets
Front-end-toolsPage speedYslowChrom monsterDynaTrace
Endless possibilitiesMeteorTower.jsYes,they all based on nodejs !
Web program-peformance-optimization
Web program-peformance-optimization
Upcoming SlideShare
Loading in …5
×

Web program-peformance-optimization

572 views

Published on

Web program-peformance-optimization

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

  • Be the first to like this

No Downloads
Views
Total views
572
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 程序( program )是为实现特定目标或解决特定问题而用计算机语言编写的命令序列的集合。为实现预期目的而进行操作的一系列语句和指令。一般分为系统程序和应用程序两大类。 一个程序应该包括以下两方面的内容。    1 对数据的描述。在程序中要指定数据的类型和数据的组织形式,即数据结构( data structure )。    2 对操作的描述。即操作步骤,也就是算法( algorithm )。 以上当然全部来自(百度百科)啦。 犀利的总结一下:数据结构 + 算法 = 程序(沃思)。 我这里想说的是 计算机语言,程序设计模式,不应该算在程序这个概念中,程序就定义而言,只是完成任务的工具集合或者操作指令等,看的是结果,所以语言和设计模式不算在程序的概念中,只是实现的过程。
  • Web program-peformance-optimization

    1. 1. Web Program Performance Optimization Email:designsor@gmail.com Twitter:twitter/xiao_jue
    2. 2. Program Optimization ?Program ?Performance Optimization ?
    3. 3. data structure + algorithm (Worth)
    4. 4. Whats Algorithm?Simplify data structure.Good design patterns may be not fastest.
    5. 5. One Billion loop Performance for languagetime.ctime.pytime.jstime.phpCan you guess who the fastest? time.c 0.28s time.js 0.19s time.php 10s time.python 5.46599197388s
    6. 6. Wheres web program different than common program? We need more and more things to do.
    7. 7. Fat client,thin client;B/S or ERP;Web site;Web game;More and more.Back-end or Front-enddevelopment and optimization.Historical issues.
    8. 8. Browser - > server -> DB;DB-> server -> Browser;Read:Browser->server->Cache->DB;1,Cache->server->Browser;2,DB->Cache->server->Browser;Write:Browser->server->Cache ;Interval write:Cache-> DB;
    9. 9. I/ONetwork I/ODisk I/OMemory I/O
    10. 10. NosqlCassandraMongoMemcachedRedisTerracottaSomethings else for back-end development
    11. 11. 1,You type an URL into address bar in your preferred browser.2,The browser parses the URL to find the protocol, host, port, and path.3,It forms a HTTP request (that was most likely the protocol)4,To reach the host, it first needs to translate the human readable host into an IP number,and it does this by doing a DNS lookup on the host5,Then a socket needs to be opened from the user’s computer to that IP number, on the port specified (most often port 80)6,When a connection is open, the HTTP request is sent to the host7,The host forwards the request to the server software (most often Apache) configured to listen on the specified port8,The server inspects the request (most often only the path), and launches the server plugin needed tohandle the request (corresponding to the server language you use, PHP, Java, .NET, Python?)9,The plugin gets access to the full request, and starts to prepare a HTTP response.10,To construct the response a database is (most likely) accessed. A database search is made, based on parameters in thepath (or data) of the request11,Data from the database, together with other information the plugin decides to add, is combined into a long string of text(probably HTML).12,The plugin combines that data with some meta data (in the form of HTTP headers), and sends the HTTP response backto the browser.13,The browser receives the response, and parses the HTML (which with 95% probability is broken) in the response14,A DOM tree is built out of the broken HTML15,New requests are made to the server for each new resource that is found in the HTML source (typically images, stylesheets, and JavaScript files). Go back to step 3 and repeat for each resource.16,Stylesheets are parsed, and the rendering information in each gets attached to the matching node in the DOM tree17,Javascript is parsed and executed, and DOM nodes are moved and style information is updated accordingly18,The browser renders the page on the screen according to the DOM tree and the style information for each node19,You see the page on the screen20,You get annoyed the whole process was too slow.https://github.com/chaosmical/HTTP-headers-status-CN/raw/master/http-headers-status-CN.jpg
    12. 12. Front-end-processResource downloads(cache and server handle)CDNDNSJs Module downloads(Sync and Asyn)Pack codeHTTP and browsers limitHandle slowly users
    13. 13. Resource downloadsAccept-Encoding:gzipCache-control,max-age,last-Modified, expires, eTagTransfer-Encoding:keep-alive,Connection:chunked
    14. 14. CDNCloudFlareSpeedy MirrorWeblukerPublic Resources on SAETaobao CDN
    15. 15. DNS
    16. 16. Js Module downloads(Sync and Asyn)sync function loadByQueue(list,type,callback){ Var _load={ “sync”:function(list){>> Var src = list[0]; If(!src) callback(); >> getScript(src,function(){ list.shift(); >> _load[sync](list); });asyn }, “asyn”:function(list){ Var list = list.reverse(),len = list.length;>> while(len—){ Var src = list[len];>> queue[len] = flase; getScript(src,function(){>> queue.foreach(function(i){ If(!i) return; If(i && i==queue.length){ callback(); } }); }); } } } } LoadByQueue([1.js,2.js,3.js],”sync”);
    17. 17. Pack codeCss:No gzipJs:More fastest execute,more smallerGoogle Closure Compiler vs yuicompress
    18. 18. HTTP and browsers limitGet fast than postURLs over 2,000 characters will not work in the most popular web browser.HTTP1.1 persistent connectionHTTP 1.1 HTTP 1.0 complicated the same domainIE 6,7 2 4IE 8 6 6Firefox 2 2 8Firefox 3 6 6Safari 3, 4 4 4Chrome 1,2 6 ?Chrome 3 4 4Opera 9.63,10.00alpha 4 4One client 300 Cookie , One domain 20 CookieIE: css 31 stylesheet
    19. 19. Handle slowly usersvar someapp = new app();someapp.init();var someapp = new app();$.extend(someapp,{Speed:null,checkSpeed:function(){var self = this,timeout = 10000;self.Speed = setTimeout(function(){$.trigger(“slowly”,[self]);},timeout);},closeCheckSpeed:function(){clearTimeout(this.Speed);
    20. 20. Front-end-executeDom RenderingCss RenderingJavascript ExecutedTest and code refactoringSome code skills
    21. 21. Dom Rendering
    22. 22. Css Rendering1,Use efficient CSS selectors2,Avoid CSS expressions3,Put CSS in the document head4,Specify a character set5,Avoid reflow and repaint by specifying imagedimension6,CSS3 SelectorsSpeed vs Practicality
    23. 23. Javascript ExecuteOrderLoading and ExecutionData Access and Cache(closures,scope)DOM ScriptingRepaints and ReflowsEvent DelegationAlgorithms and Flow ControlString and Regular Expressions(trim)http://blog.stevenlevithan.com/archives/faster-trim-javascriptResponsive InterfacesAjax(MXHR,Data Format)
    24. 24. Test and code refactoringrefactoring based on TestWrite Testable codeUi test and Unit test
    25. 25. Some code skillsAvoid Double EvaluationUse Object/Array LiteralsDont repeat workLazy/Conditional Advance Loading(code or assets)Bitwise OperatorsNative Methods
    26. 26. Front-end-schemeImg optimizationDesignSeoMore choose for userTailor-made
    27. 27. Img optimizationJPG GIF PNG(8,24,32)PngcrushJpegtranGifsicleSmush.itAvoid AlphaImageLoaderOptimizing SpritesAvoid Scaling Images
    28. 28. Design
    29. 29. SeoDefine keywordsIn order of popularityRemoved Repeat keywordsTop three is titleDescription meta tagKeywords meta tagh1-h6Keywords appear tacticsContent for keywords(uri is title,tags cloud)
    30. 30. More choose for userSlowly userSpecial userDisability userDifferent terminal user
    31. 31. Tailor-madeUser habits AnalysisAdvance load assets
    32. 32. Front-end-toolsPage speedYslowChrom monsterDynaTrace
    33. 33. Endless possibilitiesMeteorTower.jsYes,they all based on nodejs !

    ×