好久没有记录什么神魔乱象了，今天终于碰见一个。记录下，为大家避坑。
背景描述
在上左右的布局下，随着滚动条向下滚动，到达一定位置后，右布局的一个组件就开始了抖动，随着滚动条持续向下。到达另一个位置，抖动组件的停止抖动。这个问题出现的很奇怪，奇怪的地方有三个。
- 随着滚动条向下,会出现滚动，
- 持续向下滚动,又回停止滚动。
- 开始出现抖动和停止抖动的位置是固定的
分析过程
根据上述现象。记录下排查日志。
第一步：最先想到的是抖动组件反复render造成。于是找到了，抖动组件的render函数。在render函数内。写下console.log('componentName render'); 热更新过后，复现bug。发现控制台并没有输出对应日志。因此，该过程排除了组件被多次刷新造成。
第二步：排除了组件render，也就说明和抖动组件不相干。为了进一步验证，使用斑马线条纹代替了抖动组件。发现斑马线条纹确实仍然反复横跳。
第三步：这时候想可能是css问题，因为css世界作者的张鑫旭提到过这样的问题。于是立马进行翻阅资料，将下列代码写入项目。
body {
-webkit-transform: translate3d(0, 0, 0) ;
transform: translate3d(0, 0, 0);
}
头秃的来了，竟然不好使。这简直就是离谱。。。
第四步：放弃。
第五步：重振旗鼓，坚信不疑。这一次仍然把寻找抖动的源头，放在是否是上方组件的高度，进行了修改。于是开始由抖动元素向上慢慢寻找怀疑对象。排查过程极其痛苦。
第六步：由于组件太多了，索性不去看组件具体内容，而是从下到上分别设置固定height，然后再去复现。这样就大幅度缩减了排查时间。
第七步：终于经历以上六步定位到了那个高度变化引起了该问题。大功告成，哈哈哈。
总结经验
- 抖动可能由三方面组成：反复渲染、transform印象、其他组件高度变化。
- 其他组件高度变化影响。查看具体组件，使用height属性。将会大幅度缩减排查时间。
结束语
我的生活经验使我深信，没有缺点的人往往优点也很少。 ——林肯
