jquery - resize() 时边框大小变化缓慢

Question

我正在创建 2 个三角形(使用 border-hack)，它们垂直填充页面(因此两个三角形都是页面高度的 50%)。我已经做得很好了。

但是，当我也尝试让此计算在 window.resize 上运行时，它非常慢。我知道我每次都会计算一些变量，但只是想知道是否有人能想出一种方法来使其更快......
看看我的jsfiddle ，然后调整浏览器窗口的大小。 - 警告 jsFiddle 可能会在一段时间后崩溃......这就是它的糟糕程度。

目前，三角形计算出主体宽度，减去.main宽度，然后除以2，以便三角形的边缘恰好接触.main的一侧> 分区
它还计算出窗口的高度 ($(window).outerHeight();)，然后将其除以 2，以便每个三角形具有窗口高度的 50%。
然后，它还使用此高度，将 top 值应用于第二个三角形，以便它位于页面的后半部分。

我建议查看 jsfiddle 的代码，但也会将其放在这里:

HTML

<div class="triangleWrap">
    <div class="borderTopLeft"></div>
    <div class="borderBottomLeft"></div>
</div>

<div class="main"></div>

JS

$('document').ready(function triangleCalc() {
    var bodyWidth = $('body').width();
    var bodyHeight = $(window).outerHeight();
    var mainWidth = $('.main').width();
    var bodyMinusMain = (bodyWidth - mainWidth) / 2;
    var bodyHeightCalc = bodyHeight / 2;
    $('.borderTopLeft, .borderBottomLeft').css('border-right', bodyMinusMain + 'px solid black');
    $('.borderTopLeft').css('border-bottom', bodyHeightCalc + 'px solid transparent');
    $('.borderBottomLeft').css({
        'border-top': bodyHeightCalc + 'px solid transparent',
        'top': bodyHeightCalc + 'px'
    });
    $(window).resize(triangleCalc);
});​

CSS

.borderTopLeft, .borderBottomLeft{
    width: 0;    
    height: 0;    
    position: absolute;
}
.borderTopLeft{border-top: 0 solid transparent;}
.borderBottomLeft{border-bottom: 0 solid transparent;}
.borderTopLeft{ 
    border-bottom: 500px solid transparent;       
    border-right:438px solid #2C2C2C;
}
.borderBottomLeft{
    border-top: 500px solid transparent;   
    border-right: 600px solid #2C2C2C;
    top: 500px;
}
.main{width:500px;height:400px;background:orange;margin:auto;}

Answer 1

这只是 JavaScript 写得很糟糕。不缓存 DOM 引用是最糟糕的事情。

这样效果更好吗？:http://jsfiddle.net/NpDnu/

更多优化:

• 限制调整大小事件(无论如何，它在操作系统/浏览器中都是一致的)
• 将其解耦并使用 requestAnimationFrame