Gibt es eine Möglichkeit, diese Lösung für eine case-insensitive jQuery :contains-Selektor zu beschleunigen?

Question

Ich fand diese Lösung für ein jQuery, das Groß- und Kleinschreibung nicht berücksichtigt :contains Selektor auf StackOverflow. Es funktioniert großartig, aber es geht auf Kosten der Leistung. Findet noch jemand, dass diese Lösung ein bisschen langsam ist?

Ich benutze die :contains Selektor, um eine Tabelle zu durchsuchen. Der Benutzer gibt einen Suchbegriff in ein Textfeld ein. Bei jedem Tastendruck wird die Tabelle nach dieser Zeichenfolge durchsucht, wobei nur die Zeilen angezeigt werden, die diese Zeichenfolge über den :contains Selektor. Vor der Implementierung der Lösung zur Unterscheidung von Groß- und Kleinschreibung war diese Suche schnell und zügig. Jetzt, mit dieser Lösung, bleibt sie nach jedem Tastendruck für einen kurzen Moment stehen.

Gibt es Ideen, wie diese Lösung beschleunigt werden könnte?

Answer 1

Ich habe eine andere Lösung für die Suche ohne Berücksichtigung der Groß-/Kleinschreibung bei Google gefunden (siehe Eric Phan ), die sich leicht von der ursprünglich verwendeten unterscheidet.

Original:

return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;

EricPhan:

return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())>=0;

Wenn man die beiden vergleicht, kann man sehen, dass Eric Phans Lösung direkt auf die DOM-Attribute zugreift und die toLowerCase() anstelle von toUpperCase() . Letzteres spielt eigentlich keine Rolle, aber ersteres hat die Leistung der Suche ohne Berücksichtigung der Groß- und Kleinschreibung wirklich verbessert. Durch die Änderung der ursprünglichen Lösung zur Verwendung von (a.textContent || a.innerText || "") anstelle von jQuery(a).text() hat den Unterschied ausgemacht!

Jetzt bin ich ein bisschen neugierig, also habe ich eine Folgefrage: Was hat es auf sich mit jQuery.text() ? Warum ist es so langsam? Ich habe meine Vermutungen, aber ich würde gerne hören, was die Experten zu sagen haben.

Abschließend möchte ich mich bei allen bedanken, die geantwortet haben. Ich weiß Ihre Hilfe zu schätzen =)

Answer 2

Sie könnten versuchen, den Selektor nur einmal zu überprüfen, nachdem der Benutzer für eine bestimmte Zeit mit dem Tippen aufgehört hat, und nicht bei jedem Tastendruck.

Ein Beispiel für eine einfache Implementierung:

Verwendung:

$("#textboxId").keyup(function () {
  typewatch(function () {
    // executed only 500 ms after the user stopped typing.
  }, 500);

Umsetzung:

var typewatch = function(){
    var timer = 0;  // store the timer id
    return function(callback, ms){
        clearTimeout (timer);  // if the function is called before the timeout
        timer = setTimeout(callback, ms); // clear the timer and start it over
    }  
}();

Answer 3

Sie könnten versuchen, nicht nach jedem Tastendruck zu prüfen, sondern vielleicht eine Sekunde nach dem letzten Tastendruck. Auf diese Weise prüfen Sie nicht ständig, während der Benutzer tippt, sondern eher, wenn der Benutzer fertig ist oder eine Pause macht.

Answer 4

Ich habe eine Anschlussfrage: Was hat es mit die Sache mit jQuery.text()? Warum ist es so langsam?

Ich vermute, dass die Langsamkeit auf die $(a) (Konvertierung des DOM-Elements in ein jQuery-Objekt) und nicht die .text() .

Answer 5

Zusätzlich zu dem, was Jason gesagt hat, können Sie versuchen, mit dieses Plugin um dies zu erreichen.