忽然有一天，老板指着前端页面说，这个右键显示菜单怎么这么卡，下滑页面也非常的卡，特别是显示器越大就越卡。
我心一惊，难道是最近写的代码太差啦？都影响页面渲染了。。赶忙去分析一波原因。
背景：使用到的技术栈为Angular，数据展示部分是老板买的Ag-grid。
话不多说，赶紧用上我们的法宝，Chrome的performace分析。Performace分析允许我们录制视频，本人就赶紧点击录制，疯狂右键，多来几次user case，剩下的就交给performace工具进行分析，求求了，快告诉我哪里的问题。
果不其然，着实有点卡，控制台还报‘Forced reflow while executing Javascript took 192ms’。
从图中我们可以看到，紫色的部分确实花了比较长的时间；也有比较多的long task
首先，我们可以看到一个大大的warning；说forced reflow花费了多久多久，会造成performance问题。
我们可以点击，callTree看到底是哪个函数导致了recalculateStyle这么久呢。
我们通过callTree分析，发现ag-grid在我们点击完右键以后，会调用focus方法，focus恰好会引起页面的reflow。
本次分析是在一个较小的显示器上，如果是大尺寸显示器，影响到的因素甚至高达6000多个（显示元素更多），性能会更差。因为我们页面是表格为主，所以元素多也可以理解。至此，我们才明白，这个肯定不是自己代码的锅。那么怎么去解决这个问题呢。
当然，ag-grid对自己的performace影响因素也做了一定的归纳。 www.ag-grid.com/javascript-…
我们也根据官方文档和自己项目实际情况，对此做出了一定的调整，主要是以下两点：
1.将cellRender变为cellClass，减少页面的元素数目。
2.将rowBuffer从100调整为默认值10.
实际上，以上两个举措确实会改善性能，但是由于显示器的视口如果太大，渲染了过多元素/数据，还是会造成卡顿。
当然用户没有那么大的显示器，以及由于是买的license，后续可能会和官方进行交涉。
