Closed jhoneybee closed 3 years ago
项目地址: https://github.com/HighPerformanceComponent/rc-grid
通过开发rc-grid 表格，得到一下的优化经验，分享给大家，解决其他类似的问题
在 sorrycc 的一篇最佳表格里面曾经提到过这样一个优化表格白屏幕的技巧。地址我依稀不清楚了，但是我内容我大概记得。 通过自定义滚动条， onwheel 来控制滚动逻辑。
onwheel
很好奇，为什么 onwheel 可以去解决闪烁的问题？
后来通过搜索资料我才发现了一个关键的属性 will-change: transform; 可以优化滚动效率， 在通过检索资料后来我才发现一个有趣的事情。
will-change: transform;
浏览器在优化滚动效率的时候，会有这样两个线程来进行处理
这么优化的原因可能是因为，浏览器为了解决滚动的流畅问题。 将 onScroll 和 render 分开 ，这样不会影响到页面的流畅程度。 但是由于在 滚动的时候调用 setState/ useState 的时候会发现滚动的 render 线程异步没即时的执行。也就是说在 onScroll 中不一定等待render执行完成，才会执行下次的 onScroll 特别是在firefox 浏览器中异常明显。 因为firefox默认优化就是不同步的。而在webkit引擎中，似乎只有设置过 will-change 才会滚动异步。
firefox
知道产生白屏的原因以后，我们就知道如何解决了。 将 render 控制在自己的范围内，例如不使用浏览器的 onScroll， 而是通过 onwheel 来实现。 但是这样得不到 未来浏览器的关于滚动的fps 优化。同样也得不到现在目前浏览器带来的 “白屏的问题”
如果是在基于 webkit 浏览器中，同样 取消 will-change 这样也会同步render不会闪动，但是这个在 firefox 中无效。
webkit
will-change
例如我们取消 https://react-window.vercel.app/#/examples/list/fixed-size 例子中的 will-change 属性，同样滚动起来非常棒
css 中的 position: sticky 是一个很棒的属性， 用来固定非常不错， 如果想要获得更好的浏览器支持，一般建议，表头和body分开， 通过事件，统一的同步滚动，但是这样会在低端的硬件情况下带来细微的滚动不同步的视觉效果。 position: sticky 带来的视觉效果，和性能都很棒，但是部分浏览器不支持。
position: sticky
建议自己实现虚拟滚动，虽然 react-window 非常棒，也开箱即用，但是在设置行点击，或则行样式的问题情况下， react-window 中的 只有 cell 没有 row 一些很好实现的功能点，在 react-window 中反而实现起来比较复杂了。 所以建议自己实现虚拟滚动方便优化性能
react-window
cell
row
我比较常用的方式就是，可以打开浏览器的fps ，在控制台上输入 show fps 这样可以看到是在什么情况下导致的性能降低， 或则用 performance 来进行性能瓶颈的详细问题。 render 还是 脚本执行的时间。甚至在 performance 中还可以看到具体存在问题的具体行
show fps
performance
!!! 优化到最后，其实总结经验无非就一条 “少即是快”， 越少的 dom元素，越少的循环次数那么执行的效率就越高（不过这是废话，但也是我体验最深刻的一句话）!!!
项目地址: https://github.com/HighPerformanceComponent/rc-grid
最佳的表格优化体验
通过开发rc-grid 表格，得到一下的优化经验，分享给大家，解决其他类似的问题
关于表格白屏， 也就是滚动的时候闪烁的问题。
在 sorrycc 的一篇最佳表格里面曾经提到过这样一个优化表格白屏幕的技巧。地址我依稀不清楚了，但是我内容我大概记得。 通过自定义滚动条，
onwheel来控制滚动逻辑。很好奇，为什么
onwheel可以去解决闪烁的问题？后来通过搜索资料我才发现了一个关键的属性
will-change: transform;可以优化滚动效率， 在通过检索资料后来我才发现一个有趣的事情。浏览器在优化滚动效率的时候，会有这样两个线程来进行处理
知道产生白屏的原因以后，我们就知道如何解决了。 将 render 控制在自己的范围内，例如不使用浏览器的 onScroll， 而是通过
onwheel来实现。 但是这样得不到 未来浏览器的关于滚动的fps 优化。同样也得不到现在目前浏览器带来的 “白屏的问题”如果是在基于
webkit浏览器中，同样 取消will-change这样也会同步render不会闪动，但是这个在 firefox 中无效。例如我们取消 https://react-window.vercel.app/#/examples/list/fixed-size 例子中的
will-change属性，同样滚动起来非常棒关于表格的固定列, 固定表头
css 中的
position: sticky是一个很棒的属性， 用来固定非常不错， 如果想要获得更好的浏览器支持，一般建议，表头和body分开， 通过事件，统一的同步滚动，但是这样会在低端的硬件情况下带来细微的滚动不同步的视觉效果。position: sticky带来的视觉效果，和性能都很棒，但是部分浏览器不支持。关于是否使用 react-window or 自己实现虚拟滚动
建议自己实现虚拟滚动，虽然
react-window非常棒，也开箱即用，但是在设置行点击，或则行样式的问题情况下，react-window中的 只有cell没有row一些很好实现的功能点，在 react-window 中反而实现起来比较复杂了。 所以建议自己实现虚拟滚动方便优化性能关于调试表格的性能问题
我比较常用的方式就是，可以打开浏览器的fps ，在控制台上输入
show fps这样可以看到是在什么情况下导致的性能降低， 或则用performance来进行性能瓶颈的详细问题。 render 还是 脚本执行的时间。甚至在performance中还可以看到具体存在问题的具体行!!! 优化到最后，其实总结经验无非就一条 “少即是快”， 越少的 dom元素，越少的循环次数那么执行的效率就越高（不过这是废话，但也是我体验最深刻的一句话）!!!