AntiMoron
AntiMoron
复现的关键点：有一定的DOM数同屏（因此需要把demo视窗拉拉宽，同时屏幕拉高） 1. 每屏的格子数尽可能多；比如某些复杂的客户管理系统，大表格是非常常见的 2. 渲染复杂（其实也没多复杂），如例子里的给每行的人打标签 --- 我的改造点是： 每行行高28px，让纵向尽可能多容纳DOM；每页变成100个；这样尽可能多地展示信息； 现象：横滑到tag附近，掉帧尤其明显（我的电脑是2.2GHz 16GB内存 15年macbook pro）
 profile下来、确实是掉帧了； 
当我手动修改DOM，把里面box-shadow干掉之后；流畅极了  --- 直接发结论：paint和rendering耗时都快被消灭了；Profile： 
因为我有一定的native渲染经验，我大概知道这些都是来自于： box-shadow底层实现通常有一定的硬件渲染（shader等等）、生成一些texture后。再和底下之前渲染过的内容做blending（透明度等等，需要运算来融合）; 又因为阴影实现再table内，当DOM多了的时候要和每个格子都blend一遍（这个应该来自于浏览器行为，浏览器不知道scroll事件后格子是否内容发生变化，如某个格子被hover高亮了），重复运算也多了、因此就卡了； 修复建议： 1. 直接使用一张渐变图可以减少硬件渲染的时间；直接blending.. 2. 阴影采用position absolute的方式，浮放到table兄弟节点，这样blending变成 shadow纹理 直接和 table渲染完的纹理融合，只blend一次 @afc163
解决方案我一开始是知道的 ``` // relative // absolute // absolute ```
@afc163 感谢关注！期待后续跟进 这个修复了市面上80%业务估计都有更好的体验把~
BTW： 优化后可以让我4.x的版本也发一下吗？恭喜5.0上线啊，不过我希望等一个稳定版再放业务里
@muzea 使用了ogl渲染；现在chrome默认都是在用硬件渲染了  据我了解m1 mbp的性能非常高；ant-design是一个非常普适性的库，如果我们机器不一样，我复现你复现不了；那我们也没法沟通到一起去了呀； 我建议还是加大这个demo的压力，找个更大的屏幕，找个更多DOM节点；我们搞搞看
 Same here (Ubuntu 18.04).