前端性能优化（九）

时间 2019-11-12 标签前端性能优化

优化基于文本的资产的编码和传输大小

咱们的网络应用在范围、目标和功能上都在不断增加。这是件好事！可是向着更丰富的网络无情进军的过程也推进了另外一种趋势：每一个应用所需下载的数据量也在持续稳步增加。为了提供卓越的性能，咱们须要优化每个字节数据的交付！html

数据压缩 101

在咱们消除了任何没必要要的资源以后，下一步就是将浏览器必须下载的剩余资源的总大小减至最小，即，对其进行压缩。根据资源类型（文本、图片、字体等），咱们有许多不一样的技术供咱们使用：能够在服务器上启用的通用工具，适用于特定内容类型的预处理优化，以及须要开发人员输入的特定于资源的优化。算法

要实现最佳的性能须要结合全部这些技术。浏览器

减少数据大小的过程称为’数据压缩’，而这自己就是一个须要深刻研究的领域：许多人终其一辈子致力于算法、技术和优化以提升各类压缩工具的压缩比率、速度和内存要求。勿需多言，对本主题进行全面讨论超出了咱们的范围，可是，在一个较高的水平上了解压缩的工做方式以及用于减少网页所需的各类资源的大小所能使用的技术，这还是很重要的。服务器

为了说明这些要推广的技术的核心原则，让咱们看看如何可以优化一个简单的短信格式（此格式仅仅是咱们为此示例所编造的）：网络




# 下面是一条秘密消息，它由一组标题组成
# 这组标题采用后面跟着一个新行和加密消息的键-值格式。
format: secret-cipher
date: 04/04/14
AAAZZBBBBEEEMMM EEETTTAAA

消息可能会包含任意注释，这些注释带有’#’前缀。注释不影响消息的含义或消息的任何其余行为。
消息可能会包含’标题’，这些标题是一些键-值对（用’:’分隔），且必须出如今消息的开头。
消息带有文本载荷。

咱们能作些什么来减少上述消息的大小（这条消息的长度目前为 200 个字符）？工具

嗯，注释颇有趣，但咱们知道它并不实际影响消息的含义，所以咱们在传送消息时会清除注释。
可能会有一些可用于以一种有效的方式对标题进行编码的智能技术，例如，咱们不知道是否全部消息始终都有’格式’和’日期’，但若是有，咱们能够将它们转换为短整 ID 并仅发送这些 ID！这就是说，咱们不确信是不是这种状况，所以咱们如今先不去管它。
载荷是仅文本，而咱们不知道其内容真正是什么（很明显，载荷使用一种’秘密消息’），只是看看文本，看起来在其中存在许多冗余。也许，不发送重复的字母，咱们能够仅对重复字母的数量进行计数，并更有效地对其进行编码，是这样吗？

例如，’AAA’变为’3A’，或者三个 A 的序列。

结合咱们的技术，咱们实现了下面的结果：性能

format: secret-cipher
date: 04/04/14
3A2Z4B3E3M 3E3T3A

新消息的长度为 56 个字符，这意味着咱们勉强作到将咱们的原始消息压缩达到了可观的 72% - 这个结果不坏，总而言之，咱们仅仅开了个头！字体

固然，您也许会怀疑，这已经很是好了，但这如何能帮助咱们优化咱们的网页呢？无疑，咱们不打算尝试编造咱们的压缩算法，不是吗？答案是不打算，咱们不会，但正像您将看到的那样，优化咱们网页上的各类资源时，咱们将使用几乎相同的技术和思考方式：预处理，特定于内容的优化，以及不一样的内容采用不一样的算法。优化

源码压缩：预处理和特定于内容的优化

压缩冗余或没必要要的数据的最佳方式是所有消除它。固然，咱们不能只是删除任意数据，但在某些状况下，咱们可能会有数据格式及其属性的特定于内容的知识，这时常常有可能显著减少载荷的大小而不影响其实际含义。网站

    <html>
      <head>
      <style>
         /* awesome-container is only used on the landing page */
         .awesome-container { font-size: 120% }
         .awesome-container { width: 50% }
      </style>
     </head>
    
     <body>
       <!-- awesome container content: START -->
        <div>…</div>
       <!-- awesome container content: END -->
       <script>
         awesomeAnalytics(); // beacon conversion metrics
       </script>
     </body>
    </html>

考虑以上的简单 HTML 网页和它所包含的三种不一样的内容类型：HTML 标记、CSS 样式和 JavaScript。其中每种内容类型针对构成有效 HTML 标记、CSS 规则和 JavaScript 内容的元素都有不一样的规则，有用于指示注释的不一样规则，等等。咱们如何能够减少此网页的大小？

代码注释是开发人员的最好朋友，但浏览器不须要看到它们! 简单地除去 CSS (/* ... */)、HTML () 和 JavaScript (// ...) 注释能够显著减少网页的总大小。
‘智能’CSS 压缩工具能够察觉到咱们正在使用一种无效方式为.awesome-container定义规则，并将两个声明折叠为一个而不影响任何其余样式，节省更多字节。
在 HTML、CSS 和 JavaScript 中，白空（空格和制表符）仅仅是为了开发人员方便。有一种附加的压缩工具能够去掉全部制表符和空格。

    <html><head><style>.awesome-container{font-size:120%;width: 50%}
    </style></head><body><div>…</div><script>awesomeAnalytics();
    </script></body></html>

在应用上述步骤以后，咱们的网页从 406 个字符变为 150 个字符 - 达到 63% 的压缩节省！确实，其可读性不是很好，但也并不是必须这样：咱们能够保留原始网页做为咱们的’开发版本’，而后并在咱们准备好在咱们的网站上发布该网页时再应用上述步骤。

退一步说，上述示例代表很重要的一点是：一个常规用途压缩工具（意即一个旨在压缩任意文本的压缩工具）也可能会很好地压缩上述网页，但它历来不会知道除去注释，折叠 CSS 规则，或进行许多其余特定于内容的优化。这就是预处理/源码压缩/上下文感知优化能够是如此强大的一个工具的缘由所在。

一样地，能够将上述技术扩展到超越仅基于文本的资产。图片、视频和其余内容类型都包含它们本身的元数据形式和各类载荷。例如，任什么时候候使用相机拍摄照片，照片一般也会嵌入许多额外的信息：相机设置、位置等。根据您的应用，此数据可能会很重要（例如，一个照片共享网站），或者彻底无用，您应该考虑是否应删除它。实际上，对于每张图片，此元数据加起来能够达到数十 KB！

简而言之，做为优化您的资产效率的第一步，请构建不一样内容类型的资源，并考虑您能够应用哪些种类的特定于内容的优化以减少其大小，这样作能够产生显著的节省！而后，在您肯定它们是什么以后，请当即经过将其添加到您的内部版本和发行版本流程来自动执行这些优化 - 这是您能够保证优化将保持原样的惟一方式。

使用 GZIP 进行文本压缩

GZIP 是一种能够应用于任何字节流的通用压缩工具：启动以后，该工具会记住其中一些先前看到的内容并尝试以一种有效的方式查找并替换重复的数据片断 - 好奇的用户能够查阅 [GZIP 的出色的低层次解释] (https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s)。可是，实际上，GZIP 对基于文本的内容压缩效果最好，对于较大的文件，一般会达到高达 70-90% 的压缩率，而经过其余替代算法对已压缩过的资产（例如，大多数图片格式）运行 GZIP 则收效甚微，甚至没有任何提升。

全部现代浏览器都支持并自动商定将 GZIP 压缩用于全部 HTTP 请求：咱们的工做是确保服务器获得正确配置，以在客户端请求时提供压缩的资源。

查看要推广的 GZIP 最快速、简单的方法是打开 Chrome DevTools 并检查’网络’面板中的’大小/ 内容’列：’大小’指示资产的传输大小，而’内容’指示资产的未压缩大小。对于上述示例中的 HTML 资产，GZIP 在传输过程当中节省了 24.8 KB！

不管您相信与否，会存在 GZIP 增长资产大小的情形。一般，在如下状况下会出现这种情形，当资产很是小且 GZIP 字典大于压缩节省的字节数时，或者当资源已获得很好的压缩时。某些服务器容许您指定一个'最小文件大小阈值'来避免此问题。

最后，用一句话做为提醒：尽管大多数服务器将资产提供给用户时会自动为您压缩资产，可是某些 CDN 须要特别当心，并须要手动操做以确保已提供 GZIP 资产。审核您的网站并确保您的资产实际上已进行压缩！