Building Fast 3rd-Party Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June...

Building Fast 3rd-Party Webapps

O'Reilly VelocityWeb Performance and Operations Conference

24 June 2010

[email protected]@meebo-inc.com

Lessons learned from the Meebo Bar

Martin Hunt and Marcus Westin

The Meebo BarA customizable site bar with real-time social interaction

Meebo Bar, a 3rd Party Webapp

How do we make it run fast?

Loads on every pageInteracts with the page

JavaScript, CSS, Images & HTML

How do we make it respectful?

3rd Party WebappsThe Challenge

Do• Load lots of features• Load features fast

Without• Blocking rendering or onload• Affecting User Experience

How?

3rd Party Webapps: How?

• How to initialize a webappAsynchronous & non-blockingo

• Defer ExecutionMinimize impact when loading

• CSS and ImagesCrush, Combine, Avoid

• Perceived PerformanceTesting and psychology

Tools Techniques

Meebo Bar embed code

• executes in ~10mso no blocking network requestso no dependency on our server

• less than 1200 characters• gzips to about 700 bytes• embedded directly in page HTML or JS• executes even if our servers are not reachable

Initializing 3rd Party Webapps

Script Tagappend a script tag using JavaScript to the head of the documentCommonly accepted, but...

Inline JS <script src="">easy for publishers to addblocks the page in all browsers

XMLHttpRequestsAsynchronous, non-blockingsame-domain in most browsers

Iframe <iframe src="">load an HTML file in an iframeRequires HTML file on the hosting site

Accepted script loading code

var head = document.getElementsByTagName('head')[0],el = document.createElement('script');el.src = "http://www.myDom.ain/myScript.js"; head.appendChild(el);

good: cross domain (we're 3rd party content!)good: doesn't block network traffic

Don't block the page!

Script Tag Appendcan block scripts in Firefox!

blocks other scripts in Firefox• scripts execute in order• all scripts on the page block until the appended script

downloads and executes• (defer attribute supported in FF3.5+)

blocks onload event in all browsers

are there alternative nonblocking methods?

Iframed JS

1. Iframes load HTML, not JS2. Cross iframe communication is

same-domain only (non-HTML5 browsers)

3. Window onload event fires after all iframes load

Iframed JS - the solution var iframe = document.createElement('iframe'), doc = iframe.contentWindow.document; doc.open().write('<body onload="appendScriptTag()">') doc.close()

More About Iframes

iframe creation overhead?

Creating one DOM nodeo Chrome < 1mso Firefox, Safari ~1mso IE ~5ms

Sandboxed JavaScript

• 3rd party code will not break webpage code• Webpage code will not break 3rd party code!for (var i in x) {}

Defer Execution

Defer Execution

Lots of stuff happens in a browser while loading a page

Then, relatively little happens... Take advantage of this!

Defer Execution ExampleIn-page sharing




Naive implementation

function makeSharable(elements) { for (var i=0; i < elements.length; i++) { var element = elements[i]; var metadata = lookupMetadata(element); element.on('mousedown', startDrag, metadata); }}function lookupMetadata(el) { do { inspectElement(el) } while(el = el.parentNode)}

O(N)

O(M)

O(N*M)

Deferred implementation

function initShare() { document.on('mousedown', function(e) { var el = e.target || e.srcElement if (!el.getAttribute('meeboSharable')) { return; } var metadata = lookupMetadata(el); document.on('mousemove', handleDrag, metadata); document.on('mouseup', stopDrag, metadata); });}

O(1)

Page finishes loading

Modularize & Lazy Loadusers don't need all features immediately

1-1 Messagingconnect to all the

IM networks Broadcastingpublishers send new

content to usersSocial Networkingreceive updates aboutyour friends' activities Sharing

share site content to Facebook, Twitter, Buzz,

and other sitesSite Widgetssite-specific widgets:

videos, menus, navigation tools, etc.

Modularize & Lazy Load

Also applies to images and CSS!

Careful:Loading images can create

a lot of HTTP requests

Loading Images

Spriting and preloading is hardStill creates additional HTTP requestsDifficult to automate

Embed images into CSS insteadDataURIs and MHTML filesDetails on the Meebo devblog (http://mee.bo/cssimages)

Use Vector Graphics

Vector graphics are supported in all major browsers

• Firefox 3+• Opera 9.5+• IE 6+• Safari 3+• Chrome

Without images

With images

Tools - use them!

Preprocess if possible• if multiple clients are

doing the exact same task, run it on the server

• generate content offline

Compilers• Closure Compiler

Profilers• DynaTrace (IE)• Speed tracer (Chrome)• Firebug (FF)• Safari 5/WebKit

Perceived Performance

Quick loading content on a slow page appears to be the cause of the slow page

Delaying interface drawing can look slow or broken

Do not forget:Even asynchronous loading slows down a page.

Keep payloads minimal and always monitor performance!

[email protected]@meebo-inc.com

Highlights

• Always compress and minify content• Use an IFrame to load the main script payload• Defer execution until needed• Defer content download until needed• Remove HTTP requests by combining content

o Embed images into CSSo Use vector graphics

Date post:	26-Mar-2015
Category:	Documents
Upload:	carlos-underwood
View:	213 times
Download:	1 times

Building Fast 3rd-Party Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June...

Documents