Navigator Sprite Support Explained

[wallymarx]

Navigator Sprite Support is a new feature introduced in the Spring 2010 Stable 2 release. The following information was created by Pat Casey, Service-now.com Principal Architect:

Overview

Modern web pages are made up of a variety of different content types. Service-now.com's web pages, for example, contain:

•An HTML document describing the structure and page contents
•One or more CSS files describing formatting
•One or more JAVASCRIPT files containing JavaScript
•Many image files for on-screen "art"

Every time any given web page is loaded, the browser collects a list of all the files it needs to render the page. Then, for each file that it hasn't previously loaded, it performs a separate trip back to the server to retrieve the file.

Modern web applications and browsers use caching extensively, such that it very likely on any given page load, that the only file that has to come from the server will be the HTML page itself. None of the images, CSS, or JS files will have to be downloaded. However, the first time a user visits the instance, or the first visit after a browser cache flush, all of these files have to be downloaded.

For example, visiting the http://demo.service-now.com/ demo instance results in over 250 unique image files being downloaded from the web server, one at a time.

For users in the United States (and therefore close to the application servers), downloading 250 images may take 10 or 15 seconds, but users in Australia may have an initial download time that can exceed 60 seconds in some cases.

Using Navigator Sprite Support

With the Spring 2010 Stable 2 release of the product, the instance now uses CSS sprites to replace the images in the left navigation menu. This reduces the number of images loaded on the first visit by a factor of six. The output is the same, but the overall page load time is significantly reduced.

The Application Navigator has a total of approximately 200 images on it. Each image is 16 X 16 and before Spring 2010 Stable 2 they were downloaded one at a time.

On the other hand, a sprite is composed of 200 images that are lined up left to right to make a single image that is 16 pixels tall and 3200 pixels wide. To display a particular icon, the instance tells the browser to display a 16 x 16 slice of the sprite at the icon's location, starting at a particular location.

There is no action needed to enable or set up Navigator Sprite Support.


Disabling Navigator Sprite Support

To disable Navigator Sprite Support, navigate to '''System Properties > UI Properties''' and uncheck the ''Use sprites for navigator images'' property.


Internet Explorer Notes

The sprite file is delivered as a particular type of graphic called a PNG, or Portable Network Graphic. Modern browsers handle PNGs well because they can contain all the possible colors across all 200 navigator images. PNGs are not well supported by IE6, however. Specifically, any parts of an image declared as ''transparent'' on a PNG are rendered as dull grey in IE 6.

To avoid displaying ugly looking dull grey boxes around our icons on IE 6, the instance automatically uses a special version of the sprite file for IE 6 which uses the color white in place of any transparent parts of an image. Since the out of box navigator background is white, this means that everything looks correct.

If, however, the instance is no longer using the out-of-box CSS (say via a theme or the Content Management plugin) such that the background on the navigator is no longer white, '''and''' IE 6 is being supported, then it may be preferable to disable the sprites in order to avoid certain unfortunately display artifacts.