Web应用性能优化黄金法则：先优化前端程序(front-end)的性能，因为这是80%或以上的最终用户响应时间的花费所在。

法则1. 减少HTTP请求次数

80%的最终用户响应时间花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash等，的下载上。减少页面元素将会减少HTTP请求次数。这是快速显示页面的关键所在。

一种减少页面元素个数的方法是简化页面设计。但是否存在其他方式，能做到既有丰富内容，又能获得快速响应时间呢？以下是这样一些技术：

Image maps组合多个图片到一张图片中。总文件大小变化不大，但减少了HTTP请求次数从而加快了页面显示速度。该方式只适合图片连续的情况；同时坐标的定义是烦人又容易出错的工作。

CSS Sprites是更好的方法。它可以组合页面中的图片到单个文件中，并使用CSS的background-image和background-position属性来现实所需的部分图片。

Inline images使用data: URL scheme来在页面中内嵌图片。这将增大HTML文件的大小。组合inline images到你的（缓存）样式表是既能较少HTTP请求，又能避免加大HTML文件大小的方法。

Combined files通过组合多个脚本文件到单一文件来减少HTTP请求次数。样式表也可采用类似方法处理。这个方法虽然简单，但没有得到大规模的使用。10大美国网站每页平均有7个脚本文件和2个样式表。当页面之间脚本和样式表变化很大时，该方式将遇到很大的挑战，但如果做到的话，将能加快响应时间。

减少HTTP请求次数是性能优化的起点。这最提高首次访问的效率起到很重要的作用。据Tenni Theurer的文章Browser Cache Usage - Exposed!描述，40-60%的日常访问是首次访问，因此为首次访问者加快页面访问速度是用户体验的关键。

我们的应用:

外贸: 将首页的几十个小图标合并为一个，通过CSS控制它们的显示，减少了HTTP请求数。

　　很多设计师都会遇到这样的问题。一个产品会有很多种方式去包装，其中包括很多功能和很多体验。功能越多会被认为越实用，体验越好会被认为越方便。

　　方便和实用之间到底是什么关系，设计师应该关注的是什么？有两点，一点是技术体验，一种是交互体验。作为一个交互设计师，要去考虑的更多是体验的问题，而并非功能的问题。

　　举个例子，在一个移动媒体上需要安放日历的插件，设计师会去考虑在基础的日历功能上要不要加上农历，这个对于中国人来讲很实用，然而农历这个功能涉及到了技术的开发，算是一种技术瓶颈。当你发现技术无法完成你的要求时（当然农历这玩意儿对于中国山寨机来讲算是小菜一碟），你的日历插件依然是一个平庸的产品，这说明你没有关注技术体验。但是你换个角度来看，如果把日历上以星期一开头还是以星期天开头作为你设计研究方向的话，你会发现，中国人更习惯于星期一开头，这个在体验上给用户带来更多的价值，而且也不算是一个技术瓶颈，你也满足了技术体验和交互体验的结合。

　　说到这里，大家应该明白方便比实用更体现设计的价值。

　　刚才说的山寨机就是把一大堆功能都罗列在里面，虽然很实用但是每个都不好用，种种问题还是让很多人选择了高端的品牌，高端的体验，这就是设计的力量。

　　作为一个设计师，不要一直依赖自己无法掌控的功能去实现自己的设计，老是天花乱坠的想着各式各样的功能去满足用户，从商业成本和用户满足感去讲都不是一个好的设计。越来越多的交互设计师感觉到自己没有什么作品，那是因为你依赖太多不是自己开发的功能，往往产品中只有你一点想法的影子，产品并没有被你的设计情感化。

　　实用并非等于方便，但方便一定是实用的。

　　记得还是06年上半年，也是我刚毕业那会儿，同事给我看了NewWebPick第三期，现在还记忆犹新，完美的翻书效果、视频、音乐、文字、动画、漂亮插画...当时觉得很兴奋，当然也不知道如何实现。

　　其实NewWebPick绝对算是电子杂志的前辈，我想也有很多朋友和我一样，是被它她的完美所打动，大家对电子杂志的认识也应该从那个时候开始。

　　目前制作电子杂志的方法很多，详情请参考电子杂志制作软件大全，当然这还只是06年的资料，以上方法虽然能够实现电子杂志的效果，但是我确实不敢恭维啊，效果太差，可控性太弱，完全的模板机制，还给你打上个版权之类的，实在是不能忍受...

　　推荐一个吧，FlippingBook国外的组建，官网http://flippingbook.com/ 很好用，但前提条件是你得懂as2.0，因为你要进行二次应用开发。我觉得这个应该比NewWebPick的核心好或者NewWebPick本来就是用FlippingBook的组件。网络上有FlippingBook1.8.6版本提供下载，我看都是些免费版，功能很弱，核心代码大概只有2400行，官方上有最新的1.8.9版本，核心代码大概有4000行。当然效果也好多了，如果要购买的话，费用大概在1600RMB，我这里向大家提供1.8.6版本下载。 当然我并不推荐大家使用免费版，还是支持正版吧！

　　下载FlippingBook翻页组件

IE6不支持PNG半透明图片的缺陷为web设计带来了极大的不便，之前曾经介绍过用滤镜+hack的方法实现显示PNG，不过实现起来相当繁琐。还有一种网上比较流行的方法，更加简便，下面详细介绍这种方法：

把以下代码保存为correctpng.js

在网页的头部引用一下

PNG ( Portable Network Graphics ) 格式的无损压缩和半透明特性对增强网页效果减少网页体积有着重要的作用，但由于 IE6 不支持 PNG，所以一直未能得到广泛的应用。虽然 IE7 已经支持 PNG，但目前 IE6 还是主流，怎么样让 IE6 也使用 PNG 呢？网上有相关的介绍，下面我也尝试做一下介绍，希望在表达上能更加通俗易懂。

IE5.5+ 的 AlphaImageLoader 滤镜为 PNG 提供良好的支持，虽然 IE5.0 无法支持，但毕竟是非常非常小的一部分，将来会更小，因此我们不考虑。

滤镜的语法：

属性：

enabled: 可选项，布尔值(Boolean)。设置或检索滤镜是否激活。true | false

true: 默认值，滤镜激活。

false: 滤镜被禁止。

sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

crop: 剪切图片以适应对象尺寸。

image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

scale: 缩放图片以适应对象的尺寸边界。

src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

使用方法：

Firefox，Opera 支持 PNG ，使用“>”子选择器识别，而IE不识别该选择器（包括IE7）。

虽然 IE7 支持 PNG，但方便起见，还是采用滤镜，使用通配符“*”，该通配符只有 IE 才能识别。

不过使用该滤镜，区域内的超链接按钮等将会失效，解决办法？使用“position”使它们浮在上面。