Optimieren Sie die Leistung des Text-Renderings?

Question

Sagen wir, ich habe einen <p> Tag innerhalb eines <div>, die die folgenden Eigenschaften hat:

div { 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
} 

Wenn die Seite geladen wird, möchte ich Worte der <p> Tag, um das Hinzufügen, bis ich einen Überlauf, wie in Anschlag erkennen, wenn Das erste Wort, das nicht angezeigt wird, wird hinzugefügt.

Ich tue dies mit dem folgenden Code:

var textToRender = "People assume I'm a boiler ready to explode, but I actually have very low blood pressure, which is shocking to people."; 
 
var words = textToRender.split(" "); 
 

 
var div = document.getElementById("mydiv"); 
 
var p = document.getElementById("myp"); 
 

 
var i = 0; 
 
while (p.clientHeight <= div.clientHeight && i<words.length) { 
 
    p.textContent += words[i++] + ' '; 
 
};

div { 
 
    height: 55px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
}

<div id="mydiv"> 
 
    <p id="myp"></p> 
 
</div>

Nun sagen ich tue dies in einem viel größeren Maßstab mit einem größeren div. Machen Sie einen Schritt weiter und sagen Sie, ich muss dies für 50 Divs unterschiedlicher Größe mit unterschiedlichem Text tun. Offensichtlich scheint dies in unseren Augen augenblicklich zu geschehen, in Wirklichkeit muss jedoch jedes Wort einzeln gezogen werden.

Ich möchte herausfinden, wie diese Art von Operation zu optimieren, vorausgesetzt, ich kenne nicht die Zeilenhöhe, Container div Höhe oder Anzahl der Wörter. Meine Frage ist: Wenn ich eine opaque <div> oben auf den Container legen, um diese eine Wortzeichnung abzudecken, dann entferne es, wenn die Funktion einen Überlauf erkannt hat, wird dies die Leistung steigern, weil die tatsächlichen Wörter nicht gezeichnet werden bei jeder Iteration der While-Schleife?

Wenn nicht, gibt es eine ähnliche Taktik, die ich verwenden könnte, um diese Art von Operation zu optimieren?

Answer 1

Versuchen Sie die binäre Suche. Das ist was du willst.

var textToRender = "People assume I'm a boiler ready to explode, but I actually have very low blood pressure, which is shocking to people."; 
 
var words = textToRender.split(" "); 
 

 
var div = document.getElementById("mydiv"); 
 
var p = document.getElementById("myp"); 
 

 
var l = 0, r = words.length, m; 
 
while (l < r) { 
 
    m = Math.floor((l + r)/2); 
 
    p.textContent = words.slice(0, m).join(' '); 
 
    if (p.clientHeight <= div.clientHeight /* maybe you need add an additional line height here */) l = m + 1; else r = m - 1; 
 
} 
 
p.textContent = words.slice(0, l + 1).join(' ');

div { 
 
    height: 55px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
}

<div id="mydiv"> 
 
    <p id="myp"></p> 
 
</div>