Yahoo优化规则

雅虎网站优化规则

尽可能减少HTTP请求

HTTP请求：从客户端到服务端的请求消息。包括消息首行中，对资源的请求方法，资源的标识符及使用的协议。

使用CDN（内容分发网络）

CDN： 内容分发网络。意思是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，是内容传输的更快，更稳定。

通过在网络上放置的节点服务器，所构成的在现有互联网基础之上的一层智能虚拟网络。

CDN系统能够时时的根据网络流量和各个节点的连接，负载状况，以及到用于的距离，和响应时间等，综合信息，将用户的请求，重新导向到离用户最近的节点上。其目的是使用户能够就近取的所需的内容，解决网络拥挤的状况，提高用户访问网站的响应速度。

添加Expire/Cache-Control头

如果apache开启的expire模块，当发送HTTP请求，apache返回的时候，就会携带expire的http头。

expire头的内容是一个时间值，值就是资源在本地的过期时间，存在本地。在本地缓存阶段，找到一个对应的资源值,当前时间还没超过资源的过期时间，就直接使用这一个资源，不会发送http请求。

Cache-Control是http协议中常用的头部之一。负责控制页面的缓存机制，如果该头部指示缓存，缓存的内容也会存在本地，操作流程和expire相似，但也有不同的地方，cache-control有更多的选项，而且也有更多的处理方式。

启用Gzip压缩

文件在服务器进行压缩，然后再进行传输。

好处：将文件的体积变小。

79KB的JavaScript文件：

将CSS放在页面最上面

提高浏览器渲染性能，避免页面出现空白或闪烁的问题。

问题：ie下，它禁止了网页内容的顺序显示。

将Script放在页面最下方

浏览器渲染顺序：自上而下依次渲染。
将script标签放在底部，可以让网页内容先呈现出来，减少用户等待时间。

将script标签放在页面底部
可以让页面内容优先呈现出来，而非先暴露script的bug

避免在CSS中使用Expressions

CSS Expressions俗称CSS表达式
CSS属性固有属性，和自定义属性。将JS表达式计算的结果赋值给CSS的属性值。

问题：CSS Expressions计算的频率很高。
重新计算：

• 页面显示和缩放
• 页面滚动
• 移动鼠标

<script>
    var i = 0
    function scare () {
        i++
        document.querySelector('#run').value = i
        return
    }
</script>
<style>
ul a {
    width: expression(this.offsetWidth > 750 ? scare() : scare())    
}
</style>
<div><input id="run" /></div>

把JS和CSS放到外部文件中

不同观点

单独提取好处：

• 提高了js和css的服用性
• 减少页面体积
• 提高了js和css的可维护性

写在页面中好处：

• 减少页面请求
• 提升页面渲染速度

写在页面中内的情况

• 只应用于一个页面
• 不经常被访问到
• 脚本和样式很少

减少DNS查询

怎么减少DNS查询

DNS查询：
整个来回，大概需要20ms时间

通过缓存方式来减少查找过程。

浏览器的的默认缓存时间:

• ie 30m
• ff 60s
• chrome 60s

当缓存时间长时：减少DNS的重复查找，节省时间。

设置缓存标准

• 多域 www.a.com,img.a.com,js.a.com 各种内容分开。多少个域才合适，根据实际情况
• 单域

最小化JavaScript和CSS

减少.js,.css的文件体积

1. 去除不必要的空白符，格式符，注释符
2. 简写方法名，参数名压缩JS脚本

避免重定向

重定向: 原始请求被重新转向到了其它请求

在HTTP请求中，重定向状态码：301 Moved Permanently永久重定向,302 Found临时重定向

301: 文件被移动到了另外的位置，会重新发送一个到指定位置的请求
302: 文件被找到，但不在原始位置，服务器会回复一个地址，会重新发送一个请求，去服务器回复的地址重新请求。

搜索引擎对于重定向的处理：

• 301，只能的把以前的记录地址替换掉，以后访问就直接跳转新地址
• 302，找旧地址再跳新地址

为什么要避免使用重定向。

缺点：增加服务器到客户端往返次数。

移除重复脚本

移除重复脚本，避免重复引用变量。

配置实体标签（ETag）

ETag: Entity Tag(实体标签)

包含在响应头部中，一种实体的某种标识，属于HTTP协议。

使用特殊的字符串，来标识某个请求资源版本。

一种标识
一棵资源
一个版本

特点：独一无二

浏览器中的ETag和服务器中的ETag一致，表示该资源没有修改过。这个时候服务器会返回304码，告知浏览器可以使用本地缓存的版本。

使用AJAX缓存

作用：

• 分批加载
• 局部更新

请求方法

• POST： 每次都执行, 不被缓存
• GET：同一个地址不重复执行，有可能返回的状态码304，可以被缓存

YSlow网站性能优化工具