zhuan : http://www.oschina.net/translate/fantastic-front-end-performance
在“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文件将会出现延迟，比如执行下面的代码将会花费更长的时间。
把四个Js文件整合成一个，将会减少延迟时间。（像下面这样）
使用整合过的JS有一点难度，所以大多数情况下，使用在正式的项目中。
Css和进程也是一样，在做项目的时候也应该整合到一起。 Images Data URIs和image sprites减少请求图片的两种基本方法。 data: URIdata 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还可以用处理后的小文件替换原始文件。 如果可以接受视觉效果的适度损失，高压缩比重新压缩图片也是可行的。
服务器也可以帮忙! 除了合并和缩小资源外，还有其他办法。几乎所有的服务器和浏览器都支持 HTTP 压缩 功能。最受欢迎的两种压缩方案是使用 deflate 和 gzip。在数据被服务器传送到客户端前，这两种方案都使用了高效的压缩算法来压缩被传送的资源以达到减少传送数据的目的。
|
6004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
