"字节用firefox打开youtube会卡5秒" “换成Chrome就不卡了”
前记
Reddit上有网友表示“字节用 firefox 打开 youtube 会卡5秒”，随后有网友表示“你只要把 UA 换成 Chrome 就不卡了”，并直接扒出了对应代码（下图，5E3 = 5000ms = 5s）。
代码所在文件：点这里
特别说明： 上面的这些文案图片均来自于 卡颂 大佬的朋友圈，也是看了他的朋友圈有所思考：前端是如何判断页面在哪个浏览器打开的。
思考
当时看到这段东西的时候，我想到的是可怕的商战，了解过前端性能的伙伴们都知道，5s的加载时间是一个可怕的数字，这会导致用户的体验不好，进而导致一系列的利益问题。
而从一个学习者的角度来看，我更好奇的是如何做到的，比如标题中的 firebox 和 Chrome 浏览器，是如何去判断用的哪个浏览器去打开，进而产生后续的动作。换句话说：前端是如何判断页面是在哪个浏览器打开的。
User Agent 字符串
每个浏览器都有一个 User Agent 字符串，它包含了关于浏览器、操作系统以及版本的信息。你可以通过检查这个字符串来确定用户使用的浏览器.
const userAgent = window.navigator.userAgent;
if (userAgent.indexOf("Chrome") !== -1) {
console.log("Chrome");
// 处理 Chrome 浏览器
} else if (userAgent.indexOf("Safari") !== -1) {
console.log("Safari");
// 处理 Safari 浏览器
} else if (userAgent.indexOf("Firefox") !== -1) {
console.log("Firefox");
// 处理 Firefox 浏览器
} else if (userAgent.indexOf("Edge") !== -1) {
console.log("Edge");
// 处理 Edge 浏览器
} else if (userAgent.indexOf("IE") !== -1) {
console.log("IE");
// 处理 Internet Explorer 浏览器
} else {
// 其他浏览器或未知浏览器
console.log(21);
}
这是我在 Chrome 浏览器打开的效果：
其他的办法
Feature Detection(特性检测)，此方法不是针对特定浏览器，而是检测浏览器是否支持某些特性或API，你可以根据特定特性是否可用来判断用户所用的浏览器。
例如，某些浏览器可能支持ES6语法、某些新的API或CSS属性，你可以检测这些特性是否存在来判断用户所在的浏览器，然后做出相应的处理。
if (typeof window.IntersectionObserver !== 'undefined') {
// 浏览器支持 IntersectionObserver API
} else {
// 浏览器不支持 IntersectionObserver API
}
注意事项
- 用户代理字符串不是100％可靠的方法，因为它可以被用户更改或伪造。
- 建议使用特性检测而不是依赖特定浏览器的字符串，因为特性检测更可靠，并且更具有未来兼容性。
- 尽量避免根据浏览器来提供不同的行为，而是考虑使用渐进增强或优雅降级的方式来提供更好的用户体验。
最后
这篇文章也是因为看到了前记那段文字的一些思考，我也不知道这种思路对不对，请懂的大佬们指正一下哈
