⭐⭐⭐ Spring Boot 项目实战 ⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》 《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》 《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》 《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》 《Java 面试题 + Java 学习指南》

摘要: 原创出处 tonsky.me/blog/js-bloat/ 「tonsky」欢迎转载,保留摘要,谢谢!


🙂🙂🙂关注微信公众号:【芋道源码】有福利:

  1. RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表
  2. RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址
  3. 您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。
  4. 新的源码解析文章实时收到通知。每周更新一篇左右。
  5. 认真的源码交流微信群。

2024 年,大家觉得一个网站 JS 文件的平均大小应该是多少?1MB、5MB、10MB,还是更加大呢?

近年来,层出不穷的现代化前端技术让人眼花缭乱,让网站拥有了更多的交互和丰富的功能,再加上终端设备的配置越来越高,许多网站似乎不用再过分担心性能问题 —— 常常打开网站就要下载超过 10M 的 JS 文件。

知名开源开发者 Nikita Prokopov 对常见网站的 JS 文件大小进行了统计(未压缩),结果有点令人出乎意料。

以静态页面为主的网站

  • Wikipedia, 0.2 MB

  • Linear, 3 MB

  • Zoom, 6 MB

  • Vercel, 6 MB

  • Gitlab, 13 MB

  • Medium, 3 MB

  • Quora, 4.5 MB

  • Pinterest, 10 MB

以搜索功能为主的网站

  • StackOverflow, 3.5 MB

  • NPM, 4 MB

  • Airbnb, 7 MB

  • Booking.com, 12 MB

  • Google, 9 MB

具有简单交互的单应用网站

  • Google Translate, 2.5 MB

  • ChatGPT, 7 MB

视频 / 多媒体类网站

  • Loom, 7 MB

  • YouTube, 12 MB

  • Pornhub, 1.4 MB

目前看下来,维基百科网站的 JS 文件最小,仅有 0.2MB。Pornhub 次之,为 1.4MB。

Pornhub 声称「每一天都有 1.3 亿人访问我们的网站」,因此不难理解他们对于性能的极致追求。根据他们 Web 工程师的采访,该网站主要使用原生 JavaScript。

但这俩在下面这个网站前面都是弟弟 ——

  • jQuery, 0.1 MB

文章目录
  1. 1. 以静态页面为主的网站
    1. 1.0.0.0.1. Wikipedia, 0.2 MB
    2. 1.0.0.0.2. Linear, 3 MB
    3. 1.0.0.0.3. Zoom, 6 MB
    4. 1.0.0.0.4. Vercel, 6 MB
    5. 1.0.0.0.5. Gitlab, 13 MB
    6. 1.0.0.0.6. Medium, 3 MB
    7. 1.0.0.0.7. Quora, 4.5 MB
    8. 1.0.0.0.8. Pinterest, 10 MB
  • 2. 以搜索功能为主的网站
    1. 2.0.0.0.1. StackOverflow, 3.5 MB
    2. 2.0.0.0.2. NPM, 4 MB
    3. 2.0.0.0.3. Airbnb, 7 MB
    4. 2.0.0.0.4. Booking.com, 12 MB
    5. 2.0.0.0.5. Google, 9 MB
  • 3. 具有简单交互的单应用网站
    1. 3.0.0.0.1. Google Translate, 2.5 MB
    2. 3.0.0.0.2. ChatGPT, 7 MB
  • 4. 视频 / 多媒体类网站
    1. 4.0.0.0.1. Loom, 7 MB
    2. 4.0.0.0.2. YouTube, 12 MB
    3. 4.0.0.0.3. Pornhub, 1.4 MB
    4. 4.0.0.0.4. jQuery, 0.1 MB