javascript - 在窗口更改时自动调整元素大小(正确)

Question

我正在制作一个 JavaScript 函数，当调整窗口大小时，它会自动将 div 的大小调整为与窗口相同的宽度/高度。

该功能非常基本，但我注意到在调整窗口大小时出现明显的“绘制”滞后。在 JS fiddle 中，页面上没有其他元素或其他 JavaScript，性能并不是真正的问题。然而，在实际元素中，延迟真的很烦人，我想解决这个问题。

我已经迭代了几种不同的技术，但并没有真正注意到性能有多大提高。我在这里缺少什么吗？必须有一种方法可以在不降低浏览器性能的情况下做到这一点。

这是第一个函数:

1.

window.onresize = function (event) {
    var resize = document.querySelector(".resize");
    var w = window.innerWidth;
    resize.style.width = w + "px";
    resize.style.height = w + "px";
};

这几乎是所有性能中最差的 - http://jsfiddle.net/SY5Tn/

2.

function resizer(e,w) {
    e.style.width = w + "px";
    e.style.height = w + "px";
}

window.onresize = setInterval(function() {
    var e = document.querySelector(".resize");
    var w = window.innerWidth;
    resizer(e,w);
    }, 100);

这有一点更好的表现。虽然差别不大http://jsfiddle.net/SY5Tn/2/

3.

function resizer() {
var resizeLoop;

    resizeLoop = setInterval(function() {
            var e = document.querySelector(".resize");
            var w = window.innerWidth;
            e.style.width = w + "px";
            e.style.height = w + "px";
        }, 100);

    function clear() {
        clearInterval(resizeLoop);
    }

   window.onresize = function () {
   resizeLoop();
   }
   document.addEventListener('mouseup', function() {
   clear();
   document.removeEvenetListener('mouseup');
   });

}
resizer();

这是我能想到的最好的办法，尽管我仍然收到错误“数字不是函数”

http://jsfiddle.net/SY5Tn/3/

有更好的方法吗？ (请不要使用 Jquery)；

P.S - 我不能在 Code Review 上发布这个，因为那里只有 1 个代表点，所以它不允许我发布多个链接。

Answer 1

试试这个:

    resizeLoop = function(){
                setInterval(function() {
                var e = document.querySelector(".resize");
                var w = window.innerWidth;
                e.style.width = w + "px";
                e.style.height = w + "px";
            }, 100);
}