**

性能测试/压力测试的指标

**
服务端性能测试

来源：在产品的需求文档里，提供给测试，取决服务多少量的客户，这是产品的需求！！

TPS
transaction per second
服务端每秒处理请求的数量
最直观的反映了系统的处理能力，当然是最重要的性能指标之一
说到TPS和它相关的还有其他的名词
RPS（request per second）测试工具每秒发出请求的数量
关系：
1.RPS决定TPS
2.TPS是由RPS，网络延迟，服务端本身处理速度三个因素决定
一个性能表现良好的系统，RPS和TPS**几乎是相同的！！
3.EPS(error per second) 服务端每秒处理错误的数量，也包含在TPS中
一个性能表现良好的系统，EPS应该一直为0
4.TOPS（timeout per second）服务端每秒处理超时的数量
超时时长具体为多少应该由产品需求来定义
一个性能表现良好的系统，TOPS应该一直为0
服务端本身的处理速度就是我们要测试的，测试时我们要保证两个因素，RPS和网络延迟！！！
做性能测试/压力测试，被测系统和加压系统应该在一个宽带网速比较理想的，首先保证网络延迟没有问题
性能测试工具要测试TPS是否达到，主要设置每秒发送请求的数量，也就是RPS，RPS由测试工具决定
本身的测试工具也要比较强
jmeter 6000?
EPS要自己写代码
响应时长指标：服务端处理请求耗费的时间
平均响应时长就是服务端处理请求的平均耗费时间
响应时长的区段统计：0-100ms，100-500ms，1000-3000ms，是看是否会两级分化，是什么导致某个时间段花费了很长时间。
并发连接和并发用户
基于http协议的接口性能测试
并发连接数是服务端与客户端建立的TCP连接数量，同时处理客户的能力
并发用户数是服务端同时服务用户的数量
一个用户的操作可能引发多个并发连接，比如购物一起付款～
TPS就像银行每个柜员处理问题的速度、
并发连接数就像是有多少个窗口：重点在于人很多时，即使TPS很快，还是需要等待的！
并发连接数~~
性能测试要求：
多台机器组成一个集群，进行百万并发连接～
网络环境，主网，交换机的设置～

性能测试用例～～～

接口压力测试500次，查看响应时间

import json
import requests
import logging

logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
logger = logging.getLogger(__name__)

restime = []
OK=[]
class Restime():
    def API(self,URL2,param):

        try:
            r = requests.get(URL2, params=param, timeout=10)
            r.raise_for_status()  # 如果响应状态码不是 200，就主动抛出异常
        except requests.RequestException as e:
            print(e)
        else:
            js = json.dumps(r.json())
            return [r.json(), r.elapsed.total_seconds(),js]

    def circulation(self,num,URL2,param):


        for i in range(num):

            restime.append(Restime.API(URL2,param)[1])
            if json.loads(Restime.API(URL2, param)[2])["message"]=='ok':
                OK.append(json.loads(Restime.API(URL2, param)[2])["message"])
                logger.info('请求第' + str(i+1) + '次，请求'+json.loads(Restime.API(URL2, param)[2])["message"]+',状态码：'+json.loads(Restime.API(URL2, param)[2])["status"])
            else:
                logger.info('请求第' + str(i+1) + '次，请求' + json.loads(Restime.API(URL2, param)[2])["message"] + ',状态码：' +
                            json.loads(Restime.API(URL2, param)[2])["status"])

        print('测试次数：',num)
        print('响应次数：', len(restime))
        print('正常响应次数：', len(OK))
        print('总响应最大时长：', max(restime))
        print('总响应最小时长：', min(restime))
        print('总响应时长：', sum(restime))
        print('平均响应时长：', sum(restime) / len(restime))



if __name__ == '__main__':
    Restime=Restime()
    #URL2 = 'http://wthrcdn.etouch.cn/weather_mini'
    #param = {'ip': '8.8.8.8', 'city': '西安'}
    num=500 #压力测试次数
    URL2 = 'http://www.kuaidi100.com/query'  #地址
    param = {'type' : 'zhongtong' , 'postid' :'73116039505988' }  #参数

    Restime.circulation(num,URL2,param)

    input('Press Enter to exit...')

测试次数： 500
响应次数： 500
正常响应次数： 500
总响应最大时长： 0.336179
总响应最小时长： 0.062753
总响应时长： 41.892936000000034
平均响应时长： 0.08378587200000007

承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！ https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743  

作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领先的开始。

微信公众号：AlbertYang 关注我更多精彩等你来发现！

1 什么是响应式布局？

 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。EthanMarcotte在2010年5月份提出了响应式布局的概念，简而言之，就是一个网站能够兼容多个终端。

  响应式开发与移动端与PC端分别开发的区别：响应式开发只编写一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。移动端与PC端分别开发，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机， 从而请求服务器，返回不同的页面。

2 响应式开发的原理？

响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。

CSS3 @media 查询定义和使用:

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

例如屏幕宽度小于 500 像素则修改背景颜色(background-color)为红色。

@media screen and (max-width: 300px) {
    body {
        background-color: red;
    }
}

设备的划分情况为：

• 小于768的为超小屏幕（手机）

• 768~992之间的为小屏设备（平板）

• 992~1200的中等屏幕（桌面显示器）

• 大于1200的宽屏设备（大桌面显示器）

但是我们也可以根据实际情况自己定义划分情况。

3 响应式页面开发实战

3.1 视频

视频地址：https://www.bilibili.com/video/BV1mr4y1T7w5

3.2 HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>响应式页面入门教程：Albert Yang</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
    <header>
        <a href="#" class="logo">AlbertYang</a>
        <ul class="navigation">
            <li><a href="#">首页</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">联系我</a></li>
            <li><a href="#">留言板</a></li>
            <li><a href="#">关于我</a></li>
            <li><a href="#">照片墙</a></li>
        </ul>
        <div class="search">
            <input type="text" placeholder="Search">
            <i class="fa fa-search" aria-hidden="true"></i>
        </div>
    </header>
    <div class="banner">
        <div class="content">
            <h2>响应式布局</h2>
            <p>
                响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
                传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够了。
                响应式设计与自适应设计的区别：响应式开发一套界面，
                通过检测视口分辨率，针对不同客户端在客户端做代码处理，
                来展现不同的布局和内容；自适应需要开发多套界面，
                通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，
                从而请求服务层，返回不同的页面。CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，
                当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
            </p>
            <a href="#">阅读全文</a>
        </div>
        
        <img src="1.jpg" class="image">
    </div>
</body>

</html>

3.3 CSS

/* 清除浏览器默认边距，
使边框和内边距的值包含在元素的width和height内 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 100px;
    z-index: 10;
    background: #5b639c;
}
header .logo {
    position: relative;
    font-size: 1.5em;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
header .navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px 0;
}
header .navigation li {
    list-style: none;
    margin: 0 20px;
}
header .navigation li a {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}
header .navigation li a:hover{
    color: #ffed3b;
}
header .search {
    position: relative;
    width: 300px;
    height: 40px;
}
header .search input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background: transparent;
    outline: none;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 0 10px 0 45px;
}
header .search input::placeholder {
    color: #fff;
}
header .search .fa-search {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    color: #fff;
    border-right: 1px solid #fff;
    padding-right: 10px;
}
.banner {
    background: #eee;
    padding: 200px 100px 100px;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.banner .content {
    max-width: 1000px;
}
.banner .content h2 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 20px;
}
.banner .content p {
    font-size: 1em;
    color: #333;
}
.banner .content a {
    display: inline-block;
    background: #434978;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 20px;
}
.banner .image {
    max-width: 500px;
    margin-left: 50px;
}
/*屏幕宽度小于991px,改变布局和样式*/
@media screen and (max-width:991px) {
    header {
        padding: 10px 20px;
        flex-direction: column;
    }
    .banner {
        padding: 150px 20px 50px;
        flex-direction: column-reverse;
    }
    .banner .image {
        max-width: 80%;
        margin-left: 0;
    }
    .banner .content h2 {
        font-size: 2em;
    }
}
/*屏幕宽度小于600px,改变布局和样式*/
@media screen and (max-width:600px) {
    header .search {
        width: 100%;
    }
    .banner .image {
        margin-top: 30px;
    }
}

3.4 图片

今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。有什么不明白的地方欢迎给我留言，如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！