哎呦我去！原来只有搞颜色的P站真正关心网站性能

近年来，前端“技术”层出不穷令人眼花缭乱，新技术让网站的交互更加炫酷，使得平均网页大小已经接近几兆字节了！毫无疑问这些技术更加吃性能，不得不让前端开发人员为网站的性能问题多考虑考虑了。

唯一能找到真相的方法就是动手去做。让我们来为各大知名网站做个检查吧！

测试方法

• macOS上的Firefox
• 非隐身模式
• 所有扩展都被禁用
• 只关心JavaScript（未压缩的）
• 启用服务工人
• 禁用所有缓存(冷加载)

为什么只看JavaScript？网站的内容千差万别(YouTube上的视频当然比Slack上的文本消息更重)，但JavaScript是衡量“交互复杂性”的通用指标。

主要目标是评估浏览器解析和执行代码需要做多少工作。

我们先设置基准，就以当前的博客为准：

这里的数字是 0.004 MB。如果你决定在家里重现这个场景，我还突出显示了需要设置的所有要点。

小试牛刀，登录页

好的，让我们从简单的开始，比如登录页/非交互式应用程序。

一个正常交互的页面看起来像这样 - Wikipedia, 0.2 MB：

稍微有点臃肿-像这样- linear，3 MB：

记住：这没有图片，视频，甚至是样式！只有 JS 代码。

一个糟糕的登录页看起来像这样 - Zoom,6 MB：

或者像Vercel一样，6 MB：

是的，这只是一个登录页面。没有应用程序，没有功能，没有调用，卧槽，这都能做到6MB，unbelievable。

没有最糟，只有更糟，例如 - Gitlab, 13 MB：

静态网站

没有比显示一堵静态的文本更简单的了，Medium 需要 3 MB 来做到这一点：

Substack needs 4 MB:

Quora, 4.5 MB:

Pinterest，10 MB：

Patreon，11 MB：

And all this could’ve been a static page...

搜索网站

当网站的交互主要以搜索为主时，输入搜索内容-显示结果列表，这不算繁琐吧？

StackOverflow, 3.5 MB:

NPM, 4 MB:

Airbnb, 7 MB:

Booking.com, 12mb:

预订很复杂！看看这个界面！

好吧，好吧，再简单点，谷歌，谷歌怎么样？一个文本框，链接列表，对吧？

嗯，它的花销是 9 MB：

只是显示链接列表。

单一交互网站

谷歌翻译只有两个文本框，但需要花销 2.5 MB：

ChatGPT只有一个文本框， 7 MB:

当然，ChatGPT确实很复杂，但这是对算法的实现而言，而不是在浏览器显示上！

视频网站

Loom — 7 MB:

YouTube—12mb:

与真正关心性能的P站相比，其他网站都是弟弟🧍‍♂️ - Pornhub, 1.4 MB：

音频网站

我猜音频无论如何都只需要12 MB：

SoundCloud:

Spotify:

电子邮件

好吧，视频和音频可能是重的东西(即使我们不测量内容，只是 JS，记住！) 。让我们转移到更简单的办公任务。

Google Mail 有 20 MB:

这简直就是个垃圾邮件箱！！！ 它怎么能和Figma一样大，后者为他们的应用提供完整的定制C/OpenGL渲染？

如果你在想：邮件也很复杂。有很多 UI，很多交互性，也许20 MB是可以理解的？

不!

看，FastMail，同样的功能，但只有2 MB，少10倍！

“生产力”网站

好吧，也许电子邮件太复杂了？那更简单的方式呢？比如TODO清单？

好，来看看 Todoist,9 MB：

Dropbox，显示文件夹中文件的列表需要 10 MB ：

1Password 展示密码列表， 13 MB：

trello, 最多13.5MB。

好吧，也许TODO列表也太复杂了？

好吧，Discord需要21 MB来做到这一点

文档编辑

好的，文档编辑很困难，对吧？因为必须实现光标移动、同步等。

Google Docs, 13.5 MB:

更简单的？Notion,16 MB：

社交网站

社交网站需要像按钮那样的代码大小通常是12 MB。

Twitter, 11mb:

Facebook, 12mb:

TikTok，12.5 MB：

Instagram 比 Facebook 大，尽管功能少了 10 倍。

LinkedIn，它是一个博客？一个平台？它有搜索，有消息，有社交功能。不管怎样，它只有31MB：

我们退化的速度有多快？

2015年平均网页大小接近于《毁灭战士1》的共享版(2.5 MB)：

在2024年，Slack的文件大小为55MB，相当于原版《Quake 1》的全部资源，但现在它只使用了JavaScript。

10 MB到底有多大？

说实话，在输入了所有这些数字之后，10 MB 甚至感觉不到那么大，现在似乎发布 10 MB 的代码是正常的。

如果我们假设平均代码行大约是65个字符，这意味着我们需要发送大约150,000行代码。每个网站都有！有时只是为了显示静态内容！

而且代码已经被压缩了，所以它更像是为一个网站而准备的300K LoC。

但是现代网站真的那么复杂吗？SPA的典型代表，谷歌地图，以现代标准来看，还是相当适中的，仍然只有4.5MB：

谷歌的某些开发者严重落后了，用现代前端技术编写，它至少应该有20 MB。

如果你和我一样，认为“Figma是一个非常复杂的前端应用程序，所以它必须有一个巨大的javascript下载大小”，那么，这是正确的，但Gmail几乎和Figma一样复杂，LinkedIn比Figma复杂1.5倍，Slack比Figma复杂2.5倍 ̄\_(ツ)_/ ̄

是时候测试一下jQuery了

0.1MB，NB!