您的浏览器Javascript被禁用,需开启后体验完整功能, 请单击此处查询如何开启
网页 资讯 视频 图片 知道 贴吧 采购 地图 文库 |

(3)optimize_for_mobile-罗志宇_互联网_IT/计算机_专业资料

1340人阅读|2次下载

(3)optimize_for_mobile-罗志宇_互联网_IT/计算机_专业资料。2012年HTML5峰会PPT


Optimize your web pages for mobile devices Luo zhiyu THE INTERNET The big picture Know your browser ● ● What is it ? How does it work ? How data flows Network Parsing Layout Rendering Browser Let's get the data: the network module Network Parsing Layout Rendering Browser A typical time line. OK I got it. Then what? HTML document The parser. Network Parsing Layout Rendering Browser Parser: Hmm..it looks like a tree.. Document html HTML Parser head body meta meta table www.opera.com How data flows Network Parsing Layout Rendering Browser Layout Layout: I guess I need to build some boxes... Document html head body box Flow box div text box box Content line div Layout: CSS, there is it CSS rule set Document match html head body match box Flow box div text box box Content line div How data flows Network Parsing Layout Rendering Browser Rendering: OK, let's draw it out Display list or display tree box Draw box Draw box box Draw box Content line box box Draw box Draw text Rendering: ... Display list or display tree Draw box Draw box Draw box Draw box Paint Draw text Time to optimize , how ? Right is better than faster Clear structure Only do it at hot spots Profile-guided Firebug Chrome Dragonfly Let's see the picture again. Network Parsing Layout Rendering Browser Network Just remember, every request is expensive. Don't waste the bandwidth on anything that user would never see. <img src=”1.jpg” style=”width:100px;height:100px;”> 1.jpg : 1024px , 1024px Look at the order www.opera.com Adjust the order so it shows faster Document Main CSS Other CSS Image 1 Page would show almost right here. Cache, cache and cache. The best optimization for the network performance is to get rid of it. Application cache ( manifest ) Webstorage Indexed Database ...Etc. Profiling is always preferable. Parsing Highly optimized, in general very fast. Avoid common mistakes, such as an overly complicated DOM tree <font size="3" color="red"> <span>This is some text! </span> </font> <font size="2" color="blue"> <span>This is some text!</span> </font> CSS might be a better choice... W3C validation http://validator.w3.org/ Layout Good Structure CSS - styles, visual representation. HTML - document data. CSS match CSS match Up to 70% CPU time in Layout CSS match Up to 70% CPU time in Layout www.opera.com Accepts universal selector attribute presence and values selectors class selectors ID selectors :link, :visited, :active, :hover, :focus, :lang() and :first-child pseudo-classes descendant combinator child combinator adjacent sibling combinator ::first-line and ::first-letter pseudo-elements ::before and ::after pseudo-elements Excludes substring matching attribute selectors :target pseudo-classes all UI element states pseudo-classes all structural pseudo-classes other than :first-child negation pseudo-class general sibling combinators Namespaces Extra constraints more than one class selector per sequence of simple selectors (CSS1 constraint) allowed Rendering For the software renderer How many pixel it would touch Speed Examples: CSS shadow. Slow ! Why? h3 {text-shadow: 1px 1px 100px #333} Touched Pixel ~ = text pixel * 50 CSS round corner vs CSS Sprites vs PNGs. A graph totally based on CSS Take advantage of CSS as much as possible Just be aware some of them are slow. The same rule applies to Canvas. www.opera.com No , I guess there is something called JAVA SCRIPT Where is it Network Parsing Layout Rendering DOM tree Java script engine Browser How to optimize External: Access to the DOM tree. Internal: The Javascript engine. External Think twice. Internal Understand how it works. High performance Easy to write/read Asm C C++ Java Javascript/python etc How it works in general? Slow zone ? Interpretor Show zone Javascript Compiler Byte code analyzer ? JIT The ultimate goal Performance senstive code always falls in the fast Zone (JIT). Question: what can (not) be JITed. Eval & Exceptions = SLOW The difference is 5 – 100 times var result = 0; for (var i = 0; i < 1000; i++) { result = eval(“ result + i”); } var result = 0; for (var i = 0; i < 1000; i++) { result = result + i; } Access to DOM = JIT termination var result = 0; for (var i = 0; i < 1000; i++) { result = result + document.getByElementId(“foo”).getValue(); //JIT stops here } So cache it var result = 0; var value = document.getByElementId(“foo”).getValue(); for (var i = 0; i < 1000; i++) { result = result +value; } // Those will be JIT-ed and well optimized Type stable java script var result = 0; for (var i = 0; i < 1000; i+ +) { result += i; } } result = “hello”; //Type changed var result = 0; for (var i = 0; i < 1000; i+ +) { result += i; Why? Box and unbox var a = 14; Type:INT32 14 a = “Foo”; Type:String “Foo” Unbox Foo Unbox 14 No type switch = Easy to be JIT-ed A lot more to look at Garbage collector Inline cache ArithmeticBlock etc. Profile guided Always use profiler if possible Q and A Thanks

您的评论

发布评论

用户评价

  • 这篇文档有word格式吗?(3)optimize_for_mobile-罗志宇 2018-06-24 04:57:20
+申请认证

文档贡献者

HTML5梦工场

HTML5梦工场

0 0 0.0
文档数 浏览总量 总评分