存档

文章标签 ‘Optimize’

雅虎再谈WEB前端网站优化

2009年9月17日 1 条评论

转自:品位雅虎

雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像)。

1.Minimize HTTP Requests 减少HTTP请求

图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位。
2.Use a Content Delivery Network 利用CDN技术

CDN 确实是好东西,8过服务器提供商的这项服务一般是要收费的,我以前买的国内空间是有这个的但是我当时根本不知道啥用,现在没了。。。
3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存

浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。不过这样如果 页面里的东西变动的话就要改名字了,否则用户端不会主动刷新,看自己衡量了~ 这项可以通过修改.htaccess文件来实现。
4.Gzip Components Gzip压缩

Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%。压缩没压缩,可以到 这里 做下测试。
5.Put Stylesheets at the Top 把CSS放顶部

让浏览者能尽早的看到网站的完整样式。
6.Put Scripts at the Bottom 把JS放底部

网站呈现完毕后再进行功能设置,当然这些JS要在你的加载过程中不影响内容表现。

7.Avoid CSS Expressions 避免CSS Expressions

CSS表达式很可怕,这个只被IE支持的东西执行时候的运算量非常大,你移动一下鼠标它都要进行重计算的,但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死!~
8.Make JavaScript and CSS External 将JS和CSS外链

前面讲到了缓存这个事情,一些较为公用的JS和CSS,我们可以使用外链的形式,譬如我就是从Google外链来的Jquery文件,如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件,那么他在浏览我的网站的时候就不需要再进行下载了!~
9.Reduce DNS Lookups 减少DNS查找

貌似是要减少网站从外部调用资源,我的Google分析和picasa的外链图片都算在里面了。
10.Minify JavaScript and CSS 减小JS和CSS的体积

写JS和CSS都是有技巧的,用最少的代码实现同样的功能,减少空白,增强逻辑性,用缩写方式等等,当然也有不少工具也能够帮你实现这一点。
11. Avoid Redirects 避免重定向

再写入链接时,虽然”http://www. today-s-ooxx. com”和”http://www. today-s-ooxx. com/” 仅有一个最后的”/”只差,但是结果是不同的,服务器需要花时间把前者重定向为后者然后进行跳转,这个要自己注意,也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。
12. Remove Duplicate Scripts 删除重复脚本

重复调用的代码浏览器并不会识别忽略,而是会再次运算一遍,这当然是大大的浪费。
13. Configure ETags 配置ETags

搞不清楚咋回事,总之我是在. htaccess里把它删除了。
14. Make Ajax Cacheable 缓存Ajax

Ajax是实时响应的,在浏览器接收到新的数据前,旧的数据被缓存,这样能够更好的提高效率。
15. Flush the Buffer Early 尽早的释放缓冲

当用户进行页面请求时,服务器端需要花费200到500毫秒时间来拼合HTML,将写在head与body之间,释放缓冲,这样可以将文件头先发送出去,然后再发送文件内容,提高效率。
16. Use GET for AJAX Requests 用GET方式进行AJAX请求

Get 方法和服务器只有一次交互(发送数据),而 Post 要两次(发送头部再发送数据)。
17. Post-load Components 延迟加载组件

最先加载必须的组件进行页面初始化,然后再加载其他,YUI Image Loader 是很好的例子。
18. Preload components 预加载组件

提前加载以后可能用到的东西,和延迟加载并不冲突,它的目的是为后续请求提供更快的响应,参见Google首页上的CSS sprites应用。
19. Reduce the Number of DOM Elements 减少DOM元素数量

复杂的页面结构意味着更长的下载及响应时间,更合理更高效的使用标签来架构页面,是好的前端的必备条件。
20. Split Components Across Domains 跨域分离组件

页面组件多个来源可以增大你的平行下载量,但注意不要过多,超过2-4个域名会引起上面说到的DNS查找浪费。
21. Minimize the Number of iframes 减少iframe数量

需要更有效的利用 ifames。
iframe 优点:有利于下载缓慢的广告等第三方内容,安全沙箱,并行下载脚本
iframe 缺点:即使为空也会有较大资源消耗,会阻止页面的onload,非语义
22. No 404s 不要出现404页面

站点本身里(非搜索结果)出现404页面,无意义的404页面会影响用户体验并且会消耗服务器资源。
23. Reduce Cookie Size 减小Cookie

Cookie在服务器及浏览器之间的通过文件头进行交换,尽可能减小Cookie体积,设置合理的过期时间,能够很好的提高效率。
24. Use Cookie-free Domains for Components 对组件使用无Cookie的域名

对静态组件的Cookie读取是一种浪费,使用另一个无Cookie的域名来存放你的静态组件式一个好方法,或者也可以在Cookie中只存放带www的域名。
25. Minimize DOM Access 减少DOM的访问次数

JS访问DOM是很慢的,尽量不要用JS来设置页面布局。
26. Develop Smart Event Handlers 开发灵活的事件处理句柄

DOM树上过多的元素被加入事件句柄的话,反应效率肯定会低,YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄
27. Choose < link >over @import 使用< link >而非 @import

在IE中使用@import就和在页面底部用< link >一样,我们前面说要把< link >放顶部的。
28. Avoid Filters 避免过滤器的使用

如果需要Alpha透明,不要使用AlphaImageLoader,它效率低下而且只对IE6及以下的版本适用,用PNG8图片。如果你非要使用,加上_filter以免影响IE7+用户。
29. Optimize Images 优化图片

将你的GIF转为PNG8会是个减小体积的好办法,另外有很多方法处理你的JPG及PNG图片以达到优化效果。
30. Optimize CSS Sprites 优化CSS Sprites

在CSS Sprites中竖直并尽量紧凑的排列图片,尽量将颜色相似的图片排在一起,会减小图片本身的大小及提高页面图片显示速度。
31. Don’t Scale Images in HTML 不要在HTML中缩放图片

图片要用多大的就用多大的,1000X1000的图片被width=”100″ height=”100″以后,本身的KB数是不会减少的。
32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它

站点的浏览器ICO应该不是经常换吧,那就长时间的缓存它,并且最好控制在1K以下。
33. Keep Components under 25K 保证组件在25K以下

iPhone不能缓存25K以上的组件,并且这还是要在被压缩前。
34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中

就好像在邮件中加入附件一样,一个HTTP请求就够了,但是这一技术需要确保你的代理支持,iPhone就不支持。

Database Optimize patterns

2009年5月27日 没有评论

Most of websites and enterprise application rely on the database backing them to store the application and customer data. So at some point the database could be the main performance and scalability bottleneck for your system performance, so I ‘m here today to cure this!
Database supporters and resisters:
Database supporters: MySQL, SQL Server, and PostgreSQL:

MySQL, SQL Server, PostgreSQL, and others is hard competitors, everyone have different philosophy, and features.
For example, SQL Server have rich features such as: support UTF16 in the data types, triggers, roles and policies, and integration with .NET, etc. MySQL: Free and open source, many database engines. PostgreSQL: Free and open source, support object-oriented data model.

What about the performance?

The Database performance is important. In the real and trusted performance benchmark: MySQL faster than SQL Server, and PostgreSQL have good performance better than SQL Server, and almost like MySQL. Also PostgreSQL, MySQL have small footprint, and consume small system resource.
Database resisters: HBase, MongoDB, Redis, and others:

Does all application really need databases backing them?
I believe there is no option can fit in all situations, so not all applications need database. The golden wisdom (in my opinion) said: Every challenge has its own solution.
There are many scenario will agreed with Database resisters, such as: Web search engine, Caching, File sharing, etc. In the other hand there are a lot of scenarios agreed with Database supporters, such as: ERP, CRM, E-Commerce, etc.

Tiny URL services for example, shouldn’t use Database at all because it’s require very simple needs map a small/tiny URL to the real/big URL. But what we can use beside or instead of Databases?
There are a lot of tools that fallowing CAP, BASE model, instead of ACID model. CAP model is about:

* Consistency – your data is correct all the time. What you write is what you read.

* Availability – you can read and write and write your data all the time.

* Partition Tolerance – if one or more nodes fails the system still works and becomes consistent when the system comes on-line.

For example in any in-memory or in-disk caching system you will never need all the Database features. You just need CAP like system. Today there are a lot of Documents, and key-value based store systems, such as:

* MongoDB Document oriented

* CouchDB Document oriented (JSON)

* Redis Key-value oriented

* Tokyo Cabinet Key-value oriented

* Memcached in-memory, Key-value oriented

The above list can work in many scenarios, and they provide good performance more than the Databases, and most of them support distributed, partitions, and they also provide good fault tolerance algorithm.
I know after all this there are still people say; Why CAP model or key-value store system, the database is good?

The Database is often a performance- and scalability limiting factor in most types of applications, the reality is that relational databases have not changed much in the last 30 years, and for a lot of purposes using a database is akin to running an interstellar spaceship while having an old Volkswagen engine in the engine room!
So the first lesson today is: Consider use Key-value store system depend on your needs.
Database Optimizing pattern:
What to store into the Database?

lot of people in our industry think about the Database as fundamental, default, primitive disk based store system, but this is wrong there are too many ways to store the data; beside that you shouldn’t store anything into the Database. In other word, don’t store non-relational data in relational data model.
For example if you design a photo sharing website, you shouldn’t store the thumbnails photos into the Database because simply when some user search the brewer will send a lot of requests to view this photos, and making a lot of DB connections is not good, beside this the DBMS will make this process heavy because the DBMS is complex system by nature.
So you should think twice before use the Database to store BLOB data.

Field data types:

In any DBMS you can found many kind of data types, such as: Date, Time, DateTime, Text, BLOB, VarChar, NVarCar (in SQL Server), and so on. If you choice the right data type this will make the database use lower disks space, and the insert/retrieve will run faster. But why I choice think about it? The Database by nature resides in disks and such disks are slow, so if you minimize the size of the stored data this will improve the write and read time. For example don’t use NVarChar data type except if you really need 16 bits Unicode (UTF 16). Also be watchful when you choice Text, NText, BLOB data type because mostly it will store in another location and the row will just hold the a reference to data position, so when you retrieve the data the DBMS will do a lot of seeks.
The primary key and the indexes:

We usually use it to optimize the retrieve, insert, update, and delete operations in the tables. Create a primary key on each table you create and unless you are really knowledgeable enough to figure out a better plan, make it the clustered index.
It’s important to minimize the primary field size and make the inserting always at the end of the table (i.e. make the value of the primary key field always increasing); I suggest use integer and auto increment in the primary key field if it’s possible.

To start with create your indexes; you need to plan an indexing strategy at the same time as you plan and design the database. First, and most important, is the clustered index (Primary key). As a rule, every table in an online transactional processing (OLTP) system should get a clustered index. You can only put one clustered index on a given table, so the proper selection of exactly what column or columns to place it on is extremely important.

It makes sense to leave the cluster on the primary key if that primary key provides the natural access path, the most common field used to either search the table or relate the table to another.
Changing the parameters slightly, if the access path is mostly through another column, says Company Name, this may make a more appropriate clustered index. Another situation is when the table is no longer at the top of the chain, but somewhere in the middle and the most likely avenue of selection for the data is going to come through the foreign key to a parent table. Then the foreign key column becomes a good candidate for the clustered index. A further wrinkle could be added by needing to get the related data in this child table, but based on a date. This would result in a clustered index composed of two columns: the foreign key and the date. As you can see, in a few sentences a number of options were laid out. You need to think this through as you design the system.

You may also identify, either during design, testing or monitoring the production system, that other indexes are needed. While multiple indexes on any given table may be needed, you need to keep in mind that each index adds overhead to the system because these values have to be maintained as the data gets modified, which includes inserts, updates and deletes. Further, since indexes are stored by pointing to the clustered index (one of the many reasons you need a clustered index on the table) changes to the clustered index can result in a cascade through all the other indexes on a table. Because of all this, while indexes are good and necessary, restraint must be exercised in their application & use.
Data retrieve, SP’s, and Ad-hoc queries:

When you submit Ad-hoc query to the DBMS, a number of processes on the server go to work on that query. The purpose of all these processes is to manage the system such that it will provide your data back to you, or store it, in as timely a manner as possible, whilst maintaining the integrity of the data. The processes actually take a time, some time it’s take long time depend on your query complexity.
So I suggest using SP (stored procedure) because most of those steps happen statically at compile time (i.e. creation time). For example you can in .NET – LINQ to SQL to import SPs and call it, and using a few changes you can also enforce the LINQ to SQL to use SPs in any insert, update, and delete operation for better performance.

Minimize the Ad-hoc queries will make you gain some performance but we can’t enforce the developers to forget this important feature. Beside create SP’s for the complex queries and the usually insert, update, delete operations; I suggest monitoring and tuning the Ad-hoc queries execute plans at stabilization and testing stage.
In general try to do the following:
- It’s important to return/select the columns and rows you need only.
- Avid using Like operation because it’s mostly require full table scan.
- Avoid NOT IN, instead use a left outer join – even though it’s often easier to visualize the NOT IN.
- Consider use set nocount on at the top of each SP (and set nocount off) at the bottom.
- Avid Long-Running, and the distributed transactions.
Caching:

Caching is fundamental thing in reading intensive application, also caching is important in writing intensive application. If your DBMS support caching system, such as Query Caching in MySQL I suggest to turn it on.
Caching the not rapidly changing data such as: Logged-in user’s roles, top most posts, configuration, and Categories into the client/application server memory also is important to minimize the traveling to the server.

Google网站架构分析

2009年5月3日 1 条评论

googleGoogle是可伸缩性之王。每个人都知道Google是因为他们对大量,复杂信息的快速搜索,但是Google的技术并不只是在搜索领域闪闪发光。他们构建大型应用的平台方式能够让他们以惊人的竞争速度在网络规模应用上面大展拳脚。Google的目标一直是构建更高性能更高规模基础设施来支持他们的产品。他们怎么做到的呢?

参考资料以及信息来源
视频:在Google上构建大型系统 (Video: Building Large Systems at Google)
Google实验室:Google文件系统 (Google Lab: The Google File System)
Google实验室:MapReduce:在大规模集群上简化数据处理 (Google Lab: MapReduce: Simplified Data Processing on Large Clusters)
Google实验室:BigTable: (Google Lab: BigTable.)
视频:BigTable: 一个分布式的结构化存储系统 (Video: BigTable: A Distributed Structured Storage System.)
Google实验室:松散耦合的分布式系统的 Chubby Lock服务 (Google Lab: The Chubby Lock Service for Loosely-Coupled Distributed Systems.)
Google是如何工作的 作者 David Carr发表于Baseline杂志 (How Google Works by David Carr in Baseline Magazine.)
Google实验室:翻译数据:使用Sawzall并行分析(Google Lab: Interpreting the Data: Parallel Analysis with Sawzall.)
可伸缩性大会上Dare Obasonjo的笔记 (Dare Obasonjo’s Notes on the scalability conference.)

平台
• Linux
• 多种不同的语言: Python, Java, C++

数据揭秘
目前的情形:
• 2006年估计有450,000个价格便宜的商用服务器
• 2005年Google索引了80亿的web页面。到现在为止有多少,已经无法统计出来了。
• 目前Google有超过200GFS的集群。一个集群能有1000甚至5000个机器。成百上千的机器从运行大到5peta字节存储的GFS集群检索数据。通过集群的总的读写吞吐量达到每秒400亿字节。
• 目前在Google有6000个 MapReduce应用,并且每个月有几百个新的应用正在出现。

架构的层次
Google把他们的基础设施架构描述为三个层次栈:
• 产品:检索,广告,电子邮件,地图,视频,聊天,博客
• 分布式系统基础设施:GFS, MapReduce, 以及BigTable。
• 计算平台:很多不同数据中心的很多机器
• 确保公司员工容易低成本配置。
• 看看每个应用基线的价格性能数据。把更多的钱花在硬件上以期不丢失日志数据,但是在其他类型的数据上花少一点。既然这样处理,实际上他们就不会丢数据。

使用GFS(Google文件系统)的可靠存储机制
• 可靠的可伸缩存储是任何应用的一个核心需要。GFS就是他们的核心存储平台。
• Google文件系统- 大的分布式日志结构化文件系统,里面有大量数据
• 为什么不用其他的而非要构建一个文件系统呢?因为他们需要控制所有的事情,而正是这个平台把他们和其他任何一个区分开来。他们需要:
- 通过数据中心的高可靠性
- 对于几千个网络节点的可伸缩性
- 大的读写带宽需求
- 支持十亿字节大的数据块
- 高效的通过节点减少瓶颈的分布式操作

• 系统有主服务器和分块服务器(chunk servers)
- 主服务器在各种数据文件上保存元数据。数据以64MB大的块存储在文件系统中。客户机和主服务器对话来操作文件里的元数据,定位包含了磁盘上他们需要的数据的分块服务器。
• 一个新的应用可以使用一个已经存在的GFS集群或者他们自己制作。去理解他们使用的通过数据中心的这个供应过程将是非常有趣的。
• 主键是足够的基础设施来确保人们对他们的应用有多种选择。可以调整GFS以适应个人应用需要。

使用MapReduce对数据做一些事情
• 既然你有了一个好的存储系统,你怎样使用如此多的数据呢?假如说你有很多TB的数据存储在1000台机器上。数据库不能扩展或者有效地扩展到这样的规模。这时就要用到MapReduce了。

• MapReduce是一个编程模型和用来处理和产生大规模数据集。用户指定一个映射函数处理一个键/值对来产生中间的键/值对集合,还指定一个缩小函数来合并所有的与同一中间键相关的中间值。

许多现实世界的任务在这个模型里被表示出来。用这个函数风格写的程序自动并行化并且在一大集群商务机器上执行。运行时系统关心分割输入数据的细节,通过一系列的机器安排程序的执行,处理机器事故,以及管理所需的机器内部通信。这使得没有任何并行和分布式系统经验的程序员能够容易地利用一个大的分布式系统的资源。

• 为什么使用MapReduce呢?
- 在大量机器上分割任务的极佳方式
- 处理机器故障
- 在不同类型的应用上工作,如搜索和广告。几乎每个应用都有映射简化类型之类的操作。你可以预计算有用的数据,统计字数,分类几TB的数据,等等。
- 计算可以自动地更加靠近IO源。

• MapReduce 系统有三个不同类型的服务器。
- 主服务器分配用户任务以映射和减少服务器。它也跟踪任务的状态。
- 映射服务器接收用户输入,在它们上面实行映射操作。结果写入中间文件。
- 化简服务器接收由映射服务器产生的中间文件并在它们上面实行化简操作。
• 例如,你想要统计所有网页中字符的个数。你可以把存储在GFS中的页面放入MapReduce。这些都将在1000秒内发生,包括机器同步和协调,任务安排,事故处理和数据传输将会自动完成。
- 步骤如下:GFS -> Map -> Shuffle -> Reduction -> 把结果存回GFS
- 在MapReduce 里,一个映射把一个视图映射到另一个,产生一个键值对,在我们的例子里是单词和数量。
- Shuffling 聚合键的类型
- 化简把所有的键值对加起来产生最后的结果。
• Google索引管道有大概20个不同的映射化简。一个管道把数据看做记录的一个整体束和聚合键。第二个映射-化简进来把那个结果拿走做其他的一些事情。等等。
• 程序可以很小。可以小到20到50行的代码。
• 一个问题是stragglers。Stragglers是一种比其他都要慢的计算。Stragglers会发生是因为慢的IO(比如一个糟糕的控制器)或者从一个临时的CPU尖峰信号。解决办法是运行多个同样的计算,当一个完成时就销毁所有其他的计算。
• 在映射和化简之间转换的数据被压缩。这样做是因为服务器不受CPU约束,花时间在数据的压缩和解压缩上还是有意义的,可以节省花在带宽和I/O上的时间。
在BigTable中存储结构化数据
• BigTable 是一个大型的容错和自我管理系统,包括太(万亿)字节的内存和皮字节的内存。它每秒能够处理几百万的读写。
• BigTable是一个构建在GFS之上的分布式散列机制。它不是一个关系数据库。它不支持联结或者SQL类型查询。
• 它提供查找机制,可以通过键来访问结构化的数据。GFS存储不透明数据和许多应用所需的结构化数据。
• 商业化数据不能伸缩到这个层次,它们不在1000个机器上工作。
• 通过控制它们自己的低层次存储系统,Google得到更多的控制和有力的工具来改进它们的系统。例如,如果它们想要使得分布

数据操作更简单的特征,它们可以在里面构建。
• 当系统运行的时候,机器可以增加和减少,而整个系统还会正常工作。
• 每个数据条存储在一个可以使用行键,列键或者时间邮票访问的单元中。
• 每行存储在一个或者更多个tablet中。一个tablet是数据形式的64KB块的序列叫做SSTable。
• BigTable 有三个不同类型的服务器:
- 主服务器分配tablet到tablet服务器中。它们跟踪的位置,当需要时还会重新分配任务。
- Tablet 服务器处理tablet的读写请求。当tablet超过规模限制(通常是100MB – 200MB)时,它们将它分开。当一个tablet服务器出故障时,会有100个tablet服务器每个捡起一个新的tablet,所以系统就恢复了。
• 一个位置组可以被用作与几比特的数据相关的物理存储,为了有一个更好的参考位置。
• Tablets尽可能在RAM里被缓存。

硬件
• 当你有很多个机器时,你如何构建它们以使花费代价最小电能消耗最少呢?
• 使用超便宜的商业硬件,拼命利用它们在上面构建软件。
• 增加 1,000-fold 计算机电力,如果你使用容易出事故的基础设施而不是构建在高度可靠的部件之上的基础设施时,可以有33倍更低的花费。你必须使用这一策略在不可靠之上构建可靠。
• Linux,内部的架构设计,PC类主机板,低端存储。
• 性能基线中每瓦的价格没有越来越好。存在着很多的电力和其他问题。
• 使用混合收集和它们自己的数据中心。

杂类
• 很快找出改变而不是等着提问和回答。
• 库是构建程序的主要方式。
• 一些是以服务的形式提供的应用,比如crawling。
• 基础设施处理应用程序的版本,所以它们就能够发布,不用担心破坏事情。

Google未来的方向
• 支持地理位置分布的集群
• 为所有的数据创建单一的全局名字空间。当前数据由集群分离开的。
• 更多更好的数据和计算的自动化迁移。

• 解决当你用网络分割耦合大范围的复制时产生的一致性问题(例如,即使一个集群已经因为维修或是其他一些临时停电等原因而下线时,还能继续提供服务)
Goolge告诉我们的经验
• 基础设施是一个很有竞争性的优势。它当然是属于Google的。它们能更快更便宜地提供和生产新的网络服务,这在一定程度上是无人能比的。许多公司采取了完全不同的方式。许多公司把基础设施看做一种花销。每个组将使用完全不同的技术,而且他们很少有计划如何更经济地构建系统。Google把他们自己看做一个系统工程公司,以一个非常新的方式来看待构建软件。

• 跨越多个数据中心仍是一个未解决的问题。大多数网站是一个至多是两个数据中心。如何在大量数据中心上充分分配网站,我们说,非常复杂。

• 看一看Hadoop (产品)如果你没有时间来从头开始构建所有这个基础设施的话。Hadoop 是一个这里讲的一些主意的开源实现。
• 一个平台方式被忽略的优点是初级开发人员可以在平台上很快自信地构建健壮的应用。如果每个项目需要创建同样的分布式基础设施轮,你将会陷入困境,因为知道如何这样做的人员相对稀少。

• 协同工作并不总是废话。通过使系统中所有部件一起工作,一个改进会有助于所有的改进。改善文件系统,每个人都会立刻明显受益。如果每个项目使用一个不同的文件系统,那么就没有整个展的持续的改进。

• 构建不需要降低系统性能的自我管理系统。这可以让你更容易地平衡各服务器的资源,动态增加更多空间,允许机器下线,以及更从容地处理升级。

• 创建一个进化式基础设施。花时间在并行处理上会有回报的。
• 不要忽视了学院。学术界有很多好的创意并没有转入生产环境里。Google所做的大部分先于艺术,不只是先于大规模配置。
• 考虑压缩。当你有大量CPU可以挥霍和IO限制时,压缩是一个很好的选择。

启用MEMCACHE_COMPRESSED压缩,“扩容”MemCached

2009年5月1日 没有评论

尝试:
启用了PHP memcache_set()函数中的 MEMCACHE_COMPRESSED压缩选项,而memcache_get()可以在后续读取过程中自动对压缩的缓存对象进行解压缩。

效果:
测试了一下,对于博客大巴目前的应用来说,启用压缩后,相同的容量(2G)存储的对象数量增加了约一倍,缓存命中率从50%左右,提高到了60%左右。进一步提高命中率硬件投入还是必须的,又增加了2倍的内存后终于做到了缓存命中率提高到90%;

前提0: 内存缓存有用,且命中率值得提升;
从60%提高到90%,还是从90%提高到95%,要看hit后的性能能够提升是否值得;

前提1:MemCached已经用满
先用memcached-tool查 看一下memcached的容量统计,看memcached是不是已经用满了。如果充分运行时MemCached的空间尚未用满,启用一下压缩是没有意义 的; 而且:发现没有用满的MemCached,最好减少相应MemCached的容量,空余出更多内存给其他服务做缓存;

前提2: 压缩率
缓存的数据的确有大于几百字节的,如果都是小于100字节的键值对,压缩可能反而带来膨胀。由于缓存对象的大小在Memcached中都是按照固定大小分块存储的,最小也要88 B。所以对于过小数据带来的压缩膨胀并不是太大的问题;

前台应用的CPU损耗:
对数据的额外压缩CPU损耗远远低于缓存命中率提升减少后台数据库访问带来的性能提升,和http的gzip/deflate压缩类似,压缩后数据一般为原数据大小的30%左右,节省了70%的传输性能消耗所得会大于文件压缩带来的性能损耗;

以下是启用压缩后的一个MemCached的数据块分布:

# Item_Size Max_age 1MB_pages Count Full?
1 104 B 342694 s 60 604918 yes<==原先最小大部分分布在88 B看来还是有些膨胀的
2 136 B 344213 s 39 300690 yes
3 176 B 324647 s 145 863765 yes
4 224 B 347049 s 52 243412 yes
5 280 B 332911 s 47 175968 yes
6 352 B 257080 s 114 339491 yes
7 440 B 330976 s 39 92934 yes
8 552 B 310225 s 51 96849 yes
9 696 B 305251 s 68 102407 yes
10 872 B 298607 s 74 88947 yes
11 1.1 kB 276463 s 70 66919 yes
12 1.3 kB 279819 s 79 60198 yes
13 1.7 kB 293690 s 97 59073 yes
14 2.1 kB 304436 s 116 56492 yes
15 2.6 kB 298020 s 102 39576 yes
16 3.3 kB 324546 s 100 31000 yes
17 4.1 kB 321757 s 97 24056 yes
18 5.2 kB 320132 s 91 18018 yes
19 6.4 kB 332232 s 89 14062 yes
20 8.1 kB 330696 s 81 10287 yes
21 10.1 kB 329582 s 76 7676 yes
22 12.6 kB 337278 s 72 5832 yes
23 15.8 kB 348626 s 66 4224 yes
24 19.7 kB 345881 s 56 2856 yes
25 24.6 kB 345825 s 44 1804 yes
26 30.8 kB 333460 s 31 1023 yes
27 38.5 kB 335782 s 22 572 yes
28 48.1 kB 302109 s 17 357 yes
29 60.2 kB 358674 s 18 306 yes
30 75.2 kB 396573 s 17 221 yes
31 94.0 kB 431605 s 11 110 yes
32 117.5 kB 418652 s 7 56 yes
33 146.9 kB 408422 s 3 17 no
34 183.6 kB 277529 s 2 7 no
35 229.5 kB 139156 s 1 3 no
36 286.9 kB 232221 s 1 1 no
37 358.6 kB 1059 s 3 6 yes

作者:车东

http://www.chedong.com/blog/archives/001431.html

Siege:压力模拟/测试工具

2009年5月1日 没有评论

JoedogSiege是一个压力测试和评测工具,设计用于WEB开发这评估应用在压力下的承受能力:可以根据配置对一个WEB站点进行多用户的并发访问,记录每个用户所有请求过程的相应时间,并在一定数量的并发访问下重复进行。

最早使用的压力测试工具是apache的ab(apache benchmark),apache ab做重复压力测试不错,但是每次只能测试一个链接,如何测试一组链接(比如从日志中导出的1个小时的日志,做真实压力测试),后来找到了这个:

SIEGE is an http regressive testing and benchmarking utility. It was designed to let web developers measure the performance of their code under duress, to see how it will stand up to load on the internet. It lets the user hit a webserver with a configurable number of concurrent simulated users. Those users place the webserver “under siege.” The duration of the siege is measured in transactions, the sum of simulated users and the number of times each simulated user repeats the process of hitting the server. Thus 20 concurrent users 50 times is 1000 transactions, the length of the test.

下载/安装
Siege时一个开放源代码项目:http://www.joedog.org

下载:
wget ftp://sid.joedog.org/pub/siege/siege-latest.tar.gz

安装:
%./configure ; make
#make install

siege包含了一组压力测试工具:
SIEGE (1) Siege是一个HTTP压力测试和评测工具.
使用样例:
任务列表:www.chedong.com.url文件

http://www.chedong.com/tech/

http://www.chedong.com/tech/acdsee.html

http://www.chedong.com/tech/ant.html

http://www.chedong.com/tech/apache_install.html

http://www.chedong.com/tech/awstats.html

http://www.chedong.com/tech/cache.html

http://www.chedong.com/tech/click.html

http://www.chedong.com/tech/cms.html

http://www.chedong.com/tech/compress.html

http://www.chedong.com/tech/cvs_card.html

http://www.chedong.com/tech/default.html

http://www.chedong.com/tech/dev.html

http://www.chedong.com/tech/gnu.html

….

siege -c 20 -r 2 -f www.chedong.com.url
参数说明:
-c 20 并发20个用户
-r 2 重复循环2次
-f www.chedong.com.url 任务列表:URL列表

输出样例:

** Siege 2.59
** Preparing 20 concurrent users for battle. 这次“战斗”准备了20个并发用户
The server is now under siege.. done. 服务在“围攻”测试中:
Transactions: 40 hits 完成40次处理
Availability: 100.00 % 成功率
Elapsed time: 7.67 secs 总共用时
Data transferred: 877340 bytes 共数据传输:877340字节
Response time: 1.65 secs 相应用时1.65秒:显示网络连接的速度
Transaction rate: 5.22 trans/sec 平均每秒完成5.22次处理:表示服务器后台处理的速度
Throughput: 114385.92 bytes/sec 平均每秒传送数据:114385.92字节
Concurrency: 8.59 最高并发数 8.59
Successful transactions: 40 成功处理次数
Failed transactions: 0 失败处理次数

注意:由于速度很快,可能会达不到并发速度很高就已经完成。Response time显示的是测试机器和被测试服务器之间网络链接状况。Transaction rate则表示服务器端任务处理的完成速度。

辅助工具:
增量压力测试:
为了方便增量压力测试,siege还包含了一些辅助工具:
bombardment (1)
是一个辅助工具:用于按照增量用户压力测试:
使用样例:
bombardment urlfile.txt 5 3 4 1
初始化URL列表:urlfile.txt
初始化为:5个用户
每次增加:3个用户
运行:4次
每个客户端之间的延迟为:1秒

输出成CSV格式:
siege2csv.pl (1)
siege2csv.pl将bombardment的输出变成CSV格式:
Time Data Transferred Response Time Transaction Rate Throughput Concurrency Code 200 (note that this is horribly broken.)
242 60.22 603064 0.02 4.02 10014.35 0.08
605 59.98 1507660 0.01 10.09 25136.05 0.12
938 59.98 2337496 0.02 15.64 38971.26 0.26
1157 60 2883244 0.04 19.28 48054.07 0.78

参考:
开源测试工具:http://www.opensourcetesting.org/performance.php

压力测试工具:HammerHead 正在试用中

作者:车东

http://www.chedong.com/blog/archives/000033.html

开源网站压力测试工具

2009年5月1日 没有评论

互联网的普及,宽带的流行,使得越来越多的个人和单位都架设了自己的网站。而充当网站的服务器的大多是普通的PC或者低档服务器,这样访问者人数一多或者遭受DDos攻击,很容易造成瘫痪。因此我们需要网站在真正发布前对其进行压力测试,即让少量的客户端计算机或一台计算机仿真模拟出大量用户同时访问,以获得服务器的承受能力。

Apache JMeter

Description:

Apache JMeter is a 100% pure Java desktop application designed to load test functional behavior and measure performance. It was originally designed for testing Web Applications but has since expanded to other test functions. Apache JMeter may be used to test performance both on static and dynamic resources (files, Servlets, Perl scripts, Java Objects, Data Bases and Queries, FTP Servers and more). It can be used to simulate a heavy load on a server, network or object to test its strength or to analyze overall performance under different load types. You can use it to make a graphical analysis of performance or to test your server/script/object behavior under heavy concurrent load.

Requirement:

Solaris, Linux, Windows (98, NT, 2000). JDK1.4 (or higher).

Download data:

No data feed available

benerator

Description:

benerator is a framework for creating realistic and valid high-volume test data, used for (unit/integration/load) testing and showcase setup. Metadata constraints are imported from systems and/or configuration files. Data can be imported from and exported to files and systems, anonymized or generated from scratch. Domain packages provide reusable generators for creating domain-specific data as names and addresses internationalizable in language and region. It is strongly customizable with plugins and configuration options.

Requirement:

Platform Independent

Download data:

No data feed available

CLIF is a Load Injection Framework

Description:

CLIF is a modular and flexible distributed load testing platform. It may address any target system that is reachable from a Java program (HTTP, DNS, TCP/IP…) CLIF provides 3 user interfaces (Swing or Eclipse GUI, command line) to deploy, control and monitor a set of distributed load injectors and resource consumption probes (CPU, memory…) An Eclipse wizard helps programming support for new protocols. Load scenarios are defined through XML-editing, using a GUI, or using a capture tool. The scenario execution engine allows the execution of up to millions of virtual users per load injector.

Requirement:

Java 1.5 or greater, with enhanced support for Linux, Windows XP, MacOSX/PPC

Download data:

No data feed available

curl-loader

Description:

A C-written web application testing and load generating tool. The goal of the project is to provide a powerful open-source alternative to Spirent Avalanche and IXIA IxLoad. The loader uses real HTTP, FTP and TLS/SSL protocol stacks, simulating tens of thousand and hundred users/clients each with own IP-address. The tool supports user authentication, login and a range of statistics.

Requirement:

linux

Download data:

Downloadable files: 16208 total downloads to date

Database Opensource Test Suite

Description:

The Database Opensource Test Suite (DOTS) is a set of test cases designed for the purpose of stress-testing database server systems in order to measure database server performance and reliability.

Requirement:

Linux, POSIX

Download data:

Downloadable files: 168089 total downloads to date

DBMonster

Description:

DBMonster is an application to generate random data for testing SQL database driven applications under heavy load.

Requirement:

OS Independent

Download data:

Downloadable files: 20474 total downloads to date

Deluge

Description:

An open-source web site stress test tool. Simulates multiple user types and counts. Includes proxy server for recording playback scripts, and log evaluator for generating result statistics. Note: this tool is no longer under active development although it is still available on Sourceforge.

Requirement:

OS independent

Download data:

Downloadable files: 10702 total downloads to date

Dieseltest

Description:

Contains the high-end features common to packages costing $50,000 or more. Dieseltest is a Windows application that simulates hundreds or thousands of users hitting a website. To run a load test, you first create a test script using our script editor. The script contains all of the requests that a real-world user would make of a website. You then load the script and run the test. The system will show you real-time results while the script is running, and produce a report analyzing the results at the conclusion.

Requirement:

Windows

Download data:

Downloadable files: 21895 total downloads to date

Faban

Description:

Faban is a facility for developing and running benchmarks, developed by Sun. It has two major components, the Faban harness and the Faban driver framework. The Faban harness is a harness to automate running of server benchmarks as well as a container to host benchmarks allowing new benchmarks to be deployed in a rapid manner. Faban provides a web interface to launch & queue runs, and extensive functionality to view, compare and graph run outputs.

Requirement:

OS independent; JVM 1.5 or later.

Download data:

No data feed available

FunkLoad

Description:

FunkLoad is a functional and load web tester, written in Python, whose main use cases are functional and regression testing of web projects, performance testing by loading the web application and monitoring your servers, load testing to expose bugs that do not surface in cursory testing, and stress testing to overwhelm the web application resources and test the application recoverability, and writing web agents by scripting any web repetitive task, like checking if a site is alive.

Requirement:

OS independent – except for the monitoring which is Linux specific.

Download data:

No data feed available

FWPTT load testing web applications

Description:

fwptt is an open source Web application testing program for load testing web applications. It can record normal and AJAX requests. It has been tested on ASP.Net applications, but it should work with JSP, PHP or other.

Requirement:

windows

Download data:

Downloadable files: 4415 total downloads to date

Grinder

Description:

The Grinder is a Java load-testing framework making it easy to orchestrate the activities of a test script in many processes across many machines, using a graphical console application.

Requirement:

OS Independent

Download data:

Downloadable files: 201699 total downloads to date

Hammerhead 2 – Web Testing Tool

Description:

Hammerhead 2 is a stress testing tool designed to test out your web server and web site. It can initiate multiple connections from IP aliases and simulated numerous (256+) users at any given time. The rate at which Hammerhead 2 attempts to pound your site is fully configurable, there are numerous other options for trying to create problems with a web site (so you can fix them).

Requirement:

Hammerhead has been used with Linux, Solaris and FreeBSD.

Download data:

Downloadable files: 30148 total downloads to date

Hammerora

Description:

Hammerora is a load generation tool for the Oracle Database and Web Applications. Hammerora includes pre-built schema creation and load tests based on the industry standard TPC-C and TPC-H benchmarks to deploy against the Oracle database with multiple users. Hammerora also converts and replays Oracle trace files and enables Web-tier testing to build bespoke load tests for your entire Oracle application environment.

Requirement:

Platform Independent (Binaries for Linux and Windows)

Download data:

Downloadable files: 23588 total downloads to date

httperf

Description:

Httperf is a tool for measuring web server performance. It provides a flexible facility for generating various HTTP workloads and for measuring server performance. The focus is not on implementing one particular benchmark but on providing a robust, high-performance tool that facilitates the construction of both micro and macro level benchmarks. The three distinguishing characteristics of httperf are its robustness, which includes the ability to generate and sustain server overload, support for the HTTP/1.1 and SSL protocols, and its extensibility.

Requirement:

linux (Debian package available), HP-UX, perhaps other Unix

Download data:

No data feed available

http_load

Description:

http_load runs multiple HTTP fetches in parallel, to test the throughput of a Web server. However, unlike most such test clients, it runs in a single process, to avoid bogging the client machine down. It can also be configured to do HTTPS fetches.

Requirement:

tbc

Download data:

No data feed available

JChav

Description:

JChav is a way to see the change in performance of your web application over time, by running a benchmark test for each build you produce. JChav reads all the JMeter logs from each of your runs (one per build), and produces a set of charts for each test in each run.

Requirement:

JMeter

Download data:

No data feed available

JCrawler

Description:

Stress-Testing Tool for web-applications. It comes with the crawling/exploratory feature. You can give JCrawler a set of starting URLs and it will begin crawling from that point onwards, going through any URLs it can find on its way and generating load on the web application. The load parameters (hits/sec) are configurable.

Requirement:

OS Independent

Download data:

Downloadable files: 17500 total downloads to date

Lobo, Continuous Tuning

Description:

Lobo is a tool for performance testing and monitoring that allows you to monitor the evolution of performance along the time-line of the project. It was specially designed to be used in agile-iterative and evolutionary approaches.

Requirement:

Java

Download data:

No data feed available

MessAdmin

Description:

MessAdmin is a light-weight and non-intrusive notification system and HttpSession administration for J2EE Web Applications, giving detailed statistics and informations on the application. It installs as a plug-in to any Java EE WebApp, and requires zero-code modification.

Requirement:

OS Independant

Download data:

Downloadable files: 9489 total downloads to date

NTime

Description:

The NTime tool is very similar to NUnit tool to perform repeatable tasks that help managers, architects, developers and testers to test an application against its performance.

Requirement:

Windows 98 or above, .Net framework 1.1 or 2.0

Download data:

No data feed available

OpenSTA

Description:

A distributed software testing architecture based on CORBA. Using OpenSTA (Open System Testing Architecture) a user can generate realistic heavy loads simulating the activity of hundreds to thousands of virtual users. OpenSTA graphs both virtual user response times and resource utilization information from all Web Servers, Application Servers, Database Servers and Operating Platforms under test, so that precise performance measurements can be gathered during load tests and analysis on these measurements can be performed.

Requirement:

Windows 2000, NT4 and XP

Download data:

Downloadable files: 334364 total downloads to date

OpenWebLoad

Description:

OpenWebLoad is a tool for load testing web applications. It aims to be easy to use and providing near real-time performance measurements of the application under test.

Requirement:

Linux, Windows

Download data:

Downloadable files: 39663 total downloads to date

p-unit

Description:

An open source framework for unit test and performance benchmark, which was initiated by Andrew Zhang, under GPL license. p-unit supports to run the same tests with single thread or multi-threads, tracks memory and time consumption, and generates the result in the form of plain text, image or pdf file.

Requirement:

OS Independent

Download data:

Downloadable files: 3305 total downloads to date

PandoraFMS

Description:

Pandora FMS is a monitoring Open Source software. It watches your systems and applications, and allows you to know the status of any element of those systems. Pandora FMS could detect a network interface down, a defacement in your website, a memory leak in one of your server application, or the movement of any value of the NASDAQ new technology market. If you want, Pandora FMS could send out SMS message when your systems fails… or when Google’s value drop below US$ 500.

Requirement:

32-bit MS Windows (NT/2000/XP), All POSIX (Linux/BSD/UNIX-like OSes), Solaris, HP-UX, IBM AIX

Download data:

Downloadable files: 134584 total downloads to date

Pylot

Description:

Pylot is a free open source tool for testing performance and scalability of web services. It runs HTTP load tests, which are useful for capacity planning, benchmarking, analysis, and system tuning. Pylot generates concurrent load (HTTP Requests), verifies server responses, and produces reports with metrics. Tests suites are executed and monitored from a GUI.

Requirement:

Python 2.5+. required.Tested on Windows XP, Vista, Cygwin, Ubuntu, MacOS

Download data:

No data feed available

Seagull

Description:

Seagull is a multi-protocol traffic generator test tool. Primary aimed at IMS protocols, Seagull is a powerful traffic generator for functional, load, endurance, stress and performance tests for almost any kind of protocol. Currently supports Diameter, XCAP over HTTP, TCAP (GSM Camel, MAP, Win) protocols.

Requirement:

Linux/Unix/Win32-Cygwin

Download data:

Downloadable files: 23752 total downloads to date

Siege

Description:

SIEGE is an http regression testing and benchmarking utility. It was designed to let web developers measure the performance of their code under duress, to see how it will stand up to load on the internet. It lets the user hit a webserver with a configurable number of concurrent simulated users. Those users place the webserver “under siege.” SCOUT surveys a webserver and prepares the urls.txt file for a siege. In order to perform regression testing, siege loads URLs from a file and runs through them sequentially or randomly. Scout makes the process of populating that file easier. You should send out the scout, before you lay siege.

Requirement:

GNU/Linux, AIX, BSD, HP-UX and Solaris.

Download data:

Downloadable files: 744 total downloads to date

Sipp

Description:

SIPp is a performance testing tool for the SIP protocol. Its main features are basic SIPStone scenarios, TCP/UDP transport, customizable (xml based) scenarios, dynamic adjustement of call-rate and a comprehensive set of real-time statistics. It can also generate media (RTP) traffic for audio and video calls.

Requirement:

Linux/Unix/Win32-Cygwin

Download data:

Downloadable files: 178179 total downloads to date

SLAMD

Description:

SLAMD Distributed Load Generation Engine is a Java-based application designed for stress testing and performance analysis of network-based applications.

Requirement:

Any system with Java 1.4 or higher

Download data:

No data feed available

Soap-Stone

Description:

Network benchmark application which can put your network under load and conduct automatic benchmark and recording activities.

Requirement:

OS Independent

Download data:

Downloadable files: 6251 total downloads to date

stress_driver

Description:

General-purpose stress test tool.

Requirement:

Windows NT/2000, Linux

Download data:

Downloadable files: 6966 total downloads to date

TestMaker

Description:

TestMaker from PushToTest.com delivers a rich environment for building and running intelligent test agents that test Web-enabled applications for scalability, functionality, and performance. It comes with a friendly graphical user environment, an object-oriented scripting language (Jython) to build intelligent test agents, an extensible library of protocol handlers (HTTP, HTTPS, SOAP, XML-RPC, SMTP, POP3, IMAP), a new agent wizard featuring an Agent Recorder to write scripts for you, a library of fully-functional sample test agents, and shell scripts to run test agents from the command line and from unit test utilities.

Requirement:

Java 1.4 or higher virtual machine on Windows, Linux, Solaris, and Macintosh.

Download data:

No data feed available

TPTEST

Description:

The purpose with TPTEST is to allow users to measure the speed of their Internet connection in a simple way. TPTEST measures the throughput speed to and from various reference servers on the Internet. The use of TPTEST may help increase the consumer/end user knowledge of how Internet services work.

Requirement:

MacOS/Carbon and Win32

Download data:

Downloadable files: 147415 total downloads to date

Tsung

Description:

Tsung is a distributed load testing tool. It is protocol-independent and can currently be used to stress HTTP, SOAP and Jabber servers (SSL is supported). It simulates complex user’s behaviour using an XML description file, reports many measurements in real time (including response times, CPU and memory usage from servers, customized transactions, etc.). HTML reports (with graphics) can be generated during the load. For HTTP, it supports 1.0 and 1.1, has a proxy mode to record sessions, supports GET and POST methods, Cookies, and Basic WWW-authentication. It has already been used to simulate thousands of virtual users.

Requirement:

Tested on Linux, but should work on MacOSX and Windows.

Download data:

No data feed available

Valgrind

Description:

Valgrind is an award-winning suite of tools for debugging and profiling Linux programs. With the tools that come with Valgrind, you can automatically detect many memory management and threading bugs, avoiding hours of frustrating bug-hunting, making your programs more stable. You can also perform detailed profiling, to speed up and reduce memory use of your programs.

Requirement:

Linux

Download data:

No data feed available

Web Application Load Simulator

Description:

LoadSim is a web application load simulator. It allows you to create simulations and have those simulations run against your webserver.

Requirement:

JDK 1.3 or above

Download data:

Downloadable files: 8983 total downloads to date

Web Polygraph

Description:

Benchmarking tool for caching proxies, origin server accelerators, L4/7 switches, content filters, and other Web intermediaries.

Requirement:

C++ compiler

Download data:

No data feed available

WebLOAD

Description:

WebLOAD Open Source is a fully functional, commercial-grade performance testing product based on WebLOAD, Radview’s flagship product that is already deployed at 1,600 sites. Available for free download and use, WebLOAD is a commercial-grade open source project with more than 250 engineering years of product development. Companies that require commercial support, additional productivity features and compatibility with third-party protocols have the option of purchasing WebLOAD Professional directly from RadView.

Requirement:

Windows NT/2000/XP

Download data:

Downloadable files: 107197 total downloads to date

CSS Sprites技术使用方法工具技巧

2009年4月30日 没有评论

之前介绍的网站优化之减少HTTP请求曾介绍过CSS Sprites,CSS Sprites并没有一个确定的中文翻译,通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟。CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。

本文系统的介绍了CSS Sprites的概念、用途和用法,相信本文会解决你在使用CSS Sprites中遇到的大部分问题。

什么是CSS Sprites?

“Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏、视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要同时保持画面流畅。“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上。

Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”。

口袋妖怪 CSS Sprites

上图是口袋妖怪的组合图片,可以点这里欣赏更多。

时间进行到2000年,Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生,它基于同上文提到的游戏Sprite同样的原理,并且使用CSS更容易控制,很快的流行开来。

2004年,Dave Shea 提出了一种使用CSS控制组合图片的方案 ,将许过小的图片组合在一起,使用css定义背景属性,来控制图片的显示位置和方式。

当页面加载时,不是加载每个但以图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
CSS Sprites用在哪里?

CSS Sprites可以用在很多场合,大字那个网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。图片之间通常会留出较大的空白,使 得图片不会影响网页的内容。但同时CSS Sprite大多使用于较固定的像素定位中,它的弹性较差,收到定位等因素的制约。所以,你需要在可维护性vs降低负载之间权衡利弊,选择最适合你的项目 的方式。

下面是一些CSS Sprites的使用范例:

Xing

这个网站将一些按钮、图标以及LOGO做成了CSS Sprites:

xing css sprites

Amazon
亚马逊使用的大幅、整齐巧妙的CSS Sprites:

amazon css sprites

Apple
苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果:

apple-css-sprites

YouTube
YouTube使用了一个2008像素高的CSS Sprites:

youtube css sprites

CNN
CNN使用了非常简单谨慎的方案:

cnn-css-sprites

Digg
Digg的方案比较复杂:
digg-css-sprites

Yahoo
Yahoo将他们漂亮的图标等距离排布起来:

yahoo-css-sprites

Google
Google使用了极其简化的方案:

google css sprites

TV1.rtp.pt
一个很大很酷的CSS Sprites方案:

tv1 css sprites

CSS Sprites常用来合并频繁使用的图形元素,如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现,因为涉及内容的图片并不是每个页面都一样。

关于CSS Sprites的文章

最权威的CSS Sprites介绍文章之一:CSS Sprites: Image Slicing’s Kiss of Death

一片图文并茂的介绍文章:CSS Sprites: What They Are, Why They’re Cool And How To Use Them

介绍Yahoo、AOL等网站使用CSS Sprites降低服务器压力的案例:How Yahoo.com and AOL.com Improve Web Performance With CSS Sprites

What Are CSS Sprites?

Sprite Optimization

Dave Shea的思考:是不是真的有必要简历复杂的大型CSS Sprites?答案是不!不要搞得太复杂,找到一个折中的方案才是正道。

Creating Easy and Useful CSS Sprites

一篇教程,其源文件可下载学习

Fast Rollovers Without Preload

一个快速翻转效果的例子

CSS Sprites + Rounded corners

另一个例子:使用CSS Sprites实现背景圆角

CSS Sprites视频教程

How to Use CSS Sprites
David Perel解释了CSS Sprites的基本概念,并演示了如何在网页中使用它,长度:10分钟

Creating Rounded Buttons With CSS Sprites
继续上面的教程,展示了如何制作滑动按钮

Exactly How to Use CSS Sprites
Andres Fernandez  展示了 CSS sprites如何加快加载时间和减少请求次数

How To Use CSS Sprites
Chris Coyier 展示了一个 CSS sprites的范例,他将8幅图片组合在了一起,并且使用jQuery制作了一个小程序。

Faster Page Loads With Image Concatenation
对于复杂的网站,减少图片请求数量可以减轻服务器负担,这是许多站长所希望看到的。

CSS Image Sprites In 10 Minutes
另一个关于导航菜单的教程

CSS: Using Percentages in Background-Image
介绍背景图片定位的方法

CSS Sprite 制作工具

Data URI Sprites

DURIS (Data URI [CSS] Sprites) 是一个管理网页图片的新工具,它可以最大限度的帮助你减少背景图片的数量,减少请求数。

Spritr
一个生成CSS Sprites的简单工具

Sprite Creator 1.0
同上

CSS Sprite Generator
制作CSS sprites 的Drupal插件

CSS Sprites Generator
这个工具允许你上传多张图片生成CSS Sprites和CSS代码

Projekt Fondue CSS Sprite Generator
它具有忽略重复图像,调整图像精度,确定横向和纵向偏移,指定背景色和透明度,指定CSS前缀等众多功能。

SmartSprites
基于java的桌面程序

你可以继续以你自己的方式编写CSS和使用图像,有一个工具可以自动为你设置CSS Sprites,这里是PHP 版本 ,它是开源的,具体可以看: Chris Brainard’s Sprite Creator 1.0.

附:CSS属性background-position(图像背景位置)该如何设置

background-position(图像背景位置)这个属性是CSS中非常重要的属性。

根据CSS规范,background-position属性包含了两个(可选的)变量:水平位置(horizontal)和垂直位置(vertical),例如:

1. .introduction {
2.     background-image: url(bg.gif);
3.     background-position: [horizontal position] [vertical position];
4.     }

.introduction {         background-image: url(bg.gif);         background-position: [horizontal position] [vertical position];         }

使用这个属性,你可以定义块级元素的背景图像位置,可以使用%百分比或px像素为单位来定义图像开始的位置,也可以使用关键字:top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

在“ background-position: x% y%;  ”这样一个语句中,x%指水平偏移,y%指垂直偏移,左上角是:0%,0%,右下角是:100%,100%,默认的是50%。

例如,你可以这样定义:

1. ul li {
2.     background-image: url(bg.gif);
3.     background-position: 19px 85px;
4.     },

ul li {         background-image: url(bg.gif);         background-position: 19px 85px;         },

这样背景图片就被定位到了距离左侧19像素,距离上边85像素。

英文原文:Smashing Magazine

中文翻译:Oncoding编码营

IIS网站服务器性能优化

2009年4月2日 没有评论

在月光那里看到的,跟之前我写过的两篇文章类似:网站优化之减少HTTP请求网站前端调优与优化

Windows Server自带的互联网信息服务器(Internet Information Server,IIS)是架设网站服务器的常用工具,它是一个既简单而又麻烦的东西,新手都可以使用IIS架设一个像模像样的Web站点来,但配置、优化 IIS的性能,使得网站访问性能达到最优状态却不是一件简单的事情,这里我就介绍一下如何一步一步的优化你的IIS服务器。

服务器端环境,我们以Windows Server 2003的IIS6.0为例,客户端环境为Mozilla Firefox 3.0,同时安装Yahoo的YSlow扩展。

YSlow是 Yahoo开发者团队发布的一款基于Firebug的插件。用于分析网页,并根据一些高性能网站的规则进行相应的评级打分,对于网页性能优化有很好的帮助 作用,告诉你那些部分影响了你的网页速度,并告诉你如何基于某些规则而进行优化。我们对于IIS的优化策略就是基于YSlow的。

使用安装了YSlow的Firefox打开目标网站,然后点击YSlow图标,点击Performance,如下图所示。

其中Performance Grade为YSlow对你网站的评级,A(100分)为最高,F为最低,后面列出如何进行修改,下面我以IIS 6.0为例介绍一下如何进行优化网站性能。

1、减少HTTP请求数量

这主要是修改网站代码,减少外部图片、CSS、JS等文件数量,手动合并多个CSS/JavaScript文件。IIS那里不用设置。

2、使用CDN

对于小网站来说,这个就免了吧。当然有钱人可以试试,可以从技术上解决用户访问网站响应速度慢的问题。

3、启用内容过期

对于静态文件启用内容过期可以提高访问性能。首先网站的目录要划分合理,图片、CSS、JavaScript均放在单独目录下,然后在IIS中选择目 录,点属性-HTTP头,启用内容过期,可以选择30天后过去,这样,用户浏览器将比较当前日期和截止日期,以便决定是显示缓存页还是从服务器请求更新的 页,由于图片、CSS、JS通常变化较少,因此基本上都从本地缓存读取,从而加快显示速度。

4、启用Gzip压缩

HTTP压缩是在Web服务器和浏览器间传输压缩文本内容的方法。HTTP压缩采用通用的压缩算法如Gzip等压缩HTML、JavaScript或 CSS文件。压缩的最大好处就是降低了网络传输的数据量,从而提高客户端浏览器的访问速度。

使用方法是,右击“网站”->“属性”,选择“服务”。在“HTTP压缩”框中选中“压缩静态文件”,“临时目录”建议单独设置另一个盘的目录下。

之后,IIS管理器中,右击“Web服务扩展”->“增加一个新的Web服务扩展”,在“扩展名”中输入“HTTPCompression”,添 加“要求的文件”为C:\WINDOWS\system32\inetsrv\gzip.dll,其中Windows系统目录根据您的安装可能有所不同, 选中“设置扩展状态为允许”。

最后,使用文本编辑器打开C:\Windows\System32\inetsrv\MetaBase.xml,在HcFileExtensions中 增加需要压缩的静态文件后缀名,默认为HTML和TXT文件,建议再添加上js、css等,不要添加图片或ZIP等已经被压缩的文件。

5、将样式文件放在头部

这是基本的HTML代码风格,将所有的CSS文件都放在HTML页面的头部。

6、将脚本文件放在尾部

这也是基本的HTML代码风格,将所有的JavaScript文件都放在HTML页面的尾部。

7、避免CSS表达式

这点很简单,因为大多数人从来不用CSS表达式。

8、使用外部的JavaScript和CSS

将所有的JavaScript和CSS都做成外部文件的形式进行引用,这主要是为了让这些文件可以被浏览器缓存起来,参见第三点的介绍。

9、减少DNS查询

域名的DNS查询会带来额外的访问开销,减少页面内文件的主机域名数量,一个页面的主机域名保持在2-4个以内,这样就不会降低页面的装入速度。

10、压缩JavaScript文件

压缩脚本文件,删除不必要的字符,可以改善加载时间,目前有很多JavaScript文件的压缩工具,我这里有一个GUI界面的JS压缩工具供下载。

11、避免重定向

网页的重定向会带来额外的运行开销,因此要避免页面进行重定向跳转操作。

12、删除重复脚本

一个页面两次包含同一个JavaScript文件会影响加载的性能,因此需要将重复的脚本文件删除。

13、配置ETag

这是一个令人迷惑的问题。理论上说将服务器的ETag删除会提高HTTP请求的性能,但是按照微软官方提供的修改方法配置IIS 6.0,并没有实际效果,最终我使用了一个remetag,以ISAPI的方式实现了删除ETag的功能。

经过上面这些网站前端重构和WEB服务器的配置修改,我们的页面结构就变得更加规范,重构的页面大多都会取得不错的YSlow的评分,总体来说性能提升了不少。对于最终用户来说,也会明显感受到访问网站速度变快了很多,网站的浏览体验得到了较好的提升。

参考书籍:高性能网站建设指南 —— 电子工业出版社出版

转载自月光博客 [ http://www.williamlong.info/ ] 本文链接地址:http://www.williamlong.info/archives/1752.html