网站性能指南(一):概述

  【概观】

  什么使我们的网站变慢?

  Http 协议

  通过更好的性能省钱和赚钱

  性能规则

  【什么使网站变慢】

  对于大多数现代的网站,仅仅有10%-20%的响应时间是用于生成和加载html document的。

  那么,其他的时间用于加载什么呢?确切的说,如下:

  css

  javascript(jquery,plugin 等等)

  images

  让我们使用一个工具去看看-Fiddler (http://www.fiddler2.com/fiddler2/)

  首先打开fiddler,然后使用浏览器访问 www.microsoft.com

  这时候我们可以看到fiddler监控到客户端与微软网站服务器之间的交互情况如下图:

  

  注意fiddler 右边的选项卡,有一个timeline。载入default.asp话费了大概1s的时间。让我们全选这些行。再去看看timeline,如下图

  

  这时候我们根据数据就可以证明前边的观点,对于某个网站来说,80%的时间是用于加载css/JS/image的。

  【Http 协议】

  对于http协议的理解是非常重要的,因为它定义了web 浏览器和 web 服务器如何交互。

  Hypertext Transfer Protocol

  对于这点来说,最重要的是text,它不是基于二进制的协议,而是基于text的。

  协议是1997年1月在 RFC(Http1.1)定义的。

  请求/相应 模式。客户端浏览器发送特定的request,服务器返回response

  Header 和body。 每个request/response 有header和body

  以下是 http协议的内容。我十分推荐你们阅读它:http://tinyurl.com/8395lq

  HttpRequest

  我们使用fiddler观察一下我们访问微软的httprequest。

  选中第一个记录。右边选项卡依次->Inspecotrs->Raw

  

  我们简单分析,

  Get指明了url和http的版本。

  host指明了host的地址。

  accept-language指明了浏览器使用的语言

  accept-Encoding指明了是否可以使用对浏览器到服务器之间的数据进行压缩。

  HttpResponse

  下面我们来看看刚才我们请求的响应。

  我在fiddler中选中的是第12行数据,选中右边选项卡->Inspecotrs->Raw

  Http/1/1 200 OK。是告诉大家,一切运行良好。 200是一种状态,如果遇到问题可能会是404,500等。

  其他细节,大家可以自己查一下资料。

  【通过更好的性能省钱和赚钱】

  大家都可以明白。提升网站的性能,可以让用户更加满意。而这也能让我们省钱和赚钱。

  省钱的办法:

  使用更小的带宽

  更少的服务器数量

  赚钱的办法:

  增长的销售和流量

  -每增加100毫秒载入Amzon.com 会减少销售额的1%.web

  -当google maps 的主页大小从100KB减少到70-80k时,流量在第一周会增在10%,在随后的3周会增长到25%。

  -google 已经根据你网站的性能去帮助决定搜索排名。

  对于网站性能对流量和销售产生的影响请参见相关文章《web性能心理学》http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

  【性能规则】

  减少http request

  如何减少http request呢?我们根据上边提到fiddler侦听到的http request 得知,好多次请求是去获取css,javascript,和image的。

  首先我们先来看看一个网站:

  

  它是一个普通的网站他可以使用jquery来弹出图片,我们用fiddler 来试试它。

  

  我们可以看出。他包含了一些css文件,也使用了jquery。

  让我们看看这个网站的另一个版本。

  样子是一模一样的,我就不show图了。

  让我们看看fiddler 又帮我们抓到了什么:

  

  js和css文件都变成1个了。我们把上边的js文件合并成1个js文件。这样我们就减少了httprequest的次数。

  2.发送尽可能少的数据

  我们回到fiddler。查看第一个网站的jquery文件“jquery-1.6.2.js。

  

  它的普通版本是236k。

  第一个网站需要加载js的总大小是279k。

  而第二个网站需要加载js的大小是50.8k。

  我们做了什么呢?只是把js文件里的白空格去掉了,就是对js文件的压缩。

  css文件也如此。在最后的product版本上,我们使用合并的文件可以减少httprequest次数。当然在debug的时候我们要保留空行增加代码的可读性。

  关于压缩js的工具我们在网上可以找到很多,就不列举。

  3.减少交互的次数(适当使用缓存)

  让我们刷新一下第二个网站,并观看fiddler。我们可以发现,第二次加载至向服务器获取了default.aspx。

  

  并没有重新加载js、css和图片。因为浏览器已经替我们缓存了那些文件。

原文:http://www.cnblogs.com/techborther/archive/2012/08/01/2618506.html

时间: 2024-09-29 10:40:07

网站性能指南(一):概述的相关文章

网站性能指南(二):网站性能测量神器

中介交易 SEO诊断 淘宝客 云主机 技术大厅 上一章我讲了很多关于Fiddler的东西.其实有很多检测工具可以使用,如 Fiddler .chrome.firebug.Network Monitor.IIS 和一些第三方的service. 首先我们还是先继续回顾一下fiddler的功能 [fiddler] 追踪工具,尤其针对Http 展示完成的request和response 可以保存session存档 在提高我网站性能之前,我先把网站相关信息保存起来.等我优化之后,我可以拿出来做对比.哦,原

高性能网站建设指南:性能提升的14个原则

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 今日大致浏览了一下<High Performance Web Sites>.本书的中文版是<高性能网站建设指南>.本书另有对其中个别问题深入探究的进阶篇<Even Faster Web Sites>,中译<高性能网站建设进阶指南>.这本书中给出了14条网站性能提升的原则,每个原则独立成章,配有示

yahoo网站性能优化的建议:Yahoo军规再度挖掘

文章描述:本来这是个老生常谈的问题,上周自成又分享了一些性能优化的建议,我这里再做一个全面的Tips整理,谨作为查阅型的文档,不妥之处,还请指正. 本来这是个老生常谈的问题,上周自成又分享了一些性能优化的建议,我这里再做一个全面的Tips整理,谨作为查阅型的文档,不妥之处,还请指正:如果你已经对yahoo这些优化建议烂熟于心,果断点这里 一. Yahoo的军规条例: 谨记:80%-90%的终端响应时间是花费在下载页面中的图片,样式表,脚本,flash等:详细的解释来这里查:http://deve

书评:速度与激情:以网站性能提升用户体验之我见

    该书试读内容不多,一共48页,正式内容是21页开始,也就是说,只能试读28页的内容.不过叶落知秋,28页也足够可以推敲出整本书大致的内容和风格了.     该书主要从设计师的角度,阐述了页面设计对性能的影响.虽然往往整个网站的访问速度,页面设计的影响只占了一小部分,但是毕竟也是其中的一个环节,也是有值得探讨的地方.由于我从事网页设计的工作较久,所以其中有不少地方我有不同的意见.此处抽出几点,略做探讨.     作者在开篇认为,网页设计对网站性能的提升有举足轻重的重要,但是以我多年的工作经

读高性能网站建设指南

原文:读高性能网站建设指南 性能黄金法则:只有10%~20%的最终用户响应时间花在了下载HTML文档上.其余的80%~90%时间花在了下载页面中所有组件上 规则1:减少HTTP请求 图片地图(Map) CSS Sprites(css精灵) 内联图片(<a><img src = "" ></a>) 合并脚本和合并样式表 图片地图鱼css sprites响应时间几乎一样,比原来为每个图片使用链接快50%以上,将内联图片放置在外部样式表中增加了一个额外的h

性能调优概述,这是一篇最通俗易懂的性能调优总结

精彩早知道 作者概述 什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么人来进行性能调优?(who) 怎么样进行性能调优?(How) 总结 硬件配置:CUP Xeon E5620 x 2 8核心, 内存 16G , 硬盘 RAID 10,操作系统: CentOS 6.4 x86_64(64位). 概述 在这篇博文中,我不想用一些抽象的概念去说性能调优的问题,只想用最通俗的语言尽量来准确的表达我的想法. 由于

JavaScript关于提高网站性能的几点建议(一)_javascript技巧

近在学习<高性能网站建设指南>这本书,本文算是一个学习笔记,将学到的东西进行整理一下,方便后面查看. 性能黄金法则(Performance Golden Rule)解释了只有10%~20%的最终用户响应时间花在接受所请求的用户HTML文档上,剩余的80%~90%时间花在为HTML文档所引用的所有组件(图片.脚本.样式表等)进行的HTTP请求上,最终用户响应时间花费在页面组件上   --Steve Sounders 1 文件合并(减少HTTP请求数量) CSS Sprites   利用css s

JavaScript提高网站性能优化的建议(二)_javascript技巧

在javascript关于提高网站性能的几点建议(一)中,从HTTP请求到页面渲染几个方面对提高网站性能提出了几点建议,本文是学习Steve Sounders的另外一本书<高性能网站建设进阶指南>之后,从JavaScript性能的角度进行总结概括,诸君共勉. JavaScript性能是实现高性能Web应用程序的关键 --Steve Sounders 1 利用js作用域链 作用域链(scope chain) 当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为

网站性能分析得与失

################################### 方法与观念的改变 ################################### 错误导向: 我在网上会看到人们怎么优化网站,就是用yslow这样的工具来看,工具会告诉你要怎么做,哪方面有问题,比如我写在文档里面的像这样的:       这里会告诉你要开启压缩.     这里大致反映出时间.   这些做法做都是正确的.只是这种都是花俏的工夫.把这些当成是优化的方向,方向不对.着力点错了.结果发现网站速度没明显改善.因