高性能网站建设指南
性能黄金法则:
只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上
HTTP Overview
可以用压缩来减小响应大小:
- 浏览器:HTTP头里加Accept-Encoding: gzip,deflate
- 服务器:HTTP头里加Content-Encoding: gzip
条件GET
- 浏览器:If-Modified-Since: Wed, 22 Feb 2006 04:15:54 GMT
- 服务器:Last-Modified: Wed, 22 Feb 2006 04:15:54 GMT; 304 Not Modified
Keep-Alive持久链接
- 浏览器:Connection: keep-alive
- 服务器:Connection: keep-alive
1.减少http请求
- 合并图片
- css sprites
- 内联图片,<img src=“data:image/gif;base64,xxxx…”>
- 合并脚本和样式表
2.使用内容发布网络
Content Delivery Networks是一组分布在不同地理位置的web服务器。
业界领头羊是Akamai Technologies
一般用CDN发布静态内容,如图片、脚本、样式表等
3.添加expires头
服务器:Expires: Thu, 15 Apr 2015 20:00:00 GMT
cache-control使用max-age制定组件被缓存多久,以秒为单位
服务器:Cache-Control: max-age=315360000
两者同时出现时max-age会覆盖expires
4.压缩组件
浏览器:Accept-Encoding: gzip, default
服务器:Content-Encoding: gzip
一般压缩html, css和js,图片和pdf不值得压缩
通常对大于1kb或2kb的文件进行压缩,mod_gzip_minimum_file_size控制希望压缩的文件最小值。
当有代理时需要在服务器中添加Vary: Accept-Encoding
5.将css放在顶部
6.将脚本放在底部
并行下载,使用两个主机名
但脚本会阻塞下载
也可使用延迟脚本(defferred), DEFER属性表明脚本不包含document.write,可让浏览器继续进行呈现
7.避免css表达式
例如background: expression((new Date()).getHours()%2 ? "#bbb" : "#fff")
不得不用时尽量用一次性表达式
8.使用外部js和css
尽管内敛会减少http请求,但外链可以使js和css被缓存
主页使用内联反而更好
加载后下载,使用内联然后onload所需的js和css方便后续访问
9.减少dns查找
减少唯一主机名数量,但要与并行下载相平衡,一个主机名默认可并行下载两个文件
10.精简js
JSMin and Dojo Compressor
11.避免重定向
浏览器:
HTTP 1.1 301 Moved Permanently (302 Moved Temporarily)
Location: http://xxx.com
Content-Type: text/html
也可以:
<meta http-equiv=“refresh” content=“1; url=http://xxx.com”>
也可以用js的document.location
有时如果url结尾需要有一个/而没有出现时会产生一个重定向
重定向经常用于跟踪用户流量的流向,对于内部用户可以使用referer日志来分析,外部可以用信标beacon
12.移除重复脚本
13.配置或移除ETag
实体标签(Entity Tag)是web服务器和浏览器用于确认缓存组建的有效性的一种机制。
用法类似last-modified
对于服务器来说是唯一的,不适用于分布式
14.使Ajax可缓存
如何测试
http请求图表使用ibm page detailer (http://alphaworks.ibm.com/tech/pagedetailer)
建议:yslow (http://yslow.org/)
性能分析: dynatrace (http://www.dynatrace.com/en_us/application-performance-management/products/performance-center.html)
摘记
《高性能网站建设指南》热门书评
-
Steve Souders老师真不是盖的
22有用 0无用 小眼睛 2009-01-13
对于前台工程师强力推荐。前台水分极大,前台工程师快来搞一下,做出一个让Boss看着开心的数据。Steve Souders老师现在在Stanford 大学计算机科学系教授 CS193H: High Performance Web Sites课程, http://cs193h.stevesouders....
-
优秀的前端工程师应该具备怎样的技能?
18有用 1无用 小马 2009-03-02
从这本书里,让我意识到,除了标准的xHTML/CSS/JavaScript,一个优秀的前端工程师还应该具备什么样的技能呢?1. 精通浏览器工作原理及不同浏览器间的差异2. 理解HTTP协议3. 掌握服务器端编程4. 了解网络环境配置...
-
我们寻求的就是在特定条件下的最佳实践
17有用 0无用 小马 2009-03-02
另外还有一些感悟:)我大学里学的是化学,很长一段时间里我每日的功课就是不断的做实验,去验证一个可能微不足道的化学原理。教授还告诉我们,一些化学原理仅是某个环境区间内的有效论证,也就是说如果某个参数超过某个极限值,这个化学原理就失效了。我还能回忆起当时我对这样的实验是如何的不屑。多年的工作经验最终让我...
-
Note,都是前端技术
7有用 2无用 黑枪王荣格 2010-05-09
都是前端技术1.减少HTTP请求,把能包在一起的都包在一起2.利用CDN,租用或者自建,看情况3.添加Expires头,长期缓存4.压缩组件传输,除了图片和PDF5.CSS扔在HTML最上面(只是看起来速度快,不过USER往往是SB)6.JS扔到HTML最下面7.尽量少使用CSS表达式8.使用外部J...
-
《高性能网站建设指南》书评
5有用 1无用 豆豆家の哲爸爸 2009-09-17
这本译书的副标题是:前端工程师技能精髓。其实副标题应该是:14条让网站加速的“黄金定律”。这本书可谓是字字珠玑,虽内容很薄但层次很高级。它的作者: Steve Souders 说他在服务端开发领域中编程性能已做到极致了,这说明作者在服务端开发的领域已淫浸N久,到了无以复加的境界(可以了解国内的前端开...
书名: 高性能网站建设指南
作者: Steve Souders
出版社: 电子工业出版社
原作名: High Performance Web Sites: Essential Knowledge for Front-End Engineers
副标题: 前端工程师技能精髓
译者: 刘彦博
出版年: 2008年
页数: 146 页
定价: 35.00元
装帧: 平装
丛书: 博文视点O'reilly系列
ISBN: 9787121066191