Daum 2008 UI Dev Day 발표 자료

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