Tip: Improve resizing performance

Wednesday, September 24, 2008 at 8:08 AM



If your gadget has lots of visual elements, resizing might get very slow. This happens because onsize is triggered often when the user resizes your gadget. Use code like this to improve the performance of resizing:
var resizeTimeout = null;

function view_onSize() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(resizeGadget, 10);
}

function resizeGadget() {
debug.info('Now I really resize everything');
... code to resize and relayout the gadget's contents ...
}
The resizeGadget() function is called only when the user is either finished with resizing or doesn't resize for a few milliseconds. The result is fewer redraws of your gadget and a smoother resizing experience for your user.

Have a tip you'd like to share? Send it to gd-developer AT google DOT com. To see all tips, choose the Tips label.

2 comments:

Stefan said...

That's pretty clever.

Teo said...

Yeah, i also remember your tip about not blocking the sidebar; setTimeout can be a really neat thing.