Your SlideShare is downloading. ×
Front end performance tip
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Front end performance tip

3,246
views

Published on

Daum 2008 UI Dev Day 발표 자료

Daum 2008 UI Dev Day 발표 자료

Published in: Technology

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,246
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
66
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Front-end Performance Tips !quot;#$!%&'()*!+,-
  • 2. Agenda • Why Front-End? • Loading phase • Rendering phase • Running phase • Conclusion
  • 3. Why Front-End?
  • 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
  • 21. Post image 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
  • 27. JavaScript block rendering
  • 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; }
  • 31. AlphaImageLoader demo
  • 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