注意:本文有时效性,您看到此文章时BUG很可能已经被修了,仅是记录一下思路和方法。
链接:网易见外
缘起
逛Q群时,有一群友发了这张图:
嗯,乍一看,没啥问题,普通的截图,
第二眼……emm,道理我都懂,但是这“客户满意度超过1%”是个什么鬼……
前两个的值好像都挺正常的,怎么这就开始糟践起自己来了~
用脚后跟想想,也知道肯定是个BUG,而且大概率是前端BUG,所以,动手分析一波~
分析
F12,开控制台。
页面没抽风,看来没有反调试。
选中1%那个结点,下子树修改断点。
Ctrl+R 刷新,断点命中了。
(有时候Chrome会抽风死活命中不了,据说是个BUG,重启下就好)
可以看到是将子树修改为1%这个文本。
先在这句前面(350行)加个执行断点,F8继续执行。
然后它就不命中了,上下滚动页面,也触发不了两个断点的任何一个。
看来那个结点的子树只被修改了一次,而且就是由图中代码修改的。
刷新页面,重新断在执行断点处:
看看左边,是个什么printValue函数,传入的就是要修改成的数值,和BUG好像无关,故继续从调用堆栈向上翻翻。
往上一层是个匿名函数,看不出什么端倪,继续往上追溯。
翻到initCountUp函数后,好像有点意思了,左边出来一些肉眼能看懂的东西了。
大胆望文生义一下,前端期望的效果应该是一个渐变特效(线索:函数名initCountUp,部分调用参数,还有lz混迹互联网多年的经验(此处手动狗头)),当用户滚动到这些结点所在的部分时(线索:函数名getScrollTop),开始执行特效(见683至689行),将“累计翻译量”从1亿变化到8亿(见672至682行,下略)、“用户节省”从300万渐变到700万、“客户满意度”从1%变化到97%。
那么为什么没触发特效,就显而易见了,既特效执行要求的滚动阈值设置的太大了(见685行的常数3900)。
这个是一个与表达式,js执行执行左边的得到假就不会继续对右边的表达式求值了。(有假则假,表达式整体的返回值已经确定,对右边表达式继续求值是无意义的,既“短路原则”)
所以触发不了右边表达式的副作用(即开始执行特效)。
重新下断点测试一下,拉到界面最底下,获取的getScrollTop函数返回值也只有2500多,所以当然触发不了特效了。
手动执行以下后边的函数,嗯,显示正常了,看来猜的没错。
结语
猜想是页面原先有更多内容,所以触发特效没问题,之后因为一些原因删减了,导致特效触发不了。
还有这值能写死在下也是佩服的(狗头)。
其它:lz某非双普通大学大一新生,假期想求一份实习,啥方面都行(如果有公司要我的话)~(如果违反版规请版主告知或直接删除这行,谢谢)