Question

我使用jQuery matchHeight。它用于使一行中的所有元素具有相同的高度。

我有一个包含大量元素的页面，加载速度非常慢，如果你调整浏览器的大小（激活matchHeight更新），你必须等待函数的完成。

Here你可以找到一个例子（全屏打开）。

正如您所看到的，我在本页末尾包含了Bootstrap（Css on和jScript），jQuery，插件MatchHeight和我的script.js，我用这段代码初始化它：

jQuery( document ).ready( function( $ ) {

  // matchHeight
  $(function() {
      $('.col-eq-height').matchHeight({
          property: 'min-height'
      });
  });

});

该页面包含许多具有类“col-eq-height”的元素，其中我应用了matchHeight功能。

如何提高此插件的性能？

例如，仅对显示元素应用matchHeight（基于滚动位置），而不是为每个浏览器窗口上的所有元素调整大小。

谢谢，对不起我的英文

Answer 1

免责声明：这几乎不是一个答案，因为您已经问过我几乎认为什么是非问题。没有人会为你编写这样的大量代码，特别是没有像＃34这样的任意问题;你能不能更快地做到这一点？＆＃34;。你也没有尝试过你曾经尝试过的事情。

老实说，基本上任何东西都可以增加它的性能。如果您要求某人测试和开发针对您的特定用例的快速内容，那么您最好检查一下您的银行余额并雇佣一名专业人士。这可能是一项非常具有挑战性的任务，取决于＆＃34; fast＆＃34;对你而言意味着Here's有关优化JavaScript的基础知识列表。

另外，对于上帝的爱，请问你在问题上要比

更具体

我应用matchHeight功能。

这并不能帮助人们理解你正在努力实现的目标。什么是上下文，即你在这里设计什么样的页面？也许那时问题不会是＆＃34;改善插件的性能＆＃34;，而是，＆＃34;我可以使用哪些其他设计/设计方法，不具备如此巨大的性能处罚＆＃34;？

如果您想要显示的商品列表并且数百，为什么不像谷歌一样对它们进行分页？还是无限滚动？

此外，如果它之后的元素定位，为什么不尝试先计算出你想要的布局类型，然后使用CSS呢？我从来没有将jQuery用于非动画HTML设计，而且我也越来越多地使用CSS制作动画。也许您应该重新考虑您所处的布局类型，并首先尝试使用CSS。如果你正在玩数以千计的元素，那么JavaScript的价格就会高昂。样式。

编辑：根据评论，如果问题被重新描述为＆＃34;如何使行的子元素与行＆＃34;的高度相同，我们可以做以下内容：

＆＃13;

.container {
    display: table;
}
.child {
    width: 30px;
    background-color: red;
    display: table-cell;
    vertical-align: top;
}

.content {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: blue;
}

＆＃13;

<div class="container">
    <div class="child">
        a<br />a<br />a
    </div>
    <div class="child">
        a<br />a<br />a<br />a<br />a<br />a<br />a
    </div>
    <div class="child">
        <div class="content">
            a<br />a<br />a
        </div>
    </div>
</div>

＆＃13;

在这里，您可以看到元素的高度都相同，而不需要flexbox（有时仍然不支持）。希望有所帮助。

jQuery MatchHeight性能

1 个答案: