Tag Archives: site performance

WebGL have and have nots

WebGl is supported in the current beta versions of Chrome and Firefox. Most people who want to get started using webgl can. learningwebgl.com has a step by step process.

Chrome’s beta version installs in a sub directory and does not change or use your current non beta version of chrome. Firefox or minefield from the nightly builds does; although it is not impossible to setup a portable installation in a sub directory or usb stick; But, doing so requires additional steps.

Webgl uses opengl 2.0 which is not the newest version – it is supported by the vast majority of systems. Almost any system which is used for video games has opengl 2.0 or better.

The computers that do not are the ones based on a Intel video driver. ATI does have updates for all of their cards but! But many older laptops use a OEM driver and ATI chipset – those people need to turn to the laptop maker for driver updates.

For firefox there is an alternative to opengl 2.0 installed. The alternative is a software rendering using OSMESA32.DLL.

Software rendering allows webgl to work. However you do not get the same performance increase that comes from a direct interface with the graphics processor unit on the video card.


Reducing CPU time when using javascript

When Javascript runs with the browsers widely used today it is given all of the resources “CPU” of the browser; with today’s browsers on today’s computers that means it can get a lot done.

But! there is a problem; the browser is not responsive while the script is running. If the javascript is running for 1/30 of a second, the frame rate of video, this is not noticeable. It becomes a problem when the javascript is looping for a noticeable amount of time.

The solution is to time slice the browser resources with the javascript. In short create the loop differently … here is an example


// Set animation time in milli seconds.

var usetime = 10000;

// get start time

var d = new Date();

var start = d.getTime();

var now = d.getTime();

var done = start + usetime;

var i=0;

function loop()



var d = new Date();

var now = d.getTime();

if (now < done)


setTimeout(loop, 25); // limit to 40 fps using rest time if function uses 25 milli seconds per iteration then throughput is 20fps

} else {

document.write(i/10 + ” fps”);






Keyboard, mouse, etc, are cached so browser remains responsive.

CSS gradients vs images and vs SVG

CSS gradients work in IE based browsers, Webkit (chrome, Apple eg Safarie, Ipod, Iphone), and Mozilla (Firefox) … however they do require different style tags. (see below).

When compared to images: CSS gradients give a little bit of performance increase. An image used for a background gradient is normally very small around 5,000 bytes. Unless there are over 10 gradients being used these images are not going to make much of an impact. These images are downloaded using the same connection that downloaded the HTML so we are only talking about bandwidth savings when the pages are designed correctly.

Animation is a game changer. With jQuery these divides can be animated and the background color itself can be changed / animated.

HTML5 SVG blows away jQuery in its ability to animate graphics … giving CSS gradients a short window of opportunity. SVG is a graphics language with more years in the making than jQuery.

Here is an example of the CSS markup for gradients

.mygradient {
background: -webkit-gradient(linear, left top, left bottom, from(#008), to(#fff));
background: -moz-linear-gradient(top, #008, #fff);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000080, endColorstr=#FFFFFF);

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#000080, endColorstr=#FFFFFF)”;


Yslow pluginweb site performance for testing.

A few tests for web site performance issues would be:

yslow firefox plugin
and another online test

As a rule of thumb, flash runs slower.