网站优化守则

Yahoo军规.png

网页内容

1、减少HTTP请求次数

HTTP请求：从客服端到服务器端的请求，包括消息首行中，对资源的请求方法资源的标识符及使用协议。打开网页时，文字、图片等内容都是从服务器获取的，每一个内容的获取，就是一个HTTP请求。

1. 合并CSS/Javascript文件；
2. CSS Sprites：把多个图片拼成一张图片，通过CSS来控制在什么地方具体显示这整张图片的什么位置；
3. Image Maps：将多幅图拼在一起，然后通过坐标来控制显示导航；
4. Inline Images：通过编码的字符串将图片内嵌到网页文本中；

2、减少DNS查询次数

DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。

3、避免页面跳转

当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求。

4、缓存Ajax

Asynchronous JavaScript and XML（异步的JavaScript和XML）:可使在不重新加载页面的情况下，使客户端与服务器进行交换数据，可使网站内容分批加载和局部更新。

POST和GET的区别：

区别.png

Ajax请求的两种方法：
POST：每次都需要抛给服务器进行处理。服务器每次都会返回一个状态码200。（不可以被缓存）
GET：除非给指定了不同的地址；否则，同一地址的Ajax请求，不会重复在服务器执行，返回的状态码为304。（可以被缓存）

Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。

1. 添加Expires 或 Cache-Control报文头使回复可以被客户端缓存
2. 压缩回复内容
3. 减少dns查询
4. 精简javascript
5. 避免跳转
6. 配置Etags

5、延迟加载

1. 这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。
2. Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

6、提前加载

与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源。

1. 无条件提前加载：当前网页加载完成后，马上去下载一些其他的内容；
2. 有条件加载：根据用户的输入推断需要加载的内容；
3. 有预期的的加载：这种情况一般发生在网页重新设计时，由于用户经常访问旧网页，本地对旧的网页内容缓存充分从而显得旧网页速度很快，而新的网页内容却没有缓存，设计者可以在旧网页的内容中预先加载一些新网页中可能用到的内容，这样新的网页就会生下来一些需要下载的资源。

7、减少DOM元素数量

1. 网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别。
2. 想知道你的网页中有多少元素，通过在浏览器中的一条简单命令就可以算出，document.getElementsByTagName('*').length
3. 多少算是多了呢？雅虎在写这篇文章的时候号称主页只有700多元素，但现在接近多了一倍。我们的网页至少别比雅虎还多吧。

8、根据域名划分内容

1. 浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以浏览器增大并行下载连接，但是注意控制域名使用在2-4个之间，不然DNS查询也是个问题。
2. 一般网站规划会将静态资源放在类似于static.example.com，动态内容放在www.example.com上。这样做还有一个好处是可以在静态的域名上避免使用cookie。

9、减少iframe数量

优点：

1. 可以用来加载速度较慢的内容，例如广告。
2. 安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
3. 脚本可以并行下载
   缺点：
4. 即使iframe内容为空也消耗加载时间
5. 会阻止页面加载
6. 没有语义

10、避免404

1. 404我们都不陌生，代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。
2. 更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。

服务器

1、使用CDN

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

在离你最近的地方，放一台性能好链接顺畅的副本服务器，让你能够以最近的距离，最快的速度获取内容。

2、添加Expires或Cache-Control报文头

3、Gzip压缩传输文件

4、配置ETags

5、尽早flush输出

6、使用Get Ajax请求

7、避免空的图片src

Cookie

1、减少Cookie大小

1. 去除没有必要的cookie，如果网页不需要cookie就完全禁掉；
2. 将cookie的大小减到最小；
3. 注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain；
4. 设置合适的过期时间，比较长的过期时间可以提高响应速度。

2、页面内容使用无Cookie域名

大多数网站的静态资源都没必要cookie，我们可以采用不同的domain来单独存放这些静态文件，这样做不仅可以减少cookie大小从而提高响应速度，还有一个好处是有些proxy拒绝缓存带有cookie的内容，如果能将这些静态资源cookie去除，那就可以得到这些proxy的缓存支持。
常见的划分domain的方式是将静态文件放在static.example.com，动态内容放在www.example.com。
也有一些网站需要在二级域名上应用cookie，所有的子域都会继承，这种情况下一般会再购买一个专门的域名来存放cookie-free的静态资源。例如Yahoo!的yimg.com，YouTube的ytimg.com等。

CSS

1、将样式表置顶

样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。
如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来之前只好对不起观众了。

2、避免CSS表达式

CSS Expressions：即CSS表达式，CSS后面可以是一段JS表达式，CSS属性的值为该表达式计算的结果。在IE5-IE8中支持，其他浏览器中表达式会被忽略。

CSS表达式的计算频率很多，不止只在页面显示和缩放时，在页面滚动或鼠标移动时也会计算。计算量太大，影响性能。

3、用代替@import

避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。

4、避免使用Filters

AlphaImageLoad也是IE5.5 - IE8中支持，这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。

JavaScript

1、将脚本置底

HTTP/1.1 specification建议浏览器对同一个hostname不要超过两个并行下载连接， 所以当你从多个domain下载图片的时候可以提高并行下载连接数量。但是当脚本在下载的时候，即使是来自不同的hostname浏览器也不会下载其他资源，因为浏览器要在脚本下载之后依次解析和执行。
因此对于脚本提速，我们可以考虑以下方式：

1. 把脚本置底，这样可以让网页渲染所需要的内容尽快加载显示给用户；
2. 现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行；
3. HTML5中新加了async关键字，可以让脚本异步执行；

2、使用外部Javascript和CSS文件

1. 使用外部Javascript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。
2. 同时将Javascript和CSS从inline变为external也减小了网页内容的大小,提高了Javascript和CSS的可维护性。
3. 如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面，那么外部文件形式可以为你带来很大的好处。但对于用户通常只会访问一次的页面，例如microsoft.com首页，那inline的javascript和css相对来说可以提供更高的效率。

3、精简Javascript和CSS文件

精简就是将Javascript或CSS中的空格、格式符和注释全去掉。

4、去除重复脚本

重复的脚本不仅浪费浏览器的下载时间，而且浪费解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块，这样不仅可以避免重复脚本引入，还可以兼顾脚本依赖管理和版本管理。

5、减少DOM访问

通过Javascript访问DOM元素没有我们想象中快，元素多的网页尤其慢，对于Javascript对DOM的访问我们要注意：

1. 缓存已经访问过的元素
2. Offline更新节点然后再加回DOM Tree
3. 避免通过Javascript修复layout

6、使用智能事件处理

这里说智能的事件处理需要开发者对事件处理有更深入的了解，通过不同的方式尽量少去触发事件，如果必要就尽早的去处理事件。
比如一个div中10个按钮都需要事件句柄，那么我们可以将事件放在div上，在事件冒泡过程中捕获该事件然后判断事件来源。

图片

1、优化图像

1. 检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。可以使用imagemagick检查： identify -verbose image.gif
2. 尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。下面这条简单的命令可以安全地把GIF格式转换为PNG格式：
   convert image.gif image.png
3. 在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。例如： pngcrush image.png -rem alla -reduce -brute result.png
4. 在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息 jpegtran -copy none -optimize -perfect src.jpg dest.jpg

2、优化CSS Sprite

1. Sprite中水平排列图片，垂直排列会增加文件大小；
2. Sprite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
3. 不要在Sprite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。

3、不要在HTML中缩放图片

不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片吧。

4、使用小且可缓存的favicon.ico

移动端

1、保持单个内容小于25KB

这限制是因为iphone，他只能缓存小于25K，注意这是解压后的大小。所以单纯gzip不一定够用，精简文件工具要用上了。

2、打包组件成复合文档

把页面内容打包成复合文档就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组件。当你使用这条规则时，首先要确定用户代理是否支持（iPhone不支持）。