Web前端优化的34条法则

原文是Yahoo!网络开发团队对于如何快速呈现网站方法的一些总结，本人仅是对其中的要点翻译，纯属于个人学习。如有疏漏之处，欢迎指正。
原文地址：http://developer.yahoo.com/performance/rules.html


针对内容的Web前端优化：

1.尽量减少HTTP请求Make Fewer HTTP Requests
1>合并文件：例如将所有的CSS结合到一个单一的样式表。
2>CSS精灵CSS Sprit：将背景图像相结合成一个整体图像，使用CSS背景图像和背景位置属性来显示所需的图像部分。
3>图像地图：结合多张图片到一个整体图像,多用于影像地图中。
4>内置图象：结合内置图片到您的（缓存）的样式表以减少HTTP请求，并避免增加您的网页大小。内置图片还不支持在所有主要浏览器。

2.减少DNS查找Reduce DNS Lookups

3.避免重定向Avoid Redirects

4.让Ajax可缓存Make Ajax Cacheable

5.延迟载入组件Post-load Components

6.预载入组件Preload Components

7.减少DOM元素数量Reduce the Number of DOM Elements

8.切分组件到多个域Split Components Across Domains

提高页面组件并行下载能力。

9.最小化框架页的数量 Minimize the Number of iframes

10.灭掉HTTP404No 404s

针对服务器的Web前端优化：

1.使用内容分发式网络Use a Content Delivery Network
使用内容分发式网络目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。CDN有别于镜像，因为它比镜像更智能，或者可以做这样一个比喻：CDN=更智能的镜像+缓存+流量导流。

2.添加 Expires 或 Cache-Control 信息头 Add an Expires or a Cache-Control Header
针对不同浏览器有不同的方案。

3.压缩内容 Gzip Components

4.设置 Etags Configure ETags
HTTP协议规格说明定义ETag为“被请求变量的实体值” （参见章节:14.19）。

5.尽早刷新Buffer Flush the Buffer Early

6.对AJAX请求使用GET方法 Use GET for AJAX Requests

针对Cookie的Web前端优化：

1.减少Cookie大小 Reduce Cookie Size

2.Use Cookie-free Domains for Components（暂时不知道如何准确定义）

针对CSS的Web前端优化：

1.把CSS放在页面顶部 Put Stylesheets at the Top

2.避免CSS表达式 Avoid CSS Expressions

3.单独放置JavaScript与CSS Make JavaScript and CSS External

4.精简JavaScript与CSS Minify JavaScript and CSS

5.使用<link>胜过@import Choose <link> over @import

6.避免使用Filter Avoid Filters
CSS里面的Filter实在不知道如何解释最好，个人觉得解释为像Photoshop里面为滤镜非常的不妥。

针对Javascript的Web前端优化：

1.脚本放到页面底部 Put Scripts at the Bottom

2.单独放置JavaScript与CSS Make JavaScript and CSS External

3.精简JavaScript与CSS Minify JavaScript and CSS

4.移除重复脚本Remove Duplicate Scripts

5.减少DOM访问 Minimize DOM Access

6.开发智能事件Develop Smart Event Handlers（暂时不知如何解释最妥当）

针对图像的Web前端优化：

1.优化图像 Optimize Images
尽可能的使用PNG8格式的图片，经过我的实际测试过。

2.使用CSS Sprites优化Optimize CSS Sprites

3.不要在HTML中使用缩放图片 Don't Scale Images in HTML

4.用更小的并且可缓存的favicon.ico Make favicon.ico Small and Cacheable

针对Mobile的Web前端优化：（主要指的是iPhone那样的）

1.保持单个Web对象小于25K Keep Components under 25K

2.把Web页面组件打包成一个多部分组成的文档Pack Components into a Multipart Document