tabs组件中的全局样式a[nz-tab-link] ~*{position: relative} 在大量的DOM节点插入时会严重影响css计算性能

[doxingg]

Reproduction link

https://codesandbox.io/s/angular15-ng-zorro-antd-tabs-component-css-performance-test-2fvfb5

Steps to reproduce

项目启动后，打开地址https://2fvfb5.csb.app/

点击“addDom”打开控制台，查看console输出

run loop 10000 begin 1683369722773
run loop 10000 end 1105m

10000个节点需要1200ms才能渲染出来
通过DevTool中的性能工具查看样式计算耗时,按照耗时倒序排序后

已用时间(μs)	快速拒绝计数	匹配尝试	匹配计数	选择器
767044	0	10000	0	a[nz-tab-link] ~ *
2738	0	9999	9999	div
2610	0	10000	0	span.ant-radio *
1955	0	10000	9999	div[_ngcontent-gcq-c44]

发现a[nz-tab-link] ~ *这个样式占用了绝大部分计算时间

点击“clearDom”清除掉已经存在的DOM
这个时候点击“replace css (nz-tab-link ~ *)”按钮，把原始的a[nz-tab-link] ~ * { position: relative; }替换为.ant-tabs-tab a[nz-tab-link] ~ * { position: relative; }之后再点击“addDom”，再次查看console输出

run loop 10000 begin 1683369649225
run loop 10000 end 270ms

渲染完毕的时间缩减到了300ms以内，性能有了大幅提升

What is expected?

大数量的dom 添加时a[nz-tab-link] ~ *不要对性能影响那么大，和其他普通的全局样式耗时相差不大即可

What is actually happening?

a[nz-tab-link] ~ * 占据了绝大部分的css计算耗时

Environment	Info
ng-zorro-antd	15.1.0
Browser	Microsoft Edge@112.0.1722.68

[zorro-bot]

Translation of this issue:

The global style in the tabs component A [nz-tab-link] ~*{positive: related

REPRODUCTION LINK

[https://codesandbox.io/s/angular15-norro -NTD-tabs-Component-Performance-Test-2FVFB5> (https://angular15-zorro-an TD- TABS-COMPONENT-CSS-PERFORMANCE-TEST-2FVFB5)

STEPS To Reproduce

After the project starts, turn on the address https://2fvfb5.csb.app/

Click "Addom" to open the console and check the console output

` run loop 10000 begin 1683368575551 run loop 10000 end 1217ms `
10,000 nodes require 1200ms to render
Check the time consumption time consumption time is checked by the performance tools in Devtool, and sorted in the time consumption.

Time (μs)	Quickly reject count	Matching attempt	Matching count	Selector
767044	0	10000	0	a [nz-tab-link] ~ *
2738	0	9999	9999	DIV
2610	0	10000	0	span.ant-radio *
1955	0	10000	9999	DIV [_ngContent-GCQ-C44]

Discover a [nz-tab-link] ~ *This style occupies most of the calculation time

What is exfected?

When a large number of DOM adds a [nz-tab-link] ~ *Don't have so much impact on performance, it is not much different from other ordinary global styles.

What is actually happy?

a [nz-tab-link] ~ * occupies most of the CSS calculation time consumption time consumption

| ENVIRONMENT | Info |
| --- | --- | |
| NG-Zorro-ATD | 15.1.0 |
| Browser | Microsoft Edge@112.0.1722.68 |

[doxingg]

fixed by #7936