I'm always on the prowl for new tools and signals for analyzing and improving frontend performance. When Mozilla announced the new MozAfterPaint event in Firefox nightlies, I got excited and got to work.

John Resig posted a bookmarklet for viewing MozAfterPaint events, but I'm primarily interested in paint events that fire before onload(), so a bookmarklet isn't ideal. I stayed up late last night and created a simple Firebug extension for capturing and viewing these events. To use:

• Get a recent nightly build of Firefox
• Ensure you're using Firebug 1.3
• Install the extension

After restarting, you'll have a "Paints" tab in Firebug. Mouse over the events to see the clip areas highlighted.

Thanks to Mozilla for making MozAfterPaint available! I've only started digging in and I'll try to follow up with some observations. In the meantime, post away, I'm interested in yours.

Comments (0) | Tags: performance

I've got a whole bunch of stuff to share and I'm super busy so I'll share bits whenever I can post. This little self-organizing graph project now has a name, JSViz, and a whole new design that I hope will satisfy the OO geeks and new-to-scripting crowds alike. I'm sharing code in this post so you can get a sneak peek. I'll post about the overall design and usage details later. Let's talk about throttles!

New Refresh Throttle for Tree and Force Directed Graphs

No more CPU red-lining while your graph is in a settled state! I've added some rudimentary refresh throttling to the graph engines. In short, the refresh rate is slowed as entropy in the graph decreases. Below are some examples (and some geeky discussion):

Continue reading "Sneak Peek at JSViz 0.2 :: Part 1: Refresh Throttle" »

| Tags: force directed jsviz performance projects tree graphs visual wordnet

This weekend I finally got a chance to go over the wishlist that has been accumulating for the Force Directed Graph libraries I posted about earlier this month. Nearly everyone has asked that I do something about the performance problems, and I have some good news. If you're new to this discussion, check out the earlier postings and comments:

Force Directed Graphs in Javascript?
First Whack at JavaScript Visual Wordnet
Using Force Directed Graphs in Your App

First, a recap

Let's talk briefly about why Force Directed Graph algorithms don't scale very well.

Each node in a graph behaves like a "particle" in space. Some particles have attractive forces between them. These are usually represented as edges on the graph. Every particle has repulsive forces between itself and every other particle. These are the forces that make nodes "avoid" each other while the graph organizes. The combination of these forces on a given node help dictate a new position for the node. Any time a node has changed position, the forces it places on all of the other nodes have changed, so we have to reculate their positions.

Continue reading "Force Directed Graphs, Performance, and Trees?" »

Comments (16) | Tags: force directed performance projects tree graphs visual wordnet