如果我们对所有三张传输图像都执行此操作，则从服务器发送到浏览器的此页面的压缩 HTML 将从 31,182 字节增加到 31,532 字节 - 所有 3 张图像仅增加了 350 字节！
总结一下：
我们的 HTML 请求增加了 350 个字节，这几乎不算什么
我们可以丢弃三次往返服务器的请求，因为我们发现这三次往返花费了相当长的时间
你们中的一些人可能已经意识到，如果图像不是内联的，它们可以被单独缓存，因此未来的页面请求不需要重新获取它们。但如果我们考虑：
每张图片最初在网络上传输时大约为 1.5kb（他们没有对 SVG 进行 gzip 压缩），加上上面约 350 字节的 HTTP 标头，总共传输约 5.5kb。因此，总体而言，我们减少了网络上传输的内容量。
这也意味着需要超过 20 个页面浏览量才能从缓存中受益。
要点：考虑在哪里可以使用 SVG 而不是 PNG。
要点：确保优化 SVG 图像，使用我链接的免费工具。
要点：内联小图像是有意义的，并能带来巨大的性能提升。
注意：您还可以内联 PNG - 请参阅本指南。
注意：要优化 PNG/JPG 图像，请尝试Kraken。
退后，JavaScript！HTML 可以处理这个问题……
如今，由于 JavaScript 库的普及，它们提供了现成的解决方案，我 奥地利手机号码数据 发现 JavaScript 常常被用来实现一些不需要 JavaScript 就能实现的功能。JS 库越多，下载量也就越大，可能需要更多次往返服务器以传输更多文件，这还会导致 JavaScript 执行时间和成本增加。
我非常同情你为什么会落得如此境地。开发人员经常会收到糟糕的简报/规格，这些简报/规格没有具体说明性能，只说明了功能。他们通常时间紧迫，所以很容易最终放弃一些东西。
然而，使用 HTML 和 CSS 实现的功能已经取得了很大进展。让我们看一些例子。
带搜索功能的组合框
带有文本搜索选项的下拉框是当今相当常见的界面元素。我最近读到的一篇文章描述了如何使用Select2 Javascript 库制作这样的列表：
它是一个有用的 UI 元素，可以帮助您的用户。但是，Select2 库中有一个 JavaScript 库，而 JavaScript 库又依赖于一些 CSS 和 JQuery 库。这意味着需要进行三次往返才能收集一堆大小各异的文件：