bing搜索新春彩蛋实现简析

bing新春彩蛋

春节假期结束,回到出租屋,打开bing,搜索掘金,发现bing和平时有一点点不一样。

彩蛋1:鼠标悬浮在链接上出现灯笼

彩蛋2:点击空白处出现烟花特效

断点寻找实现代码

寻找被修改的DOM节点

移动鼠标,发现元素面板的body在闪烁,说明body有变化,所以在body上打断点。

打上DOM断点

DOM断点类型选择子树修改

寻找实现代码

再移动一下鼠标,触发断点,发现停在了函数调用上

跳到下一个函数调用

找到了我们要的代码

探索实现细节

粗略浏览代码,推测彩蛋是通过把特效元素插入到body中实现的,所以在appendChild后打上断点。

灯笼实现

此时发现body中多了一个背景是灯笼的元素,印证了前面的猜想。

再仔细看代码,不难发现,鼠标移动时,在body里插入一个背景是灯笼的元素,再设置对应的left, top,让其显示在鼠标附近。

烟花实现

和灯笼类似,区别在于烟花是一个gif图

收获

-1按位非等于0

有一处判断用户设备的代码,用到了逻辑运算符~, 它是用来做位元算按位非的, 由于-1的二进制全是1,按位非之后就变成了0,0是一个falsy的值,方便和三元运算符搭配使用。

可插拔

bing的新春彩蛋通过监听document上的事件实现,代码全都放在一个文件中,这种实现方式的好处在于方便进行插拔,需要该功能的时候引入,不需要的时候不引入,不会对其他功能造成影响。

总结

通过断点找到了bing新春彩蛋的代码,同时学习到了~-1=0以及代码书写的技巧。

相关推荐
卸任5 小时前
Vibe coding工具使用心得
前端·ai编程
brien95 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance6 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M6 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写6 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李6 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易6 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
清晨Coding6 小时前
删了 Cookie 还能自动登录?Google系网站登录态自动恢复的原理分析
javascript
风骏时光牛马6 小时前
前沿视界
前端
kyriewen6 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员