Posts Tagged ‘DOM’

Huge Performance Improvements In Latest Translate This Button

Huge Performance Improvements In Latest Translate This Button

A few days ago I released a new version of the Translate This Button, a free JavaScript translation widget. Of the sites I tested, the translation operation now runs an average of 70% faster. This performance increase adds to several layers of speed improvements made in previous versions.

Additionally, this release includes other enhancements, such as a reduction in HTTP requests and the preservation of DOM-based JavaScript events. Let’s walk through the changes I made; hopefully some of the optimization techniques can be reused in other projects.

Reducing Calls To The Language API

When a translation occurs, the TranslateThis Button parses the DOM, and passes the data to the Google Language API. Google’s JavaScript API imposes a limit of 500 characters per call, so previously the widget chunked out portions of the DOM that were under this limit, then passed them to Google asynchronously. … Read more…


10 Javascript Performance Boosting Tips from Nicholas Zakas

10 Javascript Performance Boosting Tips from Nicholas Zakas

Nicholas Zakas is a Javascript guru and principle front-end engineer for the Yahoo! homepage. Zakas just announced his new book High Performance JavaScript, which you should order today.

Zakas is pretty much the man when it comes to Javascript performance, and in June he gave a Google Tech Talk entitled Speed Up Your Javascript.

While Javascript optimization is by no means black-and-white, here’s a list of 10 tips from Nicholas’ talk that will help you write Javascript that really flies.

1. Define local variables

When a variable is referenced, Javascript hunts it down by looping through the different members of the scope chain. This scope chain is the set of variables available within the current scope, and across all major browsers it has at least two items: a set of local variables and a set of global variables.

Simply put, the deeper the engine has to dig into this … Read more…


Appending Style Nodes with Javascript

Appending Style Nodes with Javascript

In Javascript it often makes sense to attach a stylesheet rather than style a bunch of individual attributes. Appending a stylesheet to the DOM has a number of advantages:

  • Stylesheets can be easier to work with than Javascript—it’s just more natural to use CSS syntax for styling.
  • It’s nice to avoid the cross-browser headaches associated with Javascript styling. Compare CSS’s simple float: left to Javascript’s style.styleFloat = ‘left’ and style.cssFloat = ‘left’.
  • Appending a stylesheet is better for performance when styling 15 or more elements.
  • CSS allows you to leverage pseudo-classes and define styles with the simple a:hover selector instead of both onmouseover and onmouseout event listeners.

There are a couple ways to append a stylesheet. Although it’s usually best to attach an external stylesheet, there are times when you need to build a stylesheet on the fly with Javascript. Let’s walk through the code we’ll need to append … Read more…