home > events > jquery-2010 (2025-07-30)

High Performance JavaScript Conference 2010 in San Francisco Bay Area

High Performance JavaScript Conference 2010 in San Francisco Bay Area

Table of Contents

Summary

http://events.jquery.org/2010/sf-bay-area/ http://speakerrate.com/events/365-jquery-conference-2010-san-francisco-bay-area

The San Francisco Bay Area conference will be held at the Microsoft Silicon Valley Campus Conference Center in Mountain View, California

Tasks

FireQuery   performance

detach() to ensure that event handlers   performance

Audit for repeat use DOM selecctors   performance

Create a progressive enhancement prototype with movie player   performance

Audit site for failure to use DOM fragments   performance

Upgrade to 1.4.2 to simplify detach() and remove()   performance

Get slideshare for performance

Review labjs

Define a core Classmates platform

Set a CDN reviewer

jQuery

jQueryUI

Core DOM

Sessions

Welcome and Introduction Apr. 24 2010, 10:00 AM

Over 500 People; largest JavaScript conference.

People at table from American Apparel; jQuery 1.4.2 with Dynamo.

http://www.americanapparel.net/

Ads, widgets, and analytics - Oh my! Apr. 24 2010, 11:00 AM

http://speakerrate.com/talks/2962-ads-widgets-and-analytics-oh-my

Site speed in search algorithm.

Do large companies have an easier time to enhance performance.

Regression time, many teams build the components for the page, risk assessment.

Tools recommended are:

YSlow!   tools

Better with sprites.

Page Speed   tools

Better with deprecated styles.

webPagetest   tools

Show a video of the comparison between the load of the systems.

This is similar to

http://code.google.com/speed/page-speed/docs/using.html#activities

More than half of a site can now be third party content

appendChild () vs. insertBefore()

For async script loading.

Interesting change in the load behavior for Google Analytics. Also look at YUI loader's implementation for how to add scripts

getHardpoint() is used by ??? (Fabebook)

Forced sequential

document.write to perform the sequential loads and redirectors.

Ad network and inventory.

This won't be solved without involvement from the Ad network. The business requirements would need to be reviewed to determine how those businesses are run.

Facebook has the benefit running internally.

Frag Tag

Browser Disk cache

Lack of progressive rendering

What is the amount of rendring provided during the load of the page.

Be most concerned with JavaScript

It blocks; look at the parallel options.

Split the JavaScript

Performance Redesigns

http://labjs.com/

All JavaScript Beutified

Browers Scope for Usability Testing

What are the performance impacts from Facebook Widgets

Tasks

Message the YSlow! Beautified JavaScript view
Look at HAR for exporting
Use videos showing progressive enhancements and rendering

High Performance jQuery Apr. 24 2010, 12:00 PM

http://speakerrate.com/talks/2964-high-performance-jquery http://uk.linkedin.com/pub/robert-duffy/3/315/247

Another origin; review of client technologies.

Look at the initial object container for the plugin that needs to be applied against the page

What is the profiling and timing for the plugin

When does jQuery do more than we need

Cases where binding accumulates on objects.

When are we not cleaning up the work

Example was for DOM elements that are no longer being used.

CSS vs. .show() & hide()   css

Is this always the case that we don't want to use show() and hide().

Why is show and hide so expensive?

.each() vs. for

Cache the DOM selectors for common items   todo

Structure

Create the module

$(function() {

var

})

Set up the Object

The Microsoft & jQuery Story and the New Templating Plugin Apr. 24 2010, 1:45 PM

http://speakerrate.com/talks/3007-the-microsoft-jquery-story-and-the-new-templating-plugin http://blogs.technet.com/james/

Didn't attend.

Alternative: High Performance JavaScript

http://speakerrate.com/talks/2966-high-performance-javascript http://www.nczonline.net/

Audit reflow activity

Trace all reflows

Don't do offset calculations

If you need offset calculations do them early

Use DOMFramement rather than in DOM manipulations

Consider using detact() before working on the DOM

Deeper the prototype chain the more expensive the lookup

Deeper the scope chain the more expensive the lookup

Create clean presentation process

Simple, humorous introduction
Walk the points
Repeat all core points

Split intensive looks with setTimeOut(myFuncFrag, 50)

How To Manage Large Applications with jQuery Apr. 24 2010, 3:00 PM

http://speakerrate.com/talks/2967-how-to-manage-large-applications-with-jquery

Alternative: Learning From the Best jQuery Plugins

http://speakerrate.com/talks/2968-learning-from-the-best-jquery-plugins http://marcgrabanski.com/

Reviewed over 1000 plugins.

Tried to review items recommended online and Twitter.

Examples

BBQ
ColorBox

Provides a fair number of poptions.

DatePicker
Flip!
Form

Notes that the key feature is AJAX file upload.

Flot
jCarousel
NoSWFUpload
Uploadify
Validation
Tooltip
Accordian
SWFObject

Best Practices

Make demos available

Make a huge list of demos available to show how all functionality is available .

Make sure the options are available
Explore the feature area rather than assuming
Weight new features against complexity of the API

Object Oriented jQuery with MooTools Apr. 24 2010, 3:45 PM

http://ryanflorence.com/mootools-jquery/slides/

$(document).ready balloons

Can't reuse

Need to have stateful objects

Quickly switch background: command + option + control + 8

Use mootools for core object function

Need to have something like the review against the best practices.

Theis creates the constructors nand the instanaces that are needed. The consturctor tfor this seems ood.

The only thing in mootools core only have class functionality.

Extends: Would need to find out what the prototype exists for "Class"

Extends: How to implement static variables

How much of this would need to be rolled with subclass deletes

jQuery UI Fundamentals Apr. 24 2010, 4:30 PM

Special Events: Beyond Custom Events Apr. 24 2010, 5:15 PM

Automated UI testing with jQuery Apr. 25 2010, 10:00 AM

jQuery UI Widget Factory Apr. 25 2010, 11:00 AM

Designing Interactions with jQuery Apr. 25 2010, 11:45 AM

Inside ThemeRoller 2.0: Refactoring for Speed Apr. 25 2010, 1:15 PM

Fast, modular code with jQuery and RequireJS Apr. 25 2010, 2:00 PM

Organizing Your Code with Testable jQuery Plugins Apr. 25 2010, 2:45 PM

Building a game engine with jQuery Apr. 25 2010, 3:30 PM

FireQuery

http://firequery.binaryage.com/

FireQuery provides plugin support for jQuery Lint

http://james.padolsey.com/javascript/jquery-lint/

Lin

YSlow! shows All JS Beautified

It didn't look like many people in the audience were aware of this new new that should move the manual process of something like

js beautify-cl.js http://s.cmcdn.com/graphics/js/lib/generic.js

Firebug > YSlow > Tools > All JS Beautified Show all JavaScript code in this document in an easy to read format

Aggregation of YSlow! and Page Speed reports

http://www.sergeychernyshev.com/blog/automating-page-speed-and-yslow-monitoring/

I'm still working on the implementation of ShowSlow against prototype02 but as a temporary aggregation I'm using the following user set properties in about:config in Firefox:

extensions.PageSpeed.beacon.fullresults.url;http://jwalsh.corp.sea1.cmates.com/rx extensions.PageSpeed.beacon.minimal.url;http://jwalsh.corp.sea1.cmates.com/rx extensions.yslow.beaconUrl;http://jwalsh.corp.sea1.cmates.com/rx extensions.yslow.optinBeacon;true

Configuration is noted in

http://developer.yahoo.com/yslow/help/beacons.html

Alternatives:

24mar2009.xls

This mirrors some of the work done for web page http://xfiles/display/area51/PagetestPlugin

WebPagetest now shows rendering time video

The public version of page http://sourceforge.net/apps/mediawiki/pagetest/index.php?title=Main_Page

Author: Jason Walsh

j@wal.sh

Last Updated: 2025-07-30 13:45:27

build: 2025-12-23 09:11 | sha: a10ddd7