zoukankan      html  css  js  c++  java
  • web应用程序 前段部分调优

    1、 使用瀑布图初步诊断网站性能瓶颈

    一般来说,打开一个网页的速度会受到以下几项的影响:

    1) 服务器花了太长的时间将.aspx页面的内容转化为html。

    2) .aspx页面花了太长的时间从服务器端将内容发送到客户端。

    3) 页面上的图片或者flash文件花了太长的时间从服务器端发送到客户端。

    4) JavaScript和CSS文件阻塞页面渲染。

    我们可以使用“瀑布图”来确定一个页面的性能问题是由于哪一项造成的。FireBug、Chrome自带的“开发人员工具”都可以生成“瀑布图”。FireBug与Chrome (9.0或以上版本)通过“网络(Network)”选项卡查看“瀑布图”。下面是通过FireFox访问新浪微博”我关注的人”,FireBug生成的瀑布图。

    图1 瀑布图

    图中每一行表示一个Http请求,每一个请求都有一条时间线,用于表示这个请求所花费的时间。如果将鼠标放到某一条时间线上,可以看到以下信息:

    图2 时间线

    域名解析:搜索DNS服务器并解析域名为IP地址所花费的时间,这里是0ms。

    建立连接:客户端通过IP地址与Web服务器建立连接所花费的时间,这里是562ms。

    发送请求:客户端向Web服务器发送请求所花费的时间,这里是0ms。

    等待响应:服务器从接收到Http请求到开始向客户端发送内容所花费的时间,这里是391ms。这段时间通常包括数据库查询、aspx页面内容转换为html等等操作。

    接收数据:服务器的响应内容全部发送到客户端所花费的时间,这里是94ms。

    有了这些信息,我们就能初步诊断网站的性能瓶颈。

    1)首先看一下哪个请求花费的时间比较长,看看这个请求的时间线信息,确定是服务器响应慢了还是网络的问题。

    2)如果每个请求所花费的时间都没有明显高于其他,那么就看一下是不是页面的Http请求总数太多了。因为浏览器对单个域名的并发连接数是有限制的,需要处理完一批请求再发送另一批请求。假设页面有100个请求,每个请求花费1s,浏览器最大并发数限制为10个,那么处理完所为请求就需要100/10*1s=10s的时间。

    关于最大并发数,Http1.1的标准是2,而目前主流的浏览器IE、FireFox、Chrome为了提高速度,分别修改为10、6、6(根据具体版本可能有所变化)。

    2、 各种性能瓶颈及其对策

    前端性能问题

    雅虎专门研究网页性能问题的工程师发现,一个页面从请求到加载完,80%的时间都花在前端上(http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/)。事实也是如此,以图一为例,整个页面完全加载完花费了12s的时间,而服务器的响应时间只有391ms,其他时间都花在获取页面静态文件(如JS、CSS、图片等文件)上了。所以优化一个网站首先应从前端性能优化下手。

    对策1:使用多域名增加最大并发数

    仔细分析图一中的“域”,可以发现“tp1.sinaimg.cn”、“tp3.sinaimg.cn”这样的域名。这样做可以成倍的增加并发数。因为浏览器只对单个域名限制并发数,而不对单个IP限制并发数,所以可将一个IP地址映射到多个域名,然后使用这些域名访问网站资源,这样原本浏览器的并发数为6,使用两个域名并发数就可以达到12个了。但需要注意的是,域名并不是越多就越好的,因为域名解析也需要花费时间,而且并发数太多也会耗费客户端太多的CPU,域名数量到了一定程度,网页性能就会开始下降,所以在应用中需要根据实际情况寻找一个平衡点。如果不是特别需要,一般2到4个为佳。

    对策2:通过文件压缩等方式降低单个文件的大小

    对于JS文件,可以通过工具对其进行压缩,去除不必要的空格、换行符等。对于图片文件,优先考虑使用CSS来代替,实在不行可以考虑对图片进行裁剪。对于页面文件,尽可能使用Html标签而不使用服务器控件以减少ViewState长度,将内联的javascript和CSS放到单独的文件中,尽可能使用长度较小的字符串来作为控件ID值。

    对策3:合并JS和CSS文件减少并发数

    如果将两个JS文件合并不至于对项目维护造成影响,那么最好将它们合并。

    对策4:使用图片延迟加载技术减少并发数

    所谓图片延迟加载,就是每次只加载当前屏幕可见区域的图片,其余的图片在用户滚动页面到该位置后才开始加载。这是一项非常实用的技术,减少了并发数,不但减少了服务器的压力,也降低了页面的加载时间,目前很多门户网站都使用了该技术,如腾讯微博的“看看推荐的人”页面,在该页面上有几千个头像,如果一次性加载全部的图片,就要耗费比较多的客户端和服务器端的资源。该功能的实现原理很简单,就是将页面上的src替换成其他标记(如original),在页面滚动到相应位置后,再将original更改为src。目前有个Jquery插件Jquery.LazyLoad.js可以实现图片的延迟加载,不过该插件并没有真正的减少图片延迟加载,因为执行js是在页面的page_load之后,所以实际上打开页面后,图片已经全部下载到客户端,只是因为src属性被替换成original而没有显示起来。针对这种情况,网上有人提供了解决方案:将aspx页面上的src替换成original,这样保证page_load时绝对不会请求图片文件,然后Jquery.LazyLoad.js文件第62行的代码$(self).attr("original", $(self).attr("src"));修改为$(self).attr("original", $(self).attr("original"));

  • 相关阅读:
    桟错误分析方法
    gstreamer调试命令
    sqlite的事务和锁,很透彻的讲解 【转】
    严重: Exception starting filter struts2 java.lang.NullPointerException (转载)
    eclipse 快捷键
    POJ 1099 Square Ice
    HDU 1013 Digital Roots
    HDU 1087 Super Jumping! Jumping! Jumping!(动态规划)
    HDU 1159 Common Subsequence
    HDU 1069 Monkey and Banana(动态规划)
  • 原文地址:https://www.cnblogs.com/taiyonghai/p/5772912.html
Copyright © 2011-2022 走看看