scrollable Table lags

[DerekHQ]

Environment(required)

• antd version: 2.6.1
• OS and its version: Windows10
• Browser and its version: Chrome \ IE11

Antd的 table组件，分页（每页二十条）显示列表数据时，

1. 在chrome浏览器内性能正常，但在IE11浏览器内，滚动条以及行高亮事件，CPU（i7）占用相当严重（40%-90%），以至卡顿无法正常使用；
2. 测试使用原生的rc-table组件，列表每页显示几百条，chrome\ie11,均表现良好

[benjycui]

具体 demo ?

性能优化是个很细节的问题，务必提供相关场景的 demo，谢谢。

[DerekHQ]

不算优化，就是普通简单表格DEMO，静态数据，装进antd-table， IE11 就非常卡顿（滚动滚动条或者鼠标来回在表上来回的mouseover，CPU占用就很高）； 装进rc-table就没有什么问题！
尤其是表格带fixed列的情况下，尤为严重！

[DerekHQ]

最简单的就是你们用 IE11 访问你们的antd官网组件下的table页面，看看是否卡死，谢谢！

[yesmeck]

@DerekHQ 试了 1000 条数据每页 20 条分页并不卡，可以的话还是帮我们提供个 demo 吧，官网上例子太多很难定位问题。

[DerekHQ]

@yesmeck 谢谢，这么晚了还在处理问题！明天我准备个DEMO！^_^

[DerekHQ]

@yesmeck 在IE11下测试

"babel-preset-es2015": "^6.0.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.0.0",

"babel-polyfill": "^6.20.0"

table.txt

[benjycui]

@DerekHQ Please provide a re-producible demo: http://codepen.io/benjycui/pen/KgPZrE?editors=001

[DerekHQ]

@benjycui 'Codepen' is not support IE11.

[benjycui]

@DerekHQ it works fine while I test it in IE11..

[DerekHQ]

@benjycui demo 放到了你的codepen上了，但是IE11下无法看到运行效果，Edge能看； 实际效果是：chrome极为流畅，Edge有些卡顿，IE11极为卡顿； 我们多台笔记本测试效果都是一样！

[afc163]

@DerekHQ 你需要 fork 一份，否则我们看不到。

[DerekHQ]

@afc163 http://codepen.io/DerekHQ/pen/jyWMzJ?editors=0010 ^_^

[yesmeck]

发现跟 css 有关系，用 antd 的 Table 但是配合 rc-table 的 css 就不会卡。

[yesmeck]

ant-design/components/table/style/index.less

Lines 53 to 56 in 70a0cc0

	&-tbody > tr > td {
	border-bottom: @border-width-base @border-style-base @border-color-split;
	position: relative;
	}

&-tbody > tr > td {
  border-bottom: @border-width-base @border-style-base @border-color-split;
  position: relative;
}

这几句删掉就不卡了。

[yesmeck]

有上面的 CSS 滚动时发生的 paint：

去掉上面的 CSS 后：

[yesmeck]

去掉 position: relative 就可以了。

@afc163 这句有没有特别的作用。

[yesmeck]

commit 01f5b61

[afc163]

有用，稍等我找下场景。

IE 真是见鬼，这居然会卡。

[afc163]

之前有需求希望把单元格设置成其他色彩的需求。当时使用了类似下面的 hack 去做：

render: () => {
  return <div className="blue">xxx</div>
}

.ant-table td {
  position: relative;
}
.blue:after {
  position: abolute;
  background: blue;
}

然后后来干脆默认在 td 直接加上 position: relative;，方便这样的定制。

---

现在如果有性能问题，先删掉，反正没有作为正式场景放出来。

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.