front end performance tip
DESCRIPTION
Daum 2008 UI Dev Day 발표 자료TRANSCRIPT
Front-end Performance Tips
!"#$!%&'()*!+,-
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
0.099 sec
1.969 sec
HTML loading time : 5%
Loading
Minimize HTTP Requests
• Most Important Guideline
• Performance Tuning
• Same Contents
• Low HTTP Request (=Connection)
• Techniques
• Simple Design
• Combine Image/CSS/JavaScript
Request Stats.
0
25
50
75
100
html iframe flash js css css image image
Daum Naver Cyworld Yahoo kr
by YSlow
Image
• Image map
• CSS Sprite
• CSS width, height, background property
• Inline image
• Base64 encoded image data URL format
<span style=“background-image:url('sprites.gif');
background-position:-260px -90px;
width:10px;height:10px"></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 print { }
@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 { … }
}
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.gif”
onload=”registerDeferImg(‘key’,
this,’image3.gif’)” /></li>
...
</ul></div>
Cookie
• Remove unnecessary cookie
• Set expire date
• Check domain level
• Separate static / dynamic resource domain
Rendering
Initial Layout
• Depend on HTML / CSS not JavaScript
• "# $ %& '(
• Window/Frame size
• Not fully supported css property
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 To Top
FOUC & Blank White Screen
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; }
AlphaImageLoader demo
PNG24
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]-->
AlphaImageLoader filter IE conditional comment
Efficient CSS selector
• Avoid universal rule
• Don't qualify ID-categorized rules with tag names or classes
• Avoid the descendant selector
• Rely on inheritance
Running
CSS expression
• IE proprietary
• Continuously run when mousemove, keypress, resize, scroll event
• Solution / Alternate
• One-time expression
• Event Handling
font-size:expression(document.body.clientWidth/10+‘px’);
Background Flickering
• :hover (mouse over) action
• IE6
• Flickering
• Re-Request
• http://fivesevensix.com/studies/ie6flicker/
Flickering demo
Background flickering Solution
• JavaScript
• CSS
• Web Server - Apache
document.execCommand("BackgroundImageCache", false, true);
html { filter:expression(document.execCommand( "BackgroundImageCache", false, true)); }
BrowserMatch "MSIE" brokenvary=1BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1BrowserMatch "Opera" !brokenvarySetEnvIf brokenvary 1 force-no-vary
String Handling
• Concatenation
• + operator ! array.join()
• Search
• regexp ! string.indexOf()
• Regular Expression
• new RegExp() ! / ~ / literal
DOM Access
• Minimize DOM access
• Offline access
• Reuse reference
DOM I/O test
IE6
IE7
Firefox2
Firefox3
Opera
Safari
0 1,000 2,000 3,000 4,000
W3C DOM Table methods innerHTML50x50 table creation
by Windows XP, Quirksmode.org
ms
Set Style
• by style property - BAD
• by CSS & className property - GOOD
elm.style.backgroundColor = ‘#f00’;
elm.style.width = ‘20px’;
style.css
.foo { background-color:#f00; width:20px; }
script.js
elm.className = ‘foo’;
Set Style test
IE6
IE7
Firefox2
Firefox3
Opera
Safari
0 100 200 300 400
className style4x425(1,700) td style
by Windows XP, Quirksmode.org
ms
JavaScript Framework
• prototype, jQuery, YUI ...
• Performance issue
• File size
• Internal object inheritance
• $() vs. document.getElementById()
the Others
• Cache
• CDN(Contents Delivery Network)
• Domain name
• DNS lookup
• Parallel download
• ETags
• Redirect
Tools
• Firebug
• IBM page detailer
• YSlow
• Fiddler
Conclusion
• Front-end Performance
• Trade-off
• Service / Client environment
• As UI Developer
• Unobtrusive JavaScript
• Development Process
• Accessibility
References
• YDN Exceptional Performance :
Best Practices for Speeding Up Your Web Site
• ) *+, -./ 01(High Performance
Web Sites), 2'3, Steve Souders
• QuirksMode.org
Q/A
