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