某网站前端页面性能测试

2023-10-26

1页面性能测试概述

页面性能测试则是针对于页面性能优化而开展的一种性能测试,目的是对Web系统的页面进行测试以确认系统页面是否会影响系统的性能并为页面的优化提供依据与建议,最终提升系统的整体性能表现,提高用户体验满意度。他的关注点是在与页面,不在于后端。有别于我们通常说的性能测试。

相对于C/S架构的应用系统,Web应用系统所有数据都需要从服务器端下载,虽然浏览器有缓存机制,但客户每次访问仍然需要下载大量

很多人觉得如果有大量服务器做支撑,就不会存在性能问题,其实是不对的,当硬件达到一定水准后提升硬件已无作用。举个例子,当一个页面中包含几百个请求,页面中没有经过优化的javaScript文件、CSS 文件与图片件大小达到10MB,即使当前只有一个用户在访问该系统,页面的访问速度也会慢得惊人,纵使增加再多的服务器也不见得会有明显的性能提升。

2提高页面性能的一般方法

2.1减少请求和响应的往返次数

HTTP缓存是最好的减少客户端服务器端往返次数的办法。缓存提供了提供一种机制来保证客户端或者代理能够存储一些东西,而这些东西将会在稍后的HTTP 响应中用到的。(即第一次请求了,到了客户端,缓存起来,下次如果页面还要这个JS文件或者CSS文件啥的,就不要到服务器端去取下来了,但是还是要去服务器上去访问一次,因为请求要对比ETag值。

2.2减少请求和响应的往返字节大小

l 使用更少的图画

l 将所有的CSS浓缩到一个CSS文件中

l 将所有的脚本浓缩到一个JS文件中

l 简化你的页时间

l 使用HTTP压缩

PS:貌似太理想化了。。。。。

2.3太多了yahoo的22条规则,值的参考

3页面性能测试的环境搭建

环境为:Yslow+ShowSlow+WAMP(VertrigoServ)

步骤如下:

n 创建一个db为showslow

n 导入下载的ShowSlow中的tables.sql

n 把下载的ShowSlow放到www目录下,修改config.php中的

$db = 'showslow';

$user = 'root';

$pass = '123456'; //密码根据你的情况修改。

n 打开ff配置about:config

过滤器:yslow

修改下面三项内容:

extensions.yslow.beaconUrl=

http://localhost.com/showslow/beacon/yslow/

extensions.yslow.beaconInfo = grade

extensions.yslow.optinBeacon = true

n 重新启动浏览器:在浏览器内输入http://localhost/showslow/

n 如果页面上没有任何错误提示的话,恭喜你,你太幸运了。

n 启动ff,进入ShowSlow,然后在打开要测试的页面启动yslow

4测试范围

对线上的部分页面进行测试,如下:

www侧:首页、单品页、我的订单页

seller侧:订单管理

5 测试结果与分析

5.1 www侧:首页

测试时间:2011-9-30

地点:公司

5.1.1 减少http request

8个外部js

4个外部css

10个外部background images

不知是否可以使用CSS Sprites整合图片、合并CSS文件、合并JS文件。

5.1.2 加入CDN

html.xxx.com

www.xxx.com

log.xxx.com

img.xxx.com

5.1.3 设置过期的http header

可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中,不过也有一定的风险,毕竟js和css有一定的逻辑

具体列表见 首页-没有设置过期的http header的东东.txt

5.1.4 对页面组件进行gzip压缩

首页中有以下东东,不知是否可以进行压缩处理

· http://html.xxx.com/html/css/common0601.css

· http://html.xxx.com/html/css/header0811.css

· http://html.xxx.com/html/css/index0902.css

· http://www.xxx.com/css/jquery.autocomplete.css

· http://html.xxx.com/html/js/specl2.0.5.js

· http://html.xxx.com/html/js/ajax.js

· http://html.xxx.com/html/js/specl-utils.js

· http://html.xxx.com/html/js/jquery.autocomplete.js

PS:这个是一个在线的压缩工具,个人感觉不错,能给出比较好的压缩信息与参数,方便调试,地址:http://tool.lanrentuku.com/csszip/

5.1.5 js的位置

为了实现最大的下载并行,页面加载初期做的事,最好只有HTML的下载,CSS的下载,JS的下载等,下载完成后再去实现页面渲染,JS脚本运行等。所以一般的处理办法还是页面头部引入JS链接,页面底部执行JS脚本程序。

下面的链接,我试了下,除了第一个,剩余的都可以放到底部

· http://www.xx.com/js/jquery.js

· http://html.xx.com/html/js/specl2.0.5.js

· http://html.xxx.com/html/js/ajax.js

· http://html.xxx.com/html/js/specl-utils.js

5.1.6 设置ajax缓存

虽然ajax是异步的,但不能保证不会等待异步的这段时间,不过为避免重复的ajax请求,加上缓存也是件好事吧J

首页测试的时候只有一个地址,如下

http://www.xxx.com/ajax/loginInfoAjax.jhtml?jsoncallback=jsonp1317353338559

我看这个貌似是会员的一些信息,包括购物车中商品数,用户名、状态等

5.1.7 减少DOM元素的数量

首页中差不多有1584个DOM elements

是否可以优化下首页结构,毕竟首页是门帘,用户体验也很重要的!

5.1.8 尽量使用与域名无关的cookie

所谓的 cookie-free domains 就是在浏览器发送静态内容的请求时不会发送cookies 的域名。首页中有如下:

· http://www.xxx.com/js/100023.js

· http://html.xxx.com/html/images/header0811/bor.gif

· http://html.xxx.com/html/images/header0811/menu.png

· http://html.xxx.com/html/index0601/indexbg.png

· http://html.xxx.com/html/index0601/boder.gif

· http://html.xxx.com/html/index0601/h2bg.gif

· http://html.xxx.com/html/index0601/floorico.png

· http://html.xxx.com/html/index0601/botdy.gif

我看这里面有些图片一般是不会改变的,是否考虑放到静态服务器上,以减少cookie的反复传输对主域名的影响。

5.1.9 简单的统计数据

1523191717218befc5f7911

5.2 www侧:单品页

测试单品页为:

http://www.xxx.com/goods/3B2BDB2CF26A4641_453v4563.html

测试时间:2011-9-30

地点:公司

5.2.1减少http request

有21个外部js

6个外部css

12个外部background images

不知是否可以使用CSS Sprites整合图片、合并CSS文件、合并JS文件不知是否可以使用CSS Sprites整合图片、合并CSS文件、合并JS文件

5.2.2设置过期的http header

可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中,不过也有一定的风险,毕竟js和css有一定的逻辑。

详细的URL见 单品页-没有设置过期的http header.txt

5.2.3对页面组件进行gzip压缩

单品页中有以下东东,不知是否可以进行压缩处理

· http://www.xxx.com/css/jquery.autocomplete.css

· http://html.xxx.com/html/css/common0601.css

· http://html.xxx.com/html/css/header0811.css

· http://html.xxx.com/html/css/details0629.css

· http://html.xxx.com/im/css/webIM.css

· http://html.xxx.com/html/js/jquery.autocomplete.js

· http://html.xxx.com/html/js/search.js

· http://html.xxx.com/html/js/specl2.0.js

· http://html.xxx.com/im/cdjs/jquery.easydrag.js

· http://html.xxx.com/im/cdjs/jquery.bgiframe.js

· http://html.xxx.com/im/cdjs/plus-utility.js

· http://html.xxx.com/im/js/chat.js

· http://html.xxx.com/html/js/ajax.js

· http://im.xxx.com:9090/cdmocsc/commons/connection.jsp?...

· http://html.xxx.com/im/cdjs/jquery-1.4.2.min.js

PS:这个是一个在线的压缩工具,个人感觉不错,能给出比较好的压缩信息与参数,方便调试,地址:http://tool.lanrentuku.com/csszip/

5.2.4 js的位置

单品页中太多的js放到了头部

· http://www.xxx.com/js/jquery.js

· http://www.xxx.com/js/jquery.cookie.js

· http://html.xxx.com/html/js/jquery.autocomplete.js

· http://html.xxx.com/html/js/search.js

· http://html.xxx.com/html/js/specl2.0.js

· http://www.xxx.com/js/qt.js?...

· http://www.xxx.com/js/pageutil_20110706.js

· http://www.xxx.com/js/goodsdetail_20110705.js

· http://www.xxx.com/js/jquery.countdown.1.0.js

· http://www.xxx.com/js/jquery.lazyload.mini.js

· http://html.xxx.com/im/cdjs/jquery.easydrag.js

· http://html.xxx.com/im/cdjs/jquery.bgiframe.js

· http://html.xxx.com/im/cdjs/plus-utility.js

· http://html.xxx.com/im/js/chat.js

大部分的js都可以放到底部,尤其是一些直接写的function

5.2.5 避免css表达式

http://html.xxx.com/html/css/details0629.css

仅此一个,有时候迫不得已使用,不过还是少用为好,哈哈,这个玩意强大又危险

5.2.6 减少DNS查找

· www.xxx.com: 21 components, 285.7K (88.5K GZip)

· html.xxx.com: 31 components, 428.6K

· log.xxx.com: 1 component, 12.4K (4.1K GZip)

· img.xxx.com: 51 components, 409.2K

· space.feixin.10086.cn: 1 component, 0.0K

· wpa.qq.com: 1 component, 0.0K

· im.xxx.com: 1 component, 2.7K

没办法,这个没法控制的很好,即使是淘宝也一样,暂且飘过吧~

5.2.7减少DOM元素的数量

此单品页中有1243 DOM elements,呃。。。。和首页快有一拼了。。。。。

5.2.8 简单的统计数据

15231917171740f8d07eec2

左侧图表显示是页面元素在空缓存的加载情况,右侧为页面元素使用缓存后的页面加载情况

呃。。。这请求数貌似是比较多,赶上首页了,嘿嘿


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

某网站前端页面性能测试 的相关文章

随机推荐

  • LLVM编译流程

    LLVM概述 LLVM是构架编译器 compliter 的框架系统 以C 编写而成 用于优化以任意程序语言编写的程序的便是时间 compile time 链接时间 link time 运行时间 run time 以及空闲时间 idle ti
  • 网络编程--TCP/IP协议

    参考 https lijie blog csdn net article details 105297532 https blog csdn net qq 20785973 article details 83104695 https bl
  • 华为OD机试 - 分苹果(Python)

    题目描述 A B两个人把苹果分为两堆 A希望按照他的计算规则等分苹果 他的计算规则是按照二进制加法计算 并且不计算进位 12 5 9 1100 0101 9 B的计算规则是十进制加法 包括正常进位 B希望在满足A的情况下获取苹果重量最多 输
  • JJWT三种算法的工具类实现

    前言 最近学习jwt生成token 一直各种报错 不知道怎么生成对应的秘钥 周末研究了一下 把jjwt的HMAC RSA ECDSA三种签名算法方式都实现了 并记录下来 依赖版本如下
  • 波场链通过Tron JS SDK TronWeb发送带备注的TRC - 20 转账及使用简介

    波场链通过tronWeb发送带备注的TRC 20 转账 var contractAddress TRC 20 合约 选择合约 法 let functionSelector transfer address uint256 根据 法构造参数
  • 应对程序员面试,你必须知道的八大数据结构

    大数据文摘出品 编译 Hope 睡不着的iris 胡笳 云舟 瑞士计算机科学家Niklaus Wirth在1976年写了一本书 名为 算法 数据结构 编程 40多年后 这个等式仍被奉为真理 这就是为什么在面试过程中 需要考察软件工程师对数据
  • java在大量增强for循环中找到某个特定对象去分析的方法-推荐使用debug工具(idea为例)

    场景 代码中有一部分增强for循环 里面是很复杂的处理逻辑 并且处理的AObjectList列表数量非常大 在这串代码中想看一下某个name为 小白 的对象的处理过程 如果断点直接打在for循环体内 可能要重复百次甚至千次以上才能找到这个对
  • 毕业设计-基于深度学习的目标检测算法

    目录 前言 课题背景和意义 实现技术思路 一 两阶段深度学习算法 二 单阶段深度学习方法 实现效果图样例 最后 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业后面临的就业升学做准备 一边要为毕业设计耗费大量精力 近几年各个
  • 华为OD机试 - 最大平分数组( Python)

    题目描述 给定一个数组nums 可以将元素分为若干个组 使得每组和相等 求出满足条件的所有分组中 最大的平分组个数 输入描述 第一行输入 m 接着输入m个数 表示此数组 数据范围 1 lt M lt 50 1 lt nums i lt 50
  • 使用C++的libcurl库实现HTTP的POST请求

    简介 libcurl库是由C语言编写的轻量级网络库 可以实现客户端的一些基本功能 本文使用libcurl库实现了HTTP的POST请求 代码 C 代码 使用POST方式完成对以下两个API的访问 localhost 8050 api dat
  • .NET框架介绍

    NET平台 如图所示最上层VB C C JScript等为编程语言 这些语言的基础是最底层的操作系统以及com组件和services服务程序 net语言的核心由 公共语言进行时 CLR 和基础类库 Base Class Library 两部
  • 【超分辨率】(EDSR)Enhanced Deep Residual Networks for Single Image Super-Resolution论文阅读笔记

    论文名称 Enhanced Deep Residual Networks for Single Image Super Resolution 论文下载地址 https arxiv org pdf 1707 02921 pdf 论文代码地址
  • 7.6、LSM6DSL_SENSOR_HUB模式

    7 6 LSM6DSL SENSOR HUB模式 文章目录 7 6 LSM6DSL SENSOR HUB模式 7 6 1 简介 7 6 2 LSM6DSL SENSOR HUB模式 7 6 3 sensor hub直连模式 7 6 4 测试
  • Flutter框架和原理剖析

    Flutter是Google推出并开源的跨平台开发框架 主打跨平台 高保真 高性能 开发者可以通过Dart语言开发Flutter应用 一套代码同时运行在ios和Android平台 不仅如此 flutter还支持web 桌面 嵌入应用的开发
  • 四象限运行模式_sem四象限分析法

    四象限分析法是SEM中一个常用方法 我们把账户内的关键词按照横坐标X 消费 纵坐标Y 转化 若无转化数据 替换为转化率 点击率均适用 按照以下四个象限进行分类 第一象限 高消费高转化 可能存在问题 账户设置待优化 主要 网站访问率 转化率低
  • 条件竞争漏洞Double Fetch

    前言 Double Fetch 双取 是一种条件竞争的漏洞 相关的论文发表在USENIX 论文链接 https www usenix org system files conference usenixsecurity17 sec17 wa
  • Qt基本控件及三大布局

    Qt基本模块 一 Qt的三大布局 QHBoxLayout 水平显示布局 所有在其上面摆放的控件只能水平排列下去 QVBoxLayout 垂直显示布局 所有在其上面摆放的控件只能垂直排列下去 QGridLayout 格子显示布局 可以按照表格
  • linux 权限字符串rwxr-xrw-所对应的八进制权限数字

    Linux下 查看某路径下用 ls l 或 ll 查看所有文件的详细属性列表时 会看到文件的操作权限 类似 drwxr xr x 的字符串 d 第一位表示文件类型 d 文件夹 普通文件 l 链接 b 块设备文件 p 管道文件 c 字符设备文
  • (三)最基础的分类算法-k邻近算法 KNN

    笔记 机器学习入门专栏笔记对应jupyternotebook以及封装的各种算法个人笔记 如有错误 感谢指出 机器学习文档类资源 CSDN文库 三 最基础的分类算法 k邻近算法 KNN 概括 根据经验取k值 找与k值最接近的k个点 进而判断预
  • 某网站前端页面性能测试

    1页面性能测试概述 页面性能测试则是针对于页面性能优化而开展的一种性能测试 目的是对Web系统的页面进行测试以确认系统页面是否会影响系统的性能并为页面的优化提供依据与建议 最终提升系统的整体性能表现 提高用户体验满意度 他的关注点是在与页面