Front-end Performance
         Tips


    !quot;#$!%&'()*!+,-
Agenda

• Why Front-End?
• Loading phase
• Rendering phase
• Running phase
• Conclusion
Why Front-End?
Back-End vs. Front-End
• Performance Optimization
 • Back-end
 • Front-end
Back-End vs. Front-End
• Performance Optimization
 • Back-end
 • Front-end      1.969 sec




 0.099 sec            HTML l...
Loading
Minimize HTTP Requests
 • Most Important Guideline
 • Performance Tuning
  • Same Contents
  • Low HTTP Request (=Connecti...
100


 75


 50


 25


  0
      html   iframe     flash   js        css   css image image

      Daum            Naver  ...
Image

• Image map
• CSS Sprite
 • CSS width, height, background property
• Inline image
 • Base64 encoded image data URL ...
<span style=“background-image:url('sprites.gif');
  background-position:-260px -90px;
  width:10px;height:10pxquot;></span>
CSS sprite - tv!
CSS sprite - tv!
CSS sprite - tv!
CSS sprite - tv!
CSS sprite - tv!
CSS sprite - YouTube
CSS sprite - YouTube
<img width=”10” height=”10” src=”p.gif”
style=”background:url(bg.gif)”/>
JavaScript/CSS combine

• JavaScript
 • variable, function conflict
• CSS
 • selector conflict
 • media=”print” ! @media pri...
@media rule
page.html
  <link ... href=”style.css” />
  <link ... href=”print.css” media=”print” />




page.html
  <link ...
On demand loading

• Ajax
• Post Image loading
• Post JavaScript / CSS loading
Post image loading
Post image loading
<div onscroll=”deferLoad(‘key’)”><ul>
  <li><img src=”image1.gif” /></li>
  ...
  <li><img src=”blank.g...
Cookie

• Remove unnecessary cookie
• Set expire date
• Check domain level
• Separate static / dynamic resource domain
Rendering
Initial Layout

• Depend on HTML / CSS not JavaScript
• quot;# $ %& '(
 • Window/Frame size
 • Not fully supported css pro...
JavaScript Block Downloading
 • Move To Bottom
JavaScript block rendering
FOUC & Blank White Screen

 • Why?
  • @import or <link> at bottom
 • Blank White Screen
  • New Window / Homepage
 • Move...
FOUC & Blank White Screen
AlphaImageLoader filter

• Rendering Semi-transparent PNG24
• Problem
 •   Block Loading & Rendering, Freeze Browser

 • li...
AlphaImageLoader demo
PNG24
AlphaImageLoader filter
            IE conditional comment
style.css
.png {background:transparent url(img.png) 0 0 no-repea...
Efficient CSS selector

• Avoid universal rule
• Don't qualify ID-categorized rules with tag
  names or classes
• Avoid the...
Running
CSS expression
font-size:
     expression(document.body.clientWidth/10+‘px’);


• IE proprietary
• Continuously run when
 ...
Background Flickering

• :hover (mouse over) action
• IE6
 • Flickering
 • Re-Request
• http://fivesevensix.com/studies/ie6...
Flickering demo
Background flickering Solution

• JavaScript
  document.execCommand(quot;BackgroundImageCachequot;,
    false, true);


• C...
String Handling
• Concatenation
 • + operator ! array.join()
• Search
 • regexp ! string.indexOf()
• Regular Expression
 •...
DOM Access

• Minimize DOM access
• Offline access
• Reuse reference
50x50 table creation
           W3C DOM     Table methods           innerHTML
                                            ...
Set Style
• by style property - BAD
   elm.style.backgroundColor = ‘#f00’;
   elm.style.width = ‘20px’;




• by CSS & cla...
4x425(1,700) td style
                      className         style         by Windows XP,
                               ...
JavaScript Framework

• prototype, jQuery,YUI ...
• Performance issue
 • File size
 • Internal object inheritance
• $() vs...
the Others
•   Cache

•   CDN(Contents Delivery Network)

•   Domain name

    •   DNS lookup

    •   Parallel download

...
Tools

• Firebug
• IBM page detailer
• YSlow
• Fiddler
Conclusion
• Front-end Performance
 • Trade-off
 • Service / Client environment
• As UI Developer
 • Unobtrusive JavaScript
 • Develo...
References
• YDN Exceptional Performance :
  Best Practices for Speeding Up Your Web Site

• ) *+, -./ 01(High Performance...
Q/A
Thank you
   suguni@gmail.com
http://yuiworld.kr/suguni
Upcoming SlideShare
Loading in …5
×

Front end performance tip

3,609 views
3,495 views

Published on

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,609
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
68
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Front end performance tip

  1. 1. Front-end Performance Tips !quot;#$!%&'()*!+,-
  2. 2. Agenda • Why Front-End? • Loading phase • Rendering phase • Running phase • Conclusion
  3. 3. Why Front-End?
  4. 4. Back-End vs. Front-End • Performance Optimization • Back-end • Front-end
  5. 5. Back-End vs. Front-End • Performance Optimization • Back-end • Front-end 1.969 sec 0.099 sec HTML loading time : 5%
  6. 6. Loading
  7. 7. Minimize HTTP Requests • Most Important Guideline • Performance Tuning • Same Contents • Low HTTP Request (=Connection) • Techniques • Simple Design • Combine Image/CSS/JavaScript
  8. 8. 100 75 50 25 0 html iframe flash js css css image image Daum Naver Cyworld Yahoo kr Request Stats. by YSlow
  9. 9. Image • Image map • CSS Sprite • CSS width, height, background property • Inline image • Base64 encoded image data URL format
  10. 10. <span style=“background-image:url('sprites.gif'); background-position:-260px -90px; width:10px;height:10pxquot;></span>
  11. 11. CSS sprite - tv!
  12. 12. CSS sprite - tv!
  13. 13. CSS sprite - tv!
  14. 14. CSS sprite - tv!
  15. 15. CSS sprite - tv!
  16. 16. CSS sprite - YouTube
  17. 17. CSS sprite - YouTube <img width=”10” height=”10” src=”p.gif” style=”background:url(bg.gif)”/>
  18. 18. JavaScript/CSS combine • JavaScript • variable, function conflict • CSS • selector conflict • media=”print” ! @media print { }
  19. 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. 20. On demand loading • Ajax • Post Image loading • Post JavaScript / CSS loading
  21. 21. Post image loading
  22. 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. 23. Cookie • Remove unnecessary cookie • Set expire date • Check domain level • Separate static / dynamic resource domain
  24. 24. Rendering
  25. 25. Initial Layout • Depend on HTML / CSS not JavaScript • quot;# $ %& '( • Window/Frame size • Not fully supported css property
  26. 26. JavaScript Block Downloading • Move To Bottom
  27. 27. JavaScript block rendering
  28. 28. FOUC & Blank White Screen • Why? • @import or <link> at bottom • Blank White Screen • New Window / Homepage • Move To Top
  29. 29. FOUC & Blank White Screen
  30. 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. 31. AlphaImageLoader demo
  32. 32. PNG24
  33. 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. 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. 35. Running
  36. 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. 37. Background Flickering • :hover (mouse over) action • IE6 • Flickering • Re-Request • http://fivesevensix.com/studies/ie6flicker/
  38. 38. Flickering demo
  39. 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. 40. String Handling • Concatenation • + operator ! array.join() • Search • regexp ! string.indexOf() • Regular Expression • new RegExp() ! / ~ / literal
  41. 41. DOM Access • Minimize DOM access • Offline access • Reuse reference
  42. 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. 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. 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. 45. JavaScript Framework • prototype, jQuery,YUI ... • Performance issue • File size • Internal object inheritance • $() vs. document.getElementById()
  46. 46. the Others • Cache • CDN(Contents Delivery Network) • Domain name • DNS lookup • Parallel download • ETags • Redirect
  47. 47. Tools • Firebug • IBM page detailer • YSlow • Fiddler
  48. 48. Conclusion
  49. 49. • Front-end Performance • Trade-off • Service / Client environment • As UI Developer • Unobtrusive JavaScript • Development Process • Accessibility
  50. 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. 51. Q/A
  52. 52. Thank you suguni@gmail.com http://yuiworld.kr/suguni

×