前端性能优化指南 已翻译 100%

Jeky 投递于 2013/01/16 14:06 (共 21 段, 翻译完成于 01-18)
阅读 4952
收藏 144
10
加载中

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

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

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

Naixjs
Naixjs
翻译于 2013/01/17 13:17
3

3c 客户端性能优化

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

Tom-Lin
Tom-Lin
翻译于 2013/01/17 12:01
2

连接

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


Tom-Lin
Tom-Lin
翻译于 2013/01/17 14:01
2

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

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

刀哥
刀哥
翻译于 2013/01/17 15:33
2

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和进程也是一样,在做项目的时候也应该整合到一起。

Naixjs
Naixjs
翻译于 2013/01/17 13:43
2
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

Naixjs
Naixjs
翻译于 2013/01/17 15:03
2

Image sprites

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

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

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

Naixjs
Naixjs
翻译于 2013/01/17 15:30
2

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

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

Naixjs
Naixjs
翻译于 2013/01/17 15:40
2

JavaScript & CSS

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

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

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

Naixjs
Naixjs
翻译于 2013/01/17 14:29
2

Images Optimization

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

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

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

傅小黑
傅小黑
翻译于 2013/01/17 17:22
3
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(4)

c
cindyYLQ
很有用。
maoxiajun
maoxiajun
感谢,期待下篇
zzxworld
zzxworld

引用来自“Hanks”的评论

great and thx the hard works.

感谢各位卖命的翻译,很好。
Hanks
Hanks
great and thx the hard works.
返回顶部
顶部