有效优化内容

优化编码以及文本资源传输体积。

我们的网页应用的内容、目标和功能都在不断成长 - 这样很好。然而,我们拼命地让这个网站不断丰满,却导致了另一个趋势:每个应用中的每个步骤所下载的数据总量不断上涨。为了实现优异性能,我们需要优化每一比特数据的传输过程!

数据压缩第一课

一旦我们去掉了那些多余的资源,下一步就是将那些需要浏览器下载的剩余资源的总体积最小化,也就是压缩它们。资源类型不同,我们也有多种不同方式来进行处理:服务器上可运行的一般工具,特殊类型内容的预处理优化,以及需要开发者输入的资源特定优化。

需要所有这些技术的综合运用才可以实现最佳性能。

关键要点

  • 压缩式一种编码信息的处理,以便占用少一些的比特位
  • 消除不必要的数据总能得到最好的结果
  • 有许多不同的压缩技术和算法
  • 你可能需要用到不同的技术来达到最好的压缩

减小数据体积的方法被称作“数据压缩”,它本身是一门深奥的学问:很多人终其一生去研究算法、技术,优化它们来提升压缩率、速度和多种压缩工具的内存消耗。无需赘言,这个话题已经超出了我们所需涉猎的范围,但是我们必须从一个高层次上去理解压缩的工作原理,以及在缩减我们的页面中各种资源的体积时,其所需的技术。

为了阐明这个过程中的核心原则,让我们来思考一下下例,要如何优化这样一个简单的文本格式的信息:

# 下列是一份密码消息,它是由一组键值格式的头信息
# 及其之后跟随的一个换行和一个加密信息组成。
format: secret-cipher
date: 04/04/14
AAAZZBBBBEEEMMM EEETTTAAA
  1. 信息有可能会包含各种注释,它们都有“#”前缀。注释不影响信息的含义或者其他表达。
  2. 信息有可能会包含“头信息”,它们是一些出现在信息最前面的键值对(由“:”分隔)。
  3. 信息携带文本的有效载荷。

我们能对这段目前200个字的信息做些什么,才能缩减他们的体积呢?

  1. 好吧,那些注释很有意思,不过我们知道它实际上对信息的意义一点影响都没有,所以当我们传输这段信息的时候,丢掉它。
  2. 有一些有效的方法可以编码头信息,我们可能可以用这些精明的技术。比如:我们不知道是不是所有的信息都有“format”和“date”,如果是的话,我们可以将其转为换为一个更短的ID,到时候只要输送ID就行了!不过我们也不能确定是不是这样,所以暂时就先这样不管它。
  3. 有效载荷只有文字,而且我们不知道这段文字内容到底是啥意思(很显然,他是个“密码消息”),只看这段文字本身的话,感觉它好像是有很多荣誉。也许我们可以数一下重复字母的数量,然后更有效地编码它们,而不是传送重复的字母?
    • 比如“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规则,或者其他几十种针对特定内容的优化方式。这就是为什么预处理/最小化/分析上下文压缩是一个如此强大的工具。

谨记

  • 举例,jQuery库的未压缩的开发版本是现在接近~300KB。同一个包,压缩后(移除注释等)是约3倍小:~ 100KB。

同样地,上述技术不仅适用用于文本资源。图像、视频和其他的内容类型都有它自己的元数据及有效载荷的格式。例如,当你用数码相机拍了一张照片,照片中通常也会嵌入了大量其他信息:相机设置、拍摄位置以及其他。对于你的应用来说,这些数据有可能是至关重要的(比如对于一个相片分享网站),也有可能是完全没用的,此时你就应该考虑是否值得要将它们完全去除。在实际中,这些元数据会给每个图像增加多达几十KB的体积!

简单来说,有效优化你的资源的第一步是做个清单,清单中要列出不同内容类型和你能用到怎样的特定内容优化方式来减小它们的体积——这样就能显著节省带宽!然后,当你确定了这些优化方式之后,将其加入到你的构建发布流程中,使其成为自动优化。只有这样才能保证这些优化始终有用。

使用GZIP压缩文本

关键要点

  • GZIP在 CSS, JavaScript, HTML上表现最好。
  • 所有支持GZIP压缩的现代浏览器会自动请求压缩。
  • 你的服务器需要设置为支持GZIP压缩。
  • 一些CDNs需要特别的处理,以保证GZIP能使用。

GZIP是一个可以应用在任意比特流上的通用压缩器:它运行时会记住之前见过的内容,然后会试图通过一种有效的方式查找并替换那些重复的数据碎片。如果你很好奇,可以看看 最佳的GZIP通俗解释。然而,在实际应用中,GZIP对文本内容有着最佳表现,对于大型文档来说,压缩率通常可以高达70%-90%,然而对于那些已经通过其它算法压缩过的资源(比如大部分图像格式)来说,GZIP基本上帮不上什么忙。

所有的现代浏览器都支持GZIP,并且自动对所有HTTP请求通过GZIP压缩:我们的工作是确保服务器配置正确,以便当客户端请求压缩资源时就能够提供。

体积 压缩后体积 压缩比例
jquery-1.11.0.js 276 KB 82 KB 70%
jquery-1.11.0.min.js 94 KB 33 KB 65%
angular-1.2.15.js 729 KB 182 KB 75%
angular-1.2.15.min.js 101 KB 37 KB 63%
bootstrap-3.1.1.css 118 KB 18 KB 85%
bootstrap-3.1.1.min.css 98 KB 17 KB 83%
foundation-5.css 186 KB 22 KB 88%
foundation-5.min.css 146 KB 18 KB 88%

上面的表格展现了部分目前最流行的JavaScript库和CSS框架经过GZIP压缩的成果。节省范围从60%到88%,请注意,代码最小化(在文件名中用“.min”标识)和GIZP的结合使用可以取得更好的效果。

  1. 首先使用特定内容优化:CSS、JS和HTML最小化工具。
  2. 使用GZIP压缩最小化的资源。

最好的是,GZIP是可以应用的最简单也是收益最高的压缩手段之一,可惜的是,很多人都忘了去应用它。大部分服务器会为了你的利益压缩内容,你只需要检查服务器是否配置正确,以保证它能去压缩那些可从GZIP压缩中受益的内容类型。

你的服务器的最好的配置是什么?HTML5 Boilerplate项目囊括了所有最流行的服务器示例配置文件,并附有每个配置和设置的详细注释:找到列表中你最喜欢的服务器,寻找GZIP部分,然后确定你的服务器按照推荐设置配置。

DevTools demo of actual vs transfer size

一个简便快捷的查看GZIP的实际作用的方式是打开Chrome开发人员工具,在网络(Network)面板中查看大小/内容(Size/Content)列:“大小”表示资源的传输大小,“内容”表示资源未经压缩时的大小。GZIP压缩使上例中的HTML资源在传输中减少了24.8KB!

Remember

  • 相信与否,有些情况下,gzip会增加资源的大小。通常,这发生在当资源是非常小时gzip压缩会使用更多的存储,或资源已经被压缩的情况下。一些服务器允许您指定“最小文件大小阈值”避免这一问题。

最后,再提醒一句:尽管大多数服务器在传送资源给用户的时候会自动为你压缩它们,但某些CDN会需要格外注意,并手工设置提供GZIP资源。检查你的网站并保证你的资源确确实实 压缩了!

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部