观摩一段简单粗暴的 vue 代码

是一个 vue 的 updated 生命周期钩子：

  updated () {
    let tx = document.getElementsByClassName('textContent');
    for (let jj = 0; jj < tx.length; jj++) {
      while (tx[jj].offsetHeight < tx[jj].scrollHeight) {
        let ss = tx[jj].innerText;
        tx[jj].innerText = ss.substr(0, ss.length - 4);
        tx[jj].innerText += '...';
      }
    }
  }

页面是一个展示作品的页面，估计是设计要求作品简介的文字所占高度不超过一定值，超出部分裁掉用三个点代替。作者的做法是等 vue 拿到数据并重新渲染 dom 之后把页面上所有.textContent 元素里的文字逐字删到所占高度刚好不超过元素高度（.textContent 高度固定）。作品有多条，再加上其他数据更新导致的重新渲染，这段代码会执行多次。

可能他 /她在开发和测试过程中没遇到文字很多的情况，现在我们遇到了一个两万字的数据，导致每次刷新页面至少需要 2 分钟，期间页面处于假死状态。用 chrome 性能面板录制了一下，耗时 4 分多钟，上个截图大伙感受一下：

设置 innerText 本身就是会导致强制同步布局的耗时操作，再循环两万次……

不过光指出问题不够，怎么解决？

我自己还真想不出好办法……不过首先会把这段逻辑放在获取作品数据完成后的一个 nextTick 里，而不是 updated 钩子里。另一个是获取到数据后直接限制文字长度为固定值，但不好保证最后行数以及文字末尾在行末，肯定过不了设计的关。或者，两者结合，先限制为一个尽量短但足够的长度，再执行上面的逻辑。

最后查到了-webkit-line-clamp这个 css 属性，感觉不考虑 IE 的话，就是它了。

大家有什么好的方案？

Sapp

2020-09-30 10:32:12 +08:00

@diegozhu 在页面做一个隐藏（绝对定位+负 index，不会引起页面重绘）的元素，渲染文本，然后读取这个 dom 的属性，读取的属性也是百分之百准确的，读取出来之后处以 line-height，就是行数，拿到行数用总文字初一下，取个整数，就是每行的文字了，然后减少几个文字（省略号的空间），设置这个 index，再在页面可见元素里渲染 `${msg.slice(0, index)}...`
我记得以前做富本文编辑器就有这种骚操作，不过单独为了个省略号是真的不值得

flowfire

2020-09-30 11:55:56 +08:00

如果是我的话，可能会直接采取 2 楼所说的，用纯 CSS 实现禁止换行 + 超出隐藏 + 自动显示三个点。
=======
如果只是想改进源代码，那原来的实现方式是可取的。
为了防止字数过多导致重新渲染次数过多可以加一个补丁。
比如：已知不管使用任何文字，任何字体，任何字间距，只要文字数量超过 X 个，一定会超出范围。
那么第一步就是判断全文是否超过 X 字，超过的部分直接截断。
这样不管字有多长，第一步就先把可能存在的过多的文字直接去掉了。
剩下的部分使用原逻辑执行速度在可容忍范围之内。