Front end performance tip
•
7 likes•1,721 views
This document provides tips for optimizing front-end performance. It discusses optimizing assets like images, CSS, and JavaScript to reduce file sizes and load times. Specific techniques include image sprites, CSS combining, lazy loading images, and minimizing DOM access. It also covers optimizing the rendering process by prioritizing visible content, avoiding layout thrashing, and deferring non-critical scripts. The document emphasizes the importance of front-end performance and provides references for further reading on the topic.
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Front end performance tip
Similar to Front end performance tip (20)
Recently uploaded
Recently uploaded (20)
Front end performance tip
- 1. Front-end Performance Tips !quot;#$!%&'()*!+,-
- 2. Agenda • Why Front-End? • Loading phase • Rendering phase • Running phase • Conclusion
- 4. Back-End vs. Front-End • Performance Optimization • Back-end • Front-end
- 5. Back-End vs. Front-End • Performance Optimization • Back-end • Front-end 1.969 sec 0.099 sec HTML loading time : 5%
- 6. Loading
- 7. Minimize HTTP Requests • Most Important Guideline • Performance Tuning • Same Contents • Low HTTP Request (=Connection) • Techniques • Simple Design • Combine Image/CSS/JavaScript
- 8. 100 75 50 25 0 html iframe flash js css css image image Daum Naver Cyworld Yahoo kr Request Stats. by YSlow
- 9. Image • Image map • CSS Sprite • CSS width, height, background property • Inline image • Base64 encoded image data URL format
- 10. <span style=“background-image:url('sprites.gif'); background-position:-260px -90px; width:10px;height:10pxquot;></span>
- 11. CSS sprite - tv!
- 12. CSS sprite - tv!
- 13. CSS sprite - tv!
- 14. CSS sprite - tv!
- 15. CSS sprite - tv!
- 16. CSS sprite - YouTube
- 17. CSS sprite - YouTube <img width=”10” height=”10” src=”p.gif” style=”background:url(bg.gif)”/>
- 18. JavaScript/CSS combine • JavaScript • variable, function conflict • CSS • selector conflict • media=”print” ! @media print { }
- 19. @media rule page.html <link ... href=”style.css” /> <link ... href=”print.css” media=”print” /> page.html <link ... href=”style.css” /> style.css #wrap { … } @media print { #wrap { … } }
- 20. On demand loading • Ajax • Post Image loading • Post JavaScript / CSS loading
- 22. Post image loading <div onscroll=”deferLoad(‘key’)”><ul> <li><img src=”image1.gif” /></li> ... <li><img src=”blank.gif” onload=”registerDeferImg(‘key’, this,’image3.gif’)” /></li> ... </ul></div>
- 23. Cookie • Remove unnecessary cookie • Set expire date • Check domain level • Separate static / dynamic resource domain
- 24. Rendering
- 25. Initial Layout • Depend on HTML / CSS not JavaScript • quot;# $ %& '( • Window/Frame size • Not fully supported css property
- 26. JavaScript Block Downloading • Move To Bottom
- 28. FOUC & Blank White Screen • Why? • @import or <link> at bottom • Blank White Screen • New Window / Homepage • Move To Top
- 29. FOUC & Blank White Screen
- 30. AlphaImageLoader filter • Rendering Semi-transparent PNG24 • Problem • Block Loading & Rendering, Freeze Browser • link & mouse pointer • Solution • IE conditional comment & IE6 ‘_’ hack • a { position:relative; cursor:pointer; }
- 32. PNG24
- 33. AlphaImageLoader filter IE conditional comment style.css .png {background:transparent url(img.png) 0 0 no-repeat;} page.html <!--[if lte IE 6]> <style type=”text/css”> .png { background-image:none; filter:progid: DXImageTransform.Microsoft.AlphaImageLoader( src='img.png',sizingMethod='scale'); } </style> <![endif]-->
- 34. Efficient CSS selector • Avoid universal rule • Don't qualify ID-categorized rules with tag names or classes • Avoid the descendant selector • Rely on inheritance
- 35. Running
- 36. CSS expression font-size: expression(document.body.clientWidth/10+‘px’); • IE proprietary • Continuously run when mousemove, keypress, resize, scroll event • Solution / Alternate • One-time expression • Event Handling
- 37. Background Flickering • :hover (mouse over) action • IE6 • Flickering • Re-Request • http://fivesevensix.com/studies/ie6flicker/
- 38. Flickering demo
- 39. Background flickering Solution • JavaScript document.execCommand(quot;BackgroundImageCachequot;, false, true); • CSS html { filter:expression(document.execCommand( quot;BackgroundImageCachequot;, false, true)); } • Web Server - Apache BrowserMatch quot;MSIEquot; brokenvary=1 BrowserMatch quot;Mozilla/4.[0-9]{2}quot; brokenvary=1 BrowserMatch quot;Operaquot; !brokenvary SetEnvIf brokenvary 1 force-no-vary
- 40. String Handling • Concatenation • + operator ! array.join() • Search • regexp ! string.indexOf() • Regular Expression • new RegExp() ! / ~ / literal
- 41. DOM Access • Minimize DOM access • Offline access • Reuse reference
- 42. 50x50 table creation W3C DOM Table methods innerHTML by Windows XP, Quirksmode.org IE6 IE7 Firefox2 Firefox3 Opera Safari 0 1,000 2,000 3,000 4,000 ms DOM I/O test
- 43. Set Style • by style property - BAD elm.style.backgroundColor = ‘#f00’; elm.style.width = ‘20px’; • by CSS & className property - GOOD style.css .foo { background-color:#f00; width:20px; } script.js elm.className = ‘foo’;
- 44. 4x425(1,700) td style className style by Windows XP, Quirksmode.org IE6 IE7 Firefox2 Firefox3 Opera Safari 0 100 200 300 400 ms Set Style test
- 45. JavaScript Framework • prototype, jQuery,YUI ... • Performance issue • File size • Internal object inheritance • $() vs. document.getElementById()
- 46. the Others • Cache • CDN(Contents Delivery Network) • Domain name • DNS lookup • Parallel download • ETags • Redirect
- 47. Tools • Firebug • IBM page detailer • YSlow • Fiddler
- 48. Conclusion
- 49. • Front-end Performance • Trade-off • Service / Client environment • As UI Developer • Unobtrusive JavaScript • Development Process • Accessibility
- 50. References • YDN Exceptional Performance : Best Practices for Speeding Up Your Web Site • ) *+, -./ 01(High Performance Web Sites), 2'3, Steve Souders • QuirksMode.org
- 51. Q/A
- 52. Thank you suguni@gmail.com http://yuiworld.kr/suguni