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.提高页面组件并行下载能力。

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

    11. 灭掉 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