layervault/jquery.haircut.js — pull request #1 by kellysutton (2012-08-03 21:24:47+00:00)
Title: Optimizations

Here's what's new and a few tips:

1. document.createElement()

In general, `document.createElement()` is faster than its jQuery counterpart, but only when you don't keep initializing its jQuery object. Thus,

```javascript
var div = document.createElement('div');

$(div).css(...);
$(div).html(...);
```

Becomes:

```javascript
var $div = $('

');

$div.css(...);
$div.html(...);
```

2. I rolled in style and text declarations when we are deep inside of a loop:

Old:

```javascript
var $div = $('

');

$div.css({ display: 'inline'});
$div.html("… ");
```
New:
```javascript
var $div = $('

…

');
```

Usually, I'd advocate for clarity but in this case, this made a huge help in performance.

3. When having declaring more than one `var`, indent properly:

This:
```javascript
var
one = 1,
two = 2;
```

Not:
```javascript
var one = 1,
two = 2;
```

4. Chain calls to data(). Example:

```javascript
$e.data("placement", opts.placement)
.data('jitterPadding', opts.jitterPadding)
.data('scrollTimeout', opts.scrollTimeout)
.data("stringWidth", getStringWidth($e))
.data("leftmostPos", getLeftmostCharPos($e))
.data("abbrLeftPos", $e.find('abbr').position().left)
.data("display", $e.find('abbr').css('display'));
```

5. Minimize the number of times you access `.data()`

If you call `.data()` more than once in the method, store the value in variable:

```javascript
var dataValue = $e.data('value');

if (dataValue) { ... }

alert(dataValue);
```

All in all, pretty good.