Question

我正在创建2个三角形（使用border- hack ），垂直填充页面（因此两个三角形都是页面高度的50％）。我做得很好。

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

目前，三角形计算出体宽，减去.main宽度，然后除以2，这样三角形的边缘就会触及.main div的边。
它还可以计算窗口的高度（$(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/

更多优化：

限制resize事件（无论如何，它在OS /浏览器中都是图标）
将其解耦并使用requestAnimationFrame

调整大小时边框大小变化缓慢（）

1 个答案: