[Typography] Typography的pos=middle太卡了

[xmsz-stu]

Which Component Need Enhancement 期望新增功能的组件

• Typography

What does the proposed API look like 期望支持的API

Feature Description 功能描述

• 使用modal弹窗
• 弹窗里有个列表使用 { showTooltip: true, pos: 'middle' };

结果卡到不行,pos改成end就正常点

Additional information 补充说明

[YyumeiZhang]

Typography 中 pos: 'middle' 时，使用的是 js 省略完成。具体实现是通过类似二分的方式不断的切割文本，并在页面挂上相同样式的不可见节点来计算是否符合宽高限制。需要用到 window.computedStyle 进行计算，无法避免页面 reflow，当需要计算节点较多时候，无法避免会出现卡顿的情况。 当 pos 为 'end' 时，并且在无suffix，复制节点的情况下，借助的 css 实现省略，没有 js 省略中的复杂计算，因此能够在同时存在较多节点情况下使用。

[xmsz-stu]

Typography 中 pos: 'middle' 时，使用的是 js 省略完成。具体实现是通过类似二分的方式不断的切割文本，并在页面挂上相同样式的不可见节点来计算是否符合宽高限制。需要用到 window.computedStyle 进行计算，无法避免页面 reflow，当需要计算节点较多时候，无法避免会出现卡顿的情况。 当 pos 为 'end' 时，并且在无suffix，复制节点的情况下，借助的 css 实现省略，没有 js 省略中的复杂计算，因此能够在同时存在较多节点情况下使用。

原来是这样

现在300条的时候就已经卡到不行了，而且会导致左侧表格渲染变慢

然后我现在只能自己去计算了，第一版的思路是用canvas获取一些常用字母、数字、符号加一个中文字宽度，然后再根据传入的宽度计算显示内容，这样的话就完全不卡了，当然有很多写死的前提条件