javascript - 优化文本渲染性能？

Question

假设我有一个 <p> <div> 内的标签具有以下属性:

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

当页面加载时，我想继续向 <p> 添加单词标记，直到我检测到溢出，就像添加第一个不显示的单词时停止一样。

我使用以下代码执行此操作:

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>

现在假设我使用更大的 div 来实现更大的规模。更进一步，假设我需要对 50 个不同大小、不同文本的 div 执行此操作。显然，尽管在我们看来这似乎是瞬间发生的，但实际上每个字都是一一绘制的。

假设我不知道行高、容器 div 高度或字数，我想弄清楚如何优化此类操作。我的问题是:如果我放置一个不透明的 <div>在容器顶部覆盖这个逐一的单词绘制，然后在函数检测到溢出时将其删除，这会提高性能吗，因为实际的单词不会在 while 循环的每次迭代中绘制？

如果没有，我可以使用任何类似的策略来优化此类操作吗？

Answer 1

尝试二分查找。这就是你想要的。

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>