hassankhan/emojify.js — pull request #21 by suprememoocow (2014-02-03 18:12:37+00:00)
Title: Performance improvements

Hello,

This pull-request contains a large number of changes to emojify.js. The way that it works is quite different from the original product, so there's no hard feelings if you choose to reject the pull-request outright. However, even if you decide against using it, there may be parts that you wish to use.

### How is this branch different from the original?

1. **The emoji are kept in image (png) files, rather than data urls in the css**
* Keeping the emoji in css means that every time a page is loaded, every single emoji that may be included needs to be downloaded, even if the page only includes one, or no, emoji.
* We have found that in most circumstances, only a small subset of emoji are used.
* While this means that more network requests are made, they are tiny and also happen post-pageload, so the user does not experience any delays to seeing the page.
2. **The DOM tree is recursed exactly once, no matter how many emoji are parsed in the set**
* The original scans the DOM once for every emoji that it's matching on, this version scans the DOM exactly once. This is a huge performance improvement on it's own.
* In additional, a DOMWalker object is used to find text nodes. In most browsers, is much faster than manually iterating through the DOM.
3. **All the emoji are always enabled - let people use whatever emoji they want**
* Since there is no download penalty and no performance penalty for including all the emoji, we might as well use them all.
4. **Some validation rules have been added**
* Potential emoji in the middle of words are not matched. This means that `http://xyz.com` doesn't match an emoji on the `:/`
* Emoji in `pre` and `code` and some other elements are ignored.
5. **The `emojify.js` file is much smaller**
* The original is 35Kb, this one is 10Kb and doesn't need to download megabytes of additional css files at load time.

### How much faster is this?

On https://gitter.im, we run emojify.js very frequently - as new chat messages arrive on the client. We needed it to be fast and small with a small overhead.

We haven't done many scientific tests, but on my desktop running Chrome 32, my emojify.js script runs in about 50ms. The original takes about 500ms. When using the new version, page load definitely *feels* faster too, from a user point of view.

Thanks for putting together a great library!