文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web网站性能举例分析

2024-04-02 19:55

关注

这篇文章主要讲解了“web网站性能举例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“web网站性能举例分析”吧!

【概观】

什么使我们的网站变慢?Http 协议?通过更好的性能省钱和赚钱?性能规则

【什么使网站变慢】

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

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

css;javascript(jquery,plugin 等等);images

让我们使用一个工具去看看-Fiddler

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

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

web网站性能举例分析

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

web网站性能举例分析

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

【Http 协议】

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

Hypertext Transfer Protocol

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

协议是1997年1月在 RFC(Http1.1)定义的。请求/相应 模式。客户端浏览器发送特定的request,服务器返回responseHeader 和body。 每个request/response 有header和body

HttpRequest

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

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

web网站性能举例分析

我们简单分析,

Get指明了url和http的版本。host指明了host的地址。accept-language指明了浏览器使用的语言。accept-Encoding指明了是否可以使用对浏览器到服务器之间的数据进行压缩。

HttpResponse

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

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

web网站性能举例分析

web网站性能举例分析

Http/1/1 200 OK。是告诉大家,一切运行良好。 200是一种状态,如果遇到问题可能会是404,500等。其他细节,大家可以自己查一下资料。

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

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

省钱的办法:使用更小的带宽;更少的服务器数量

赚钱的办法:增长的销售和流量

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

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

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

【性能规则】

减少http request

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

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

web网站性能举例分析

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

web网站性能举例分析

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

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

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

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

web网站性能举例分析

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

发送尽可能少的数据

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

web网站性能举例分析

它的普通版本是236k。

***个网站需要加载js的总大小是279k。而第二个网站需要加载js的大小是50.8k。我们做了什么呢?只是把js文件里的白空格去掉了,就是对js文件的压缩。

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

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

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

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

web网站性能举例分析

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

感谢各位的阅读,以上就是“web网站性能举例分析”的内容了,经过本文的学习后,相信大家对web网站性能举例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯