connect-cachify Node.js 英文原文：Fantastic front-end performance Part 1

在“A Node.JS Holiday Season”系列丛书的这一章中，我们将会讨论一些前端性能和介绍一些基于Mozilla的快速开发工具。

我们将要使用前段性能自动化中非常重要的工具之一的connect-cachify。

开始之前，让我们简要重述一下作为开发者如何让机器运行的更稳定。如果你已经了解前端最优化的方法，请跳过前面的部分，了解如何使用connect-cachify完成自动化功能。

3c 客户端性能优化

网站上到处都是与性能优化相关的最佳实践的信息。虽然存在许多先进的技术可以为你的网站调整每一毫秒,但有三种基本工具是最基础的——连接、压缩和缓存。

连接

连接的目标是尽量减少对服务器发出的请求数量。服务器请求是昂贵的。建立一个HTTP连接所需的时间有时比传送数据本身所花的时间还要多。每个请求增加很多用于检测你的网站的开销，尤其是在移动设备上，这会造成显著的连接延迟。你是否用手机通过Edge网络浏览过一个购物网站，上面的图片一个一个蹦出来？这就是连接延时的现象。

SPDY是一个构建在HTTP协议之上的新协议，旨在通过合并多个资源请求到一个单一的HTTP请求来减少页面加载时间。不幸的是，目前只有最新版本的Firefox、Chrome和Opera浏览器支持这个新协议。

尽可能的合并外部资源，可能方法过时，但是可以跨浏览器工作，并且不会因为SPDY的到来而退化。已经有很多用来合并JavaScript、CSS和图片这三种最常见外部资源的工具。

JavaScript & CSS

当一个网站有多个外部的JS时，需要把他们合并成一个文件。在JS加载完成前，浏览器会阻止掉所有的渲染。（也就是你看不到JS的效果)。被请求的JS文件将会出现延迟，比如执行下面的代码将会花费更长的时间。

  <script src="jquery.min.js"></script>
  <script src="main.js"></script>
  <script src="image-carousel.js"></script>
  <script src="widget.js"></script>

把四个Js文件整合成一个，将会减少延迟时间。（像下面这样）

<script src="main.production.js"></script>

使用整合过的JS有一点难度，所以大多数情况下，使用在正式的项目中。

Css和进程也是一样，在做项目的时候也应该整合到一起。

Images

Data URIs和image sprites减少请求图片的两种基本方法。

data: URI

data URI一个URL的特殊形式，直接把图片嵌入到HTML或者CSS里面。Data URIs可以作为img的src标签或者是CSS中background-image的url值。因为嵌入图片是基于base64编码的，所以他们需要更多的空间，好处是比之前的二进制图像少了一次HTTP请求。所以，当要嵌入的图片很小时，由于图片编码产生的大小往往被减少一次HTTP请求所抵消。

注：IE6和IE7都不支持 data URIs

Image sprites

Image sprites在data URI不能用的时候会是一个很好的选择。image sprite是用很多小图像组合而成的一张大图片。一旦这个图片生成后，CSS就可以用来显示指定部分的图片。许多工具都是用来做这种图片的。

缺点是维护起来麻烦，当你要添加、删除或者修改一个图片时，你需要修改其对应的CSS。

Sprite Cow帮你获得sprites 的 background-position, width and height并生成一个可复制的css表。

删掉多余的字节 – 精简，优化，压缩

组合资源，减少访问次数可以有效的提升访问速度，除此之外，也应该精简向用户传递的数据。 精简，优化，压缩也是减少字节的通常做法。

JavaScript & CSS

JavaScript和CSS作为文本资源，可以通过去除浏览器中无关的代码实现精简。一般情况下，JS和CSS采用的方法是删掉多余的注释和空格。JS的精简更加复杂，一些人删掉命名规则中的不必要的部分，把变量的命名缩短，甚至有人用更短的代码替换较长的代码来实现。

UglifyJS，YUICompressor还有Google Closure Compiler是三个常用的JS精简工具。

YUICompressor and UglifyCSS是两个CSS精简工具。

Images Optimization

图片中包含一些数据，移除也不会影响视觉效果。清除这些数据需要专业的图片处理工具。我们的Francois Marier写了两篇博客文章讲解处理PNG图片和GIF图片。

Smush.it是雅虎的在线图片优化工具。OSX的离线工具ImageOptim也有同样的功能-将图片拖入，工具自动优化图片文件大小。ImageOptim还可以用处理后的小文件替换原始文件。

如果可以接受视觉效果的适度损失，高压缩比重新压缩图片也是可行的。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务