Question

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

这个函数非常基本，但是当窗口调整大小时我注意到了很大的“绘制”延迟。在JS小提琴中，页面上没有其他元素或其他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);
}

Answer 2

您可以使用视口单元通过纯CSS解决此问题。

.resize {
    width: 100vw;
}

您可以查看支持here ..

Answer 3

你可以添加

.resize {
    width: 100%;
    height: 100%;
}

窗口更改时自动调整元素大小（正确）

3 个答案: