谷歌 Web 开发最佳实践手册(4.2.2):优化文本资源的编码和传输

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:我们的Web应用程序在规模、野心和功能上持续成长 ——这是一件好事。然而,向着更丰富的Web无情进军的过程,也推动了另一种趋势:每个应用程序下载的数据量也在持续稳步增长。为了提供强大的性能,我们需要优化每个字节的加载!

本课内容:

  • 数据压缩入门
  • 代码最小化:预处理和上下文特定的优化
  • 用GZIP压缩文本

1.  数据压缩入门

消除了不必要的下载资源,下一步就是尽量缩减需被浏览器下载的必须资源的规模——亦即压缩它们。资源的类型不同(文本、图像、字体等等),我们可使用的处理技术也不同:可在服务器上启用的通用工具,针对不同类型内容的预处理,以及需要开发者设定的针对特定资源的优化。

要提供最佳的性能,就需要将所有这些技术组合应用。

学习重点:

  • 压缩是将信息使用更少字节进行编码的过程
  • 消除不必要的数据总能产生最好的结果
  • 有许多不同的压缩技术和算法
  • 实现最好的压缩效果需要运用多种技术

减少数据大小的过程被称为“数据压缩”,它本身就是一个艰深的研究领域:很多人将整个职业生涯投入到算法、技术和优化的研究工作中,来提高各种压缩工具的压缩比、压缩速度,减少内存消耗。不必说,对这一主题的全面讨论已超出了本文的范围,但从一个较高的视角对压缩的原理进行理解、了解我们有哪些可用的压缩技术来处理页面所需的不同资源,也是十分重要的。

为了说明这些技术的核心原理是如何运行的,我们在下面的例子里创造一种只用于此例的文本信息格式,然后考虑如何去优化它:

  1. 消息可以包含任意的注释,由“#”前缀标出。注释不影响消息的意义或任何其他方面。
  2. 消息可包含“头信息”,这必须是一系列由“:”号分隔的key- value组合,并必须出现在消息的开头。
  3. 消息中携带纯文本有效载荷。

以上例子中的消息目前是200个字符,我们能做什么来压缩它的大小?

  1. 好吧,注释是很有意思,但我们知道它实际上并不影响消息的含义,所以在传送消息时,我们可以把这部分去掉。
  2. 对于头信息,我们或许能找到一些聪明的技术,将它更有效地编码——例如,虽然我们不知道是否所有头信息里都会包含格式(format)和日期(date),但如果是这样,我们就可以把它们转换成简短的整数ID,然后只传送这些ID!不过既然我们还不知道是不是这样,所以现在我们先不动它们。
  3. 消息的有效载荷是纯文本,虽然我们不知道它真正的内容是什么(很显然,它被加密了),但只观察这些文字,我们可以看到其中有很多重复的字符。或许我们可以不直接传送这些重复的字符,而是计算它们的重复次数,从而将这段文本更有效地进行编码?
    • 例如,将“AAA”编码为“3A”,表示一段由三个A组成的序列

结合以上四种技术,我们可以得到以下结果:

这新的消息长度为56个字符,意味着我们成功将原始消息压缩了72%,令人印象深刻 —— 总体看来,我们干得不错,而这才刚刚开始!

当然,你可能会想:这一切是挺厉害的,但它如何帮我们优化网页?我们应该不至于自己去创造压缩算法吧?的确,我们不会这么做。但你会看到,在优化网页的各种不同资源时,我们将使用与此完全相同的技术和思维方式:预处理、上下文特定的优化,以及对不同的内容使用不同的优化算法。

 

2. 代码最小化:预处理和上下文特定的优化

学习重点:

  • 针对特定内容来进行优化可以显著地减少所需下载的资源大小
  • 针对特定内容进行的优化最好作为构建/发布过程的一部分加以应用

压缩冗余或不必要数据的最佳方法就是完全消除它们。当然,我们不能只是随便删除任意数据,但在某些情况下,我们可能可以根据数据内容而对其格式和特性有所了解,进而有可能显著缩减其有效载荷,又不影响其实际意义。

查看完整例子
看看上面简单的HTML网页,它包含了三个不同的内容类型:HTML标记,CSS样式和JavaScript。针对它们各有不同的规则,来决定代码内容是否正确有效、代码的哪一部分被标记为注释内容,等等。那么,我们如何减少这个页面的大小?

  • 代码注释是开发者最好的朋友,但浏览器并不需要看到他们!简单地剥除CSS(/*…*/)、HTML(<!–…–>)和JavaScript(//…)的注释就可以显著减少页面的大小。
  • 一个“聪明”的CSS压缩工具可以“注意”到,我们给“.awsome-container”声明样式规则的代码使用了一种低效的写法,将这两个CSS代码块合并为一个,并不会对样式规则有任何影响,却节省了更多的字节。
  • HTML、CSS和JavaScript中的空白(空格和制表符),是只为开发者提供便利的。引入另外一个压缩工具,就可以去掉所有的空格和制表符。

查看完整例子

经过以上步骤, 页面的体积从406个字符缩减到了150个字符 —— 63%的压缩节省率!的确,代码的可读性下降了,但这也不是必须发生的:我们可以保持原来的页面作为“开发版”,而当我们准备好在网站上发布这个页面时,再对它运行上面的步骤进行压缩。

退一步看,上面的例子证明了一个重要的观点:虽然一个通用的压缩工具——比如一个用来压缩任意文本的工具——也有可能对上述页面进行不错的压缩,但它却永远不会懂得剥除注释、合并CSS规则,或其他几十种针对特定内容的优化方式。这就是为什么预处理/最小化/根据上下文针对特定内容的优化,可以是一个如此强大的工具。

请记住

  • 一个有代表性的例子:jQuery的未压缩开发版本现在已接近300KB,而经过优化(删除注释等)的版本只有其三分之一左右的体积:约100KB。

同样地,上述技术的适用范围并不局限于文本资源。图片,视频和其他类型的内容,都包含了其各自不同形式的元数据和有效载荷。例如,当你用数码相机拍摄了一张照片,照片中通常就嵌入了很多的额外信息:相机设置、时间地点等。对不同的Web应用来说,这些数据有可能是关键性的(如一个照片分享网站),也可能是完全无用的,而你要考虑是否值得将它们去除。在实践中,这些元数据可能给每个图像资源增加多达几十KB的体积!

总之,优化资源加载效率的第一步,是做一个清单,列出所有资源的内容类型,考虑有哪些针对特定类型内容的优化手段,可被应用来缩减它们的体积——这样能显著地节约带宽!然后,将它们添加到你的构建发布流程里,进行自动化——这是保证让这些优化始终发挥作用的唯一途径。

 

3. 用GZIP压缩文本

学习重点:

  • GZIP用于压缩文本类资源——CSS,JavaScript和HTML——时表现最好:
  • 所有现代浏览器都支持GZIP压缩,并会自动要求它
  • 你的服务器需要配置为启用GZIP压缩
  • 使用有些CDN时需要特别小心,确保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%

上表列出了GZIP压缩给一些最流行的JavaScript库和CSS框架提供的节省率:从60至88%。请注意,代码最小化(在文件名中以“.min”标出)与GZIP联合起来,能取得更大的优化成果。

  1. 先使用针对特定内容的优化:CSS,JS和HTML代码最小化工具。
  2. 再对最小化后的资源进行应用GZIP压缩。

最好的部分是,启用GZIP是你能实现的最简单、收益率也最高的优化之一——遗憾的是,许多人仍然不记得去实现它。大多数服务器会帮你压缩你的内容,而你只需要验证下服务器配置是否正确,是否将GZIP压缩应用在了所有能从中受益的内容类型上。

什么是服务器的最佳配置? HTML5 Boilerplate项目包含了所有最流行服务器的配置示例文件,并附有每个配置和设置内容的详细注释:找到列表中你最喜欢的服务器的配置示例,查找GZIP部分,然后确定你的服务器配置符合其中的推荐配置。

来看看GZIP在实践中发挥作用,一个简单快速的方法就是打开Chrome开发人员工具,查看网络面板中的“大小/内容(size/content)”一列:“大小”表示实际传输的资源大小,而“内容”表示资源未经压缩的大小。在上面的例子中,GZIP压缩给HTML资源的传输节省了24.8 KB![译者:别问我这个24.8是怎么算出来的。。。]

请记住

  • 不管你信不信,在某些情况下GZIP反而导致资源的增大。这通常发生在以下情况:该资源本身非常小,或已经进行过很好大压缩,而GZIP dictionary增加的开销就超过了压缩所能节省部分。有些服务器允许你指定一个“应用压缩的最小文件大小”,以避免这个问题。

最后再提醒一句:虽然大部分服务器在传送资源给用户都时会自动替你压缩,某些CDN却需要你的特殊留意和手工设置,来确保传送的资源经过GZIP压缩。审核你的网站,确保你的资源确实好好压缩过了

收藏 评论

关于作者:兔米酱

飘在德国的前端攻城女狮子!(新浪微博:@兔八百) 个人主页 · 我的文章 · 2

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部