web前端性能优化-高性能网站建设指南学习
再次学习《高性能网站建设指南》,记录如下:
1. 减少http请求
* css Sprites
* 合并css和js
PS: 首次访问页面时的响应时间决定着用户是放弃你的网站还是不停地进行回访
2. 使用内容发布网络(CDN)
内容发布网络是一组分布在多个不同地理位置的web服务器,用户更加有效的向用户发布内容。CDN用于发布静态内容,如图片、脚本、样式表和Flash。
3. 添加Expires头
Web服务器使用expires头告诉web客户端它可以使用一个组件的副本,直到指定时间为止。
一个具有长久Expires头得组件将会被缓存,在后续请求时,浏览器直接从硬盘上读取,避免一个HTTP请求。为了提高效率,浏览器会向原始服务器发送一个条件get请求,如果组件没有改变,原始服务器可以免于发送整个组件,而是发送一个很小的头,告诉浏览器可以使用其缓存的组件。
4. 压缩组件
* 从http1.1开始,web客户端通过请求中的accept-encoding头标记对压缩的支持(Accept-Encoding:gzip, deflate)
* web服务器端通过相响应中的Content-Encoding头通知客户端(Content-Encoding: gzip)
* 目前支持deflate的浏览器都支持gzip,支持gzip的不一定支持deflate,首选gzip(压缩率更高)
* 压缩成本:服务器端需要花费额外的cpu周期来完成压缩,客户端需要对压缩文件进行解压缩。要检测收益是否大于开销,需要考虑相应的大小、连接的带宽和客户端与服务器之间的Internate距离。
5. 将样式表放置于顶部
* 将样式表放置于尾部或者使用@import导入样式表容易导致“白屏”
6. 将脚本放到底部
* 脚本并行下载实际是被禁用的(原因在于:脚本可能使用document.write修改页面内容,保证脚本执行顺序)
PS:并行下载在HTTP1.1中似乎是允许的,不过具体规律还没有搞定。
* 脚本会阻塞其后面内容的呈现
* 脚本会阻塞其后面组件的下载
7. 避免css表达式
8. 使用外部JS和CSS
9. 减少DNS查找
* 通常浏览器查找一个给定的主机名的IP地址要花费20-120ms
* 通过使用Keep-Alive和较少的域名来减少DNS查找
10. 避免重定向
* URL缺少末尾的斜线
* 主机名后缺少斜线不会发生重定向
11. 配置ETag
* ETag容易带来不少问题,需要多权衡(要么添加,要么移除)