can this be made more performant?

cellUpdateBehavior.js

define(['core', './topics'], function (core, topics) {
    var valueFilter = /\D/g,
        widthClasses = [], i,
        jsLintLintDoesNotLikeLiteralsHere = true,
        updateQueue = [],
        pubsub = core.pubsub,
        updatingInstances = {};

    pubsub.subscribe(topics.pause, function (ev, instanceId) {
        // delete to keep the object small, and keep the lookup time short.
        // delete updatingInstances[instanceId];

        // http://video.ch9.ms/sessions/build/2012/4-000.mp4
        // instead of deleting which will nullify jit compiled objects
        // and cause a re-jit
        updatingInstances[instanceId] = false;
    });

    pubsub.subscribe(topics.resume, function (ev, instanceId) {
        updatingInstances[instanceId] = true;
    });

    for (i = 0; i < 50; i++) {
        switch (jsLintLintDoesNotLikeLiteralsHere) {
            case i < 6 :
                widthClasses[i] = " widthNarrow";
                break;
            case i < 8 :
                widthClasses[i] = " widthMedium";
                break;
            case i < 9 :
                widthClasses[i] = " widthWide";
                break;
            case i > 8 :
                widthClasses[i] = " widthXWide";
                break;
        }
    }

    function renderLoop() {
        var updates = updateQueue.splice(0), update;
        if (updates.length > 0) {
            for (update = updates[0]; updates.length; update = updates.pop()) {
                update.render();
            }
        }

        requestAnimationFrame(renderLoop);
    }

    function update() {
        var target = document.getElementById(this.id),
            parent = !!target ? target.parentNode : null,
            widthClass, val, matches, i, len,
            parentClasses = !!parent ? parent.className : '',
            newClass = (this.backgroundColor + ' fDefault').trim(); //order matters;

        if (this.value === '' && !!target) {
            target.innerHTML = '';
        } else if (!!target) {
            className = target.className.trim();
            target.id = this.id;
            // content hasn't changed.
            if (target.textContent === this.value) {
                return;
            }

            if (!!this.value) {
                val = this.value.replace(valueFilter, '');

                if (val.length < 50) {
                    widthClass = widthClasses[val.length];
                }
            }

            if (!!widthClass && !!parentClasses && parentClasses.indexOf(widthClass) === -1) {
                parent.className += widthClass;
            }

            //keep the old timeouts from removing the styles prematurely:
            if (!!target.timeouts && target.timeouts.length) {
                for (i = 0, len = target.timeouts.length; i < len; i++) {
                    clearTimeout(target.timeouts[i]);
                }
            }


            if (newClass !== className) {
                target.className = newClass;
            }

            target.timeouts = [
                setTimeout(function (el, up) {
                    el.className = up.foregroundColor;
                    el.timeouts.length = 0;
                }, 600, target, this) /* the extra 100 ms keeps the background from syncing with the plot and cause it to blink. */
            ];

            target.innerHTML = this.value;
        }
    }

    renderLoop();

    return function (id, value, instanceId, fgColor, bgColor) {
        updateQueue[updateQueue.length] = {
            id:id,
            value:value,
            render:update,
            instanceId:instanceId,
            foregroundColor:!!fgColor ? 'f' + fgColor.substr(3, 6) : 'fDefault',
            backgroundColor:!!bgColor ? 'b' + fgColor.substr(3, 6) : 'bDefault'
        };
    };
});