jQuery MatchHeight Leistung

Question

Ich benutze jQuery matchHeight. Es wird verwendet, um alle Elemente in einer Reihe auf die gleiche Höhe zu bringen.

Ich habe eine Seite mit vielen Elementen und es ist sehr langsam zu laden und auch wenn Sie die Größe des Browsers ändern (die fireMatch-Update) müssen Sie das Ende der Funktion warten.

Here können Sie ein Beispiel finden (öffnen Sie es im Vollbildmodus).

Wie man sehen kann ich schließen Bootstrap (Css auf und JScript am Ende der Seite), jQuery, das Plugin MatchHeight und in meinem script.js ich initialisieren es mit diesem Code:

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

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

}); 

Die Seite enthalten viele Elemente mit der Klasse "col-eq-height", wo ich die MatchHeight-Funktionalität anwende.

Wie kann ich die Leistung dieses Plugins erhöhen?

Zum Beispiel die Anwendung der MatchHeight nur für die Zeigeelemente (basierend auf Scroll-Position) und nicht für alle Elemente in jedem Browser Fenster Größe ändern.

Dank und sorry für mein Englisch

Answer 1

HAFTUNGSAUSSCHLUSS: Das ist so ziemlich eine Nicht-Antwort, weil Sie gefragt haben, was ich ziemlich viel würde eine nicht-Frage prüfen. Niemand wird so einen umfangreichen Code für dich schreiben, vor allem nicht mit einer so willkürlichen Frage wie "Kannst du das schneller machen?". Sie haben auch keine Versuche unternommen, was Sie versucht haben zu tun.

Ehrlich gesagt, im Grunde kann alles seine Leistung erhöht haben. Wenn Sie jemanden bitten, etwas zu testen und zu entwickeln, das für Ihren speziellen Anwendungsfall schnell ist, dann sollten Sie Ihr Bankguthaben überprüfen und sich einen Fachmann anstellen. Das kann eine sehr anspruchsvolle Aufgabe sein, je nachdem, was "schnell" für Sie bedeutet. Here's eine Liste der Grundlagen zur Optimierung von JavaScript.

Auch für die Liebe Gottes könnten Sie bitte Ihre Fragen genauer sein als

, wo ich die matchHeight Funktionalität anwenden.

Das hilft den Leuten nicht zu verstehen, was Sie erreichen wollen. Was ist der Kontext, d. H. Welche Art von Seite entwerfen Sie hier? Vielleicht wäre die Frage dann nicht "verbessere die Leistung des Plugins", sondern stattdessen "welche anderen Designs/Methoden des Designs kann ich verwenden, die nicht so massive Leistungseinbußen haben?".

Wenn Sie eine Liste der angezeigten Elemente möchten und es gibt Hunderte, warum nicht paginieren sie, wie Google tut? Oder eine unendliche Schriftrolle?

Auch, wenn es Element Positionierung ist, warum nicht versuchen, genau zu berechnen, welche Art von Layout zuerst, dann verwenden Sie CSS? Ich musste nie jQuery für nicht-animierten HTML-Design verwenden, und ich verwende zunehmend auch CSS für Animationen. Vielleicht sollten Sie genau überlegen, welche Art von Layout Sie suchen und versuchen, CSS zuerst zu verwenden. JavaScript wird CPU-teuer sein, wenn Sie mit dem Styling von Tausenden von Elementen spielen.

EDIT: Richtet sich nach den Kommentaren, wenn die Frage nach umformuliert wird: „Wie kann ich die untergeordneten Elemente einer Reihe machen die gleiche Höhe wie die Reihe“, könnten wir folgendes tun:

.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; 
 
}

<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>

Hier können Sie sehen, dass die Elemente sind alle die gleiche Höhe, ohne flexbox zu benötigen (was gelegentlich noch nicht unterstützt wird). Ich hoffe, das hilft.