Posible duplicado:
¿Cómo hacer que este JavaScript sea mucho más rápido?

Estoy tratando de crear un "selector de elementos" en jQuery, como lo ha hecho Firebug. Básicamente, quiero resaltar el elemento debajo del mouse del usuario. Esto es lo que tengo hasta ahora, pero no funciona muy bien:

$('*').mouseover(function (event) {
    var $this = $(this);
    $div.offset($this.offset()).width($this.width()).height($this.height());
    return false;
});


var $div = $('<div>')
    .css({ 'background-color': 'rgba(255,0,0,.5)', 'position': 'absolute', 'z-index': '65535' })
    .appendTo('body');

Básicamente, estoy inyectando un div en el DOM que tiene un fondo semitransparente. Luego escucho el evento mouseover en cada elemento, luego muevo el div para que cubra ese elemento.

En este momento, esto solo hace que toda la página se vuelva roja tan pronto como mueva el mouse sobre la página. ¿Cómo puedo hacer que esto funcione mejor?

Editar: Estoy bastante seguro de que el problema es que tan pronto como mi mouse toca la página, el cuerpo se selecciona, y luego, cuando muevo mi mouse, ninguno de los momentos pasa por el resaltador porque está sobre todo.

Firebug

Excavando a través del código fuente de Firebug, encontré esto:

drawBoxModel: function(el)
{
    // avoid error when the element is not attached a document
    if (!el || !el.parentNode)
        return;

    var box = Firebug.browser.getElementBox(el);

    var windowSize = Firebug.browser.getWindowSize();
    var scrollPosition = Firebug.browser.getWindowScrollPosition();

    // element may be occluded by the chrome, when in frame mode
    var offsetHeight = Firebug.chrome.type == "frame" ? FirebugChrome.height : 0;

    // if element box is not inside the viewport, don't draw the box model
    if (box.top > scrollPosition.top + windowSize.height - offsetHeight ||
        box.left > scrollPosition.left + windowSize.width ||
        scrollPosition.top > box.top + box.height ||
        scrollPosition.left > box.left + box.width )
        return;

    var top = box.top;
    var left = box.left;
    var height = box.height;
    var width = box.width;

    var margin = Firebug.browser.getMeasurementBox(el, "margin");
    var padding = Firebug.browser.getMeasurementBox(el, "padding");
    var border = Firebug.browser.getMeasurementBox(el, "border");

    boxModelStyle.top = top - margin.top + "px";
    boxModelStyle.left = left - margin.left + "px";
    boxModelStyle.height = height + margin.top + margin.bottom + "px";
    boxModelStyle.width = width + margin.left + margin.right + "px";

    boxBorderStyle.top = margin.top + "px";
    boxBorderStyle.left = margin.left + "px";
    boxBorderStyle.height = height + "px";
    boxBorderStyle.width = width + "px";

    boxPaddingStyle.top = margin.top + border.top + "px";
    boxPaddingStyle.left = margin.left + border.left + "px";
    boxPaddingStyle.height = height - border.top - border.bottom + "px";
    boxPaddingStyle.width = width - border.left - border.right + "px";

    boxContentStyle.top = margin.top + border.top + padding.top + "px";
    boxContentStyle.left = margin.left + border.left + padding.left + "px";
    boxContentStyle.height = height - border.top - padding.top - padding.bottom - border.bottom + "px";
    boxContentStyle.width = width - border.left - padding.left - padding.right - border.right + "px";

    if (!boxModelVisible) this.showBoxModel();
},

hideBoxModel: function()
{
    if (!boxModelVisible) return;

    offlineFragment.appendChild(boxModel);
    boxModelVisible = false;
},

showBoxModel: function()
{
    if (boxModelVisible) return;

    if (outlineVisible) this.hideOutline();

    Firebug.browser.document.getElementsByTagName("body")[0].appendChild(boxModel);
    boxModelVisible = true;
}

Parece que están usando un div + css estándar para dibujarlo ... solo tienen que descubrir cómo están manejando los eventos ahora ... (este archivo tiene 28K líneas de largo)

También existe este fragmento, que supongo que recupera el objeto apropiado ... aunque no puedo entender cómo. Están buscando una clase "objectLink-element" ... y no tengo idea de qué es este "repObject".

onMouseMove: function(event)
{
    var target = event.srcElement || event.target;

    var object = getAncestorByClass(target, "objectLink-element");
    object = object ? object.repObject : null;

    if(object && instanceOf(object, "Element") && object.nodeType == 1)
    {
        if(object != lastHighlightedObject)
        {
            Firebug.Inspector.drawBoxModel(object);
            object = lastHighlightedObject;
        }
    }
    else
        Firebug.Inspector.hideBoxModel();

},

Estoy pensando que tal vez cuando se activa el evento mousemove o mouseover para el nodo resaltador, ¿puedo pasarlo de alguna manera? Tal vez al nodo que está cubriendo ...?

Si coloco un elemento invisible sobre cada elemento con un índice z más alto que mi marcador, pero le doy a mi marcador un índice z más alto que los elementos reales ... en teoría, debería funcionar. Los elementos invisibles dispararán el evento del mouse, pero el efecto de resaltado aún se verá como su superposición de los elementos reales.

Sin embargo, esto significa que acabo de duplicar los elementos DOM y que el posicionamiento debe ser correcto.A no ser que ¿tal vez solo "levanto" los elementos que el resaltador está cubriendo actualmente? Pero eso aún podría ser cada elemento>. <¡Alguien que me ayude!