前言:这段时间,把系列文章又从新整理了一下,以前关于性能优化的介绍一些不是很清晰。能够说从本篇开始,才算是一个完整的系列的开始。 javascript
本章的议题以下:css
性能调优的通常过程html
利用分析工具分析页面加载信息java
利用分析工具分析性能瓶颈web
性能调优的通常过程数据库
在解决性能问题以前首先要确认问题的所在,首先就来看看确保高性能的通常过程:浏览器
1.持续监控性能优化
2.设定性能目标服务器
3.持续改进网络
1.持续监控
网站的性能整体来讲受两个方面的影响:
一,咱们能够控制的,例如代码;
二,咱们不能控制的,例如访问用户的数量,或者服务器自己
特别是随着站点的访问量增大的时候,原来没有出现的问题,如今可能出来了,不一样的阶段要解决的问题也是不同的。因此颇有必要对网站进行持续的监控, 趁早发现网站变慢的缘由。本篇的后面部门会介绍一些咱们可使用的监控服务,来帮助咱们作这些事情。
2. 设定性能目标
网站的性能如何,一个最直观的感觉就是:打开这个站点以后,页面加载的时间,这也是说是访问者最直接的体验。不少的优化工做(不论是前台的优化仍是后台的优化)都是为了让用户更快的看到所想看的页面和信息。咱们后面的讨论不少时候都是以这个为目标的。
首先必需要明白“快”的含义:一个网站的响应速度多快才算是“快”?由于优化网站须要花费很大的时间和精力,若是网站自己已经很快了,例如网页呈现到用户眼前的时间是毫秒级别的,咱们确实能够再花时间让它更快,可是这样作起来成本会更高!
3.持续改进
在进行性能优化的时候,要涉及到不少的东西,因此在进行优化的时候必须确认:进行的优化措施确实的提升了站点的性能。为了达到这个目的,有几个规则能够遵循:
1. 每次优化只改动一处。若是改动了不少处,那么这些改动之间可能相互的影响,最后产生一些奇奇怪怪的现象,有时候这些"优化措施"反而使得网站性能下降。并且若是一次改动屡次,也不利于衡量那些"优化措施"真真正正提高了网站的性能。
2. 不断的测试。每次进行了所谓的"优化"以后,必定要测试一下,这个"优化"是否真的提高了性能,若是没有提高,那么就回滚这个操做。
通常进行优化的步骤以下:
1. 记录如今网站的性能指数和一些相关的数据(后面会告诉你们如何获取这些性能指数数据)
2. 诊断站点的性能故障点.可能有几个地方都影响了站点的性能,可是,此时咱们只是选择影响最大的那个因数进行优化。
3. 解决找出的性能故障点。
4. 测试。收集数据,和优化前进行比较,看看是否提高了性能。
5. 重复1到4步骤。
上面虽然提出了一些规则,可是咱们能够灵活处理某些状况:在咱们查找影响性能的问题的时候,咱们发现多个问题,并且这些问题根据咱们的经验判断会影响性能,那么咱们能够同时修改此处。
咱们用一个流程图来总结上面的优化步骤。以下:
下面讲述用一些简单的工具来分析一些与站点性能有关的数据,在上一篇文章中,咱们讨论了一下性能调优的通常过程,本篇就开始介绍一些方法和工具,让你们快速的入门。
的议题以下:
性能调优的通常过程
利用分析工具分析页面加载信息
利用分析工具分析性能瓶颈
利用分析工具分析加载页面信息
站点的优化说到底仍是站点每个页面的优化,即便得站点的页面更快的呈如今用户的眼前。因此在此以前,咱们首先来看看一个web页面的组成部分:
1. Html文件:在ASP.NET中,Html文件一般是经过解析.aspx页面而产生的。而这个解析过程在服务端进行,同时这个过程也消耗了服务端的大部分资源。
2. 图片和flash文件:一个站点每每包含不少这样的的文件。
3. Js和css文件:这些文件能够阻止页面的呈现。
清楚了页面的组成部分以后,咱们能够把使得页面加载变慢的因素分为以下几类:
1. 服务端的花费大量时间解析.aspx,也就是说服务端产生html文本的时间过长(致使这个问题的缘由不少,例如数据库查询很慢,影响了页面的生成)。
2. 在服务端和浏览器之间,传递html文本花费大量的时间(例如,页面中的Viewstate很大,网络很慢等)。
3. 图片和flash文件的加载花费大量的时间。
4. Js和css的加载花费大量的时间。
为了使得一个页面的加载变快,那么咱们就得知道:是以上哪个过程影响了速度(本系列的后续文章会详细讲述)。一旦知道了是那类问题致使了性能问题,那么咱们就能够对症下药。
下面咱们就经过一些工具来简单的查看和分析站点的性能,目的让你们快速的了解如何进行简单的性能分析。
咱们用瀑布图来分析页面的每一个组成部分加载所花的时间,例以下面就是博客园首页加载的分析图(部分的截图)。
咱们能够经过图中的“时间线“长短来知道每一个文件加载的时间。时间线长越长,那么加载该文件的时间越长,反之。
看完了上面的图以后,你们应该很想知道:上面的图是如何生成的,那么下面就介绍一些生成页面加载瀑布图的工具。
咱们首先来看看:Firefox+Firebug
Firefox下载地址:http://www.mozilla.com/en-US/firefox/
Firebug下载地址:http://getfirebug.com/
下面就开始演示如何生成页面加载的瀑布图(若是熟悉这个流程的朋友能够跳过此段)
1. 打开Firefox,而后按下F12,就看到以下的画面:
2. 在Firebug中,在选择“网络”下拉框中选择“启用”。
OK,下面咱们就来详细的看看在瀑布图中一些数据和图示的意义。
1. 请求和响应的相关信息
在瀑布图中,点击每一行的”+”以下:
符号展开以后,咱们能够看到全部的请求和响应头,以下:
2. 时间线的相关信息
当咱们把鼠标移到着色的时间线bar上面的时候,咱们就能够看到请求该文件所花的时间的详细信息,以下
咱们用一个表格来说述每一个时间段的含义:
域名解析 |
寻找请求的文件所在的服务器的IP地址所花的时间 |
创建链接 |
打开客户端到服务端的TCP连接所花的时间 |
发送请求 |
浏览器发送请求所花的时间。你们可能有点奇怪:为何发送请求还要等待,难道不是打开链接就发送了请求吗? 其实浏览器会把要请求的文件的请求放在请求队列中,队列的长度通常都是有限制的,若是页面须要请求的文件不少,若是队列达到了最大的限制数量,那么后续的文件请求会等待。 |
等待响应 |
客户端发送请求一直到接受服务端的第一个字节所花的时间 |
接受数据 |
接受整个请求文件或者数据所花的时间 |
‘DOMContentLoaded’ 事件 |
从该请求开始进行DNS寻址到整个页面的DOM被下载下来所花的时间。注意:此时只是页面的骨架被下载下来了,其中的一些资源(若是图片,js等)没有下载下来。当页面的DOM下载下来了以后,用户就能够看到了页面了,可是有些资源还在陆续的下载中。 |
‘load’ 事件 |
从该请求开始进行DNS寻址到整个页面所有(包括资源)下载下来所花的时间。 |
3. 页面级的请求信息
也就是整个页面的请求的一些汇总信息。
下面主要讲述如何根据一些简单的工具和简单的现象来粗布的定位站点的性能问题。
利用分析工具分析性能瓶颈
在上一节中,讲述了如何使用Firebug来生成页面加载信息的瀑布图,同时也讲述了使得页面加载变慢的四个大的问题
1. 服务端花费大量时间解析.aspx时间过长。
2. 在服务端和浏览器之间,传递html时间过长
3. 图片和flash文件的加载时间过长
4. Js和css的加载花费时间过长
那么咱们下面就根据瀑布图来判断:页面加载变慢,究竟是由于哪一个因素致使的。
1. 如何判断:服务端花费大量时间解析.aspx时间过长。
在下面的图示中,你们能够看到第一条时间线特别的长:其中紫色的那段代表了在浏览器接受到该页面的第一个字节以前等待的时间。也就是说,在浏览器请求Default.aspx页面以后,浏览器一直处于等待状态。只有浏览器接受到了Default.aspx的DOM以后,才开始下载页面中的其余的资源(css,图片等)。若是在接受Default.aspx的DOM以前等待的时间过长,那么势必影响其余的资源的下载,最后致使整个页面的加载变慢。
若是咱们在用firebug生成瀑布图的时候,发现了上面的相似的现象,页面加载变慢的缘由颇有可能就是服务端在解析Default.aspx页面,生成html文本的时间太长了。至因而什么缘由致使了服务端解析Default.aspx时间过长,那么须要进一步的分析。多是代码写的很差,例如循环问题;多是数据库问题,例如查询数据太慢或者数据太多等(后续文章详细讲述)。
注:颜色表示的意思:
2. 如何判断:在服务端和浏览器之间,传递html时间过长
在下面的图中,你们能够看到紫色的线段比较的短,也就是说,服务端解析Default.aspx页面的时间仍是比较短的,可是灰色的线段比较的长,。灰色的部分表示接受数据时间很长,也就是说服务端把DOM发送到浏览器,这个过程耗时比较的长。正如以前的问题同样,这个问题也会推迟页面的其余的资源下载,致使整个页面加载过慢。致使这个问题的缘由多是带宽问题,多是数据过多等。
3. 如何判断:图片和flash等文件的加载时间过长
以下图所示,页面的解析和传送到客户端的时间比较的短,可是页面中的图片加载花费了大量的时间。如今的浏览器通常都会同时打开多个连接,并行的请求多个图片资源,而不是一个个的挨个请求。可是浏览器打开连接的数量是有限制的(不一样的浏览器不同),并且打开新的TCP连接也是须要花时间的,不是连接越多越好。后面咱们会讲述如何减小图片等资源的加载时间。
4. 如何判断:Js和css的加载花费时间过长,阻止页面的呈现
以下图所示,在Default.aspx页面载入以后,浏览器就开始解析DOM(从上到下解析,例如head -> body…),下载资源。当页面解析到须要加载css和js时,此时浏览器就会去服务端请求这些文件,而用户在浏览器中看到的Default页面将会是一片空白,一直到css和js载入完成以后,页面开始下载图片等,此时页面才会慢慢的呈现出来。
下图就反应了这个问题。
原文连接:http://www.cnblogs.com/yanyangtian/archive/2011/02/11/1951055.html