浅谈yahoo前端性能团队总结的35条黄金定律

一、网页内容

1、减少http请求次数

80%的响应时间花在下载网页内容(图片，CSS样式表，JS脚本，flash等)，因此减少http请求次数是缩短响应时间的关键！

将多个JS脚本文件捆绑成一个文件，将多个CSS样式表文件捆绑成一个文件，以此来减少文件的下载次数。

把多个图片拼成一张图片，然后通过CSS的background属性来控制具体显示整张图片的什么位置。

 

2、减少DNS查询次数

DNS查询也消耗响应时间，如果网页内容来自各个不同的domain，那么客户端首次解析这些domain也需要消耗一定的时间，但由于DNS查询结果会缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问网页时的速度有影响。

减少DNS查询次数需要减少来自不同domain的请求的数量，如尽量将外部域的对象下载到本地服务器上等等。

 

3、避免页面跳转

当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求，有的网站甚至会一直跳n次，这个时候用户看不到任何页面内容，只有浏览器的进度条一直在刷新。

 

4、延迟加载

了解网页最初加载需要的最小内容集，剩下的内容放到延迟加载的集合中。

先确保网页在没有JavaScript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。

 

5、避免在页面的主体布局中使用table

table要等其中的内容完全下载之后才会显示出来，显示比div+CSS布局慢。

 

6、减少DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，因此要减少DOM元素的数量。

 

7、根据域名划分下载内容

浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以增大浏览器的并行下载连接，但是注意控制域名使用在2-4个之间，不然DNS查询也会消耗响应时间。

一般网站规划会将静态资源放在静态域名static.example.com上，动态内容放在动态域名www.example.com上，这样还可以在静态域名上避免使用cookie。

 

8、减少iframe数量

iframe的优点

1) 用来加载速度较慢的内容，如广告。

2) 安全沙箱保护,浏览器会对iframe中的内容进行安全控制。

3) 脚本可以并行下载。

iframe的缺点

1) 即使iframe内容为空也消耗加载时间。

2) 会阻止页面加载。

3) 没有语义。

 

9、避免404

404代表服务器没有找到资源，网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，客户端还会将下载回来的内容(404)当成JavaScript去解析。

 

二、服务器

1、使用CDN

下载速度可以通过CDN(内容分发网络)来提升。CDN通过部署在不同地区的服务器来提高客户的下载速度。如果网站上有大量的静态内容，那CDN是必不可少的。事实上大多数互联网巨头都有自己的CDN，而自己的网站可以先通过免费的CDN供应商来分发网页资源。

 

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

对一个网站而言，CSS、JavaScript、图片等静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存

添加Expires，将静态内容设为永不过期，或者很长时间后才过期。

添加Cache-Control报文头，来控制网页的缓存。

 

3、Gzip压缩传输文件

Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。

Gzip比deflate更高效，主流服务器都有相应的压缩支持模块。

pdf文件可以从需要被压缩的类型中剔除，因为pdf文件本身已经压缩，Gzip对其效果不大，而且会浪费CPU。

 

4、配置ETags

Etag通过一个文件版本标识使得服务器可以轻松判断该请求的内容是否有所更新，如果没有就回复304 (not modified)，从而避免下载整个文件。

但即使是主流服务器，Etags的版本信息也未能很好地支持跨服务器的判断。遇到这样的问题，IIS 7中可以将Etag去掉，使用URL Rewrite，IIS8中则提供了一个简单配制来直接关闭Etag。

 

5、尽早flush输出

网页后台程序中，一般调用Response.Flush()都是在程序末尾，但这个方法可以被调用多次，目的是可以将现有的缓存中的回复内容先发给客户端，让客户端有事可干。

一般情况下，可以在对于需要加载比较多外部脚本或者样式表时可以提前调用一次这个方法，客户端收到了关于外部脚本或者样式表的链接可以并行的先发请求去下载，服务器接下来把后续的处理结果发给客户端。

 

6、使用GET Ajax请求

浏览器在实现XMLHttpRequest POST时分成两步，先发header再发送数据，而GET却可以用一个TCP报文完成请求。

GET是去服务器取数据，而POST则是向服务器发送数据。

所以使用Ajax请求数据时尽量通过GET来完成。

 

7、避免空的图片src

空的图片src仍然会使浏览器发送请求到服务器，完全浪费时间和服务器的资源。尤其是网站每天被很多人访问时，这种空请求造成的伤害不容忽略。

 

三、Cookie

1、Cookie注意事项

Cookie信息被包含在http报文头中，对于cookie要注意以下几点，来提高请求的响应速度：

1) 去除没有必要的cookie，如果网页不需要cookie就完全禁掉。

2) 将cookie的大小减到最小。

3) 注意cookie设置的domain级别，没有必要时不要影响到sub-domain

4) 设置合适的过期时间，较长的过期时间可以提高响应速度。

 

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

可以采用不同的domain来单独存放这些静态文件，从而减少cookie的大小从而提高响应速度。常见的划分domain的方式是将静态内容放在static.example.com，动态内容放在www.example.com。

有些proxy拒绝缓存带有cookie的内容，而大多数网站的静态资源都没必要使用cookie，将这些静态资源的cookie去除，可以得到proxy的缓存支持。

 

四、CSS

1、将CSS样式表放在顶部

浏览器在css全部传输完全之前不会去渲染任何的东西。

将DHTML特征的样式表放在文档顶部(Head中)能使页面加载得更快(改善页面加载时间)。

2、避免使用 CSS 表达式（expression）

虽然CSS表达式可以动态的设置CSS属性，但只在IE5-IE8中支持，其他浏览器中表达式会被忽略。

 

3、用<link>代替@import

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

 

4、避免使用滤镜

滤镜的使用会导致图片在下载时阻塞网页绘制，另外会导致内存使用量的问题。

 

五、JavaScript

1、把脚本置底

1) 可以让网页渲染所需要的内容尽快加载显示给用户。

2) 现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行。

3) HTML5中新加了async关键字，可以让脚本异步执行。

 

2、使用外部Javascirpt和CSS文件

使用外部JavaScript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用；同时将JavaScript和CSS文件从内联变为外部也减小了网页内容的大小。

使用外部JavaScript和CSS文件的决定因素在于这些文件的重用率。如果用户在浏览页面时会访问多次相同页面或者可以重用脚本的不同页面，那么外部文件形式可以带来很大的好处；但对于用户通常只会访问一次的页面，内联的JavaScript和CSS相对来说可以提供更高的效率。

 

3、精简JavaScript和CSS

将JavaScript或CSS中的空格和注释全去掉，无空格地放在一行。

 

4、去除重复脚本

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

 

5、减少DOM操作次数

1) 缓存已经访问过的元素。

2) 用innerHTML代替DOM操作。

3) 避免通过JavaScript修复layout。

 

六、图片

1、图片预加载

var img = new Image();
img.src="";

2、不要在HTML中缩放图片

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

 

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

不管服务器有还是没有网站图标文件favicon.ico，浏览器都会去尝试请求这个图标。所以要确保这个图标存在且尽量小，最好小于1k，并设置一个长的过期时间。