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

来源:互联网 发布:月薪15万的程序员 编辑:程序博客网 时间:2024/06/03 13:34
提高网站的性能之一:关注前端的性能


用户体验 到的 网站性能是前端的性能,简单说是用户打开页面时感受到的速度。
在这方面下些功夫,能够显著提高用户 的体验,和留住用户。

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查看网页性能。


原创粉丝点击