提高网站的性能之一：关注前端的性能

转 http://blog.csdn.net/jackyyen/article/details/3452806

提高网站的性能之一：关注前端的性能

用户体验 到的 网站性能是前端的性能，简单说是用户打开页面时感受到的速度。

在这方面下些功夫，能够显著提高用户 的体验，和留住用户。

1.更少 的HTTP请求。

方法：

把多个script 组合到一个 script文件里。

把多个CSS 组合到一个 CSS文件里。

2.使用内容发布网络（CDN， content delivery network）

方法：

通过一组分布式的WEB服务器向用户提供内容。

3.增加一个Expires 头。

方法：

例如在header中加入这样一句，

Expires: Thu, 1 Jan 2015 20:00:00

那么直到指定的日期之前，浏览器都从本地而不是服务器上取得相应的资源。

4.压缩网页。甚至连script和CSS都压缩。

5.把样式表放在页面头部。

方法：

放在HEAD标签里面。

令浏览器先取得样式信息，再根据此信息渲染页面。

而不是先显示内容，再根据样式表渲染（firefox）,或者等到完全下载了样式表才开始显示内容（IE）。

6.把scripts 放在页面底部。

浏览器在scripts没有下载完成前，不再渲染页面，因此把scripts放在底部，可令浏览器先把内容显示完成。

7.避免使用CSS表达式。

效率低的表达式，可能造成页面死锁。实际上无法预知一个CSS表达式在页面载入时会执行多少遍。

8.把 JavaScript 和 CSS 移出页面。

方法：<scriptsrc=”foo.js“ type=”text/javascript”></script>

CSS也使用类似 的方法。

可以避免每次请求页面都下载 JavaScript 和 CSS。

9.减少DNS查找次数。

方法：

在页面中减少使用域名的次数。

每次DNS查找都会消耗20-100ms。

10.压缩 JavaScript。

可以有效减少script的大小。

11.避免重定向。

12.删除重复 的script。

13.配置ETag。

方法：在服务器上关掉ETag选项。

虽然使用ETag可令浏览器判断是否从服务器取的页面还是从本地取缓存的内容。但是额外增加了访问服务器的次数。

14.使用Ajax缓存。

同样，减少了与服务器的交互次数。

使用YSlow查看网页性能。