精华内容
下载资源
问答
  • h5性能测试
    千次阅读
    2020-12-16 20:35:44

    1、H5指移动网页本身

    H5是指用H5语言制作的一切数字产品。

    H5提供了全新的框架和平台,包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能,并使这些应用标准化和开放化;

    H5的最显著的优势在于跨平台性,用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上。

    随着H5页面的普及和运用,深深影响着我们各个业务的发展,H5性能测试越来越受到重视。

    2、浏览器渲染原理和过程

    浏览器作为一个客服端,它的主要作用就是展示可访问的资源,不管这些资源是本地资源还是通过网络请求获取到的资源。

    1. 地址栏输入地址触发网络请求,获取到html文件。
    2. HTML解析器解析HTML文件构建成为DOM树。
    3. 遇到CSS通过CSS解析器解析成为CSSOM。
    4. 遇到JS通过JS解析器解析。
    5. DOM Tree和CSSOM构建呈现树(6、7两个步骤)。
    6. 呈现树根据结构样式确定节点的位置(布局或者回流) ----回流。
    7. 确定好位置以后,根据外观样式绘制 ----重绘。
    8. 通过UI后台和用户界面组件把内容显示到浏览器主窗口上。

    3、H5性能参数

    H5测试内容包括:功能测试、浏览器兼容测试、前端性能测试、服务端性能测试,这里主要介绍H5性能测试。

    (1)H5性能测试点:

    影响H5性能有以下几个要素:网络带宽、DNS解析、服务器处理能力、数据库操作等。以下是H5性能的测试点:

     

     

     

     

     

    加载速度

    网络

    WIFI

    5G

    4G

    3G/2G

    启动

    首字

    首屏

    缓存

    有缓存

    无缓存

    缩短响应时间

    CDN部署

    合理分配域名

     

     

     

    流量

    http请求数

    资源合并

    http状态

    失败资源处理

    单个请求优化

    缓存机制

    压缩内容

    资源合理组合

    预加载

    分页加载

    css放顶部

    js放底部

    服务端压力

    服务端压测

    服务端性能

     

    体验

    提示信息

    弱网络下加载提示

    接口数据异常提示

    打开性能

    打开或刷新页面是否抖动

    应用回退后台后体验

    (2)H5性能相关参数介绍:

    以下简单介绍和H5性能相关的几个参数概念:

    时间相关:

    (1)白屏时间:用户首次看到网页有内容的时间,即第一次渲染流程完成时间。

    (2)首屏时间:是指用户看到第一屏,即整个网页顶部大小为当前窗口的区域,显示完整的时间。

    (3)首资源下载时间:从开始下载到第一个资源均下载完成的时间,不包括页面绘制时间。

    (4)总资源下载时间:从开始下载到所有资源均下载完成的时间,不包括页面绘制时间。

    (5)用户可操作时间:从页面开始加载到用户操作可响应的时间。

    上述各种时间指标应根据当前H5的具体情况,选择合适的测试指标。

    WebView相关:

    在android和IOS上测试H5性能,测试人员还应该关注因加载H5而引起的app常规性能指标。

    (1)内存:加载页面前后内存变化,可间接反映H5中资源数量和大小,如dom数量,图片大小;

    (2)CPU:当页面中资源样式复杂,强调视觉效果时,测试员可观察CPU占用率来反映H5绘制质量。如果CPU长期处于高占用率,可考虑降低高计算量的视觉效果等手段;

    (3)FPS:帧率尤其在有视频和动画效果的H5中,测试员应该重点关注,防止严重的卡顿流出。

    性能要求可以参考下表:

     

    项目

    指标

    内存

    1.页面内反复切换tab,切换场景,滑动页面等场景不存在内存泄露,给出数据并说明结论; 2.运行过程中内存峰值<单个应用程序最大可能内存的60%;3.退出后内存恢复到进入游戏前的占用值;

    电量

    程序放后台或处于飞行模式的情况下耗电小于10mAh;

    流量

    无异常流量消耗;不存在资源的重复拉取;

    弱网络

    1.无crash;2.体验方面提示用户网络环境差;3.拉取失败能正常返回;

    cpu

    CPU 启动时cpu占比<20%;运行时cpu占比峰值<80%;

    Crash

    网络/网络状态发生变化时/连续8小时运行,无crash;

    流畅度

    avgFPS不小于40;inFPS大于0;

    4、测试方法和工具

    (1)抓包工具--Fiddler、Charles等

    这类工具不仅可以抓包,还可以对包进行篡改,动态展示瀑布流,对web进行调试。

    (2)平台型工具--Page Speed、PCAP Web Performance Analyzer、WebPagetest等

    可以快捷的测试出H5前端性能中的数据、视图,并给出一定程度的优化建议。

    工具

    优点

    缺点

    PCAP Web Performance Analyzer

    方便移动端H5测试,包直接来源于移动端货去PCAP文件;

    各类资源数据统计一目了然;

    瀑布流展示http请求过程;

    操作麻烦,抓包和分析都需要人工操作;

    属于离线分析,不实时;

    没有具体的web展示;

    Page Speed

    直观展示测试结果,并给出优化建议;

    可以测试移动端和PC端;

    提供了网页速度和用户体验两类结果,包括字体清晰度,窗口大小等用户体验结果;

    只有结果,没有详细的资源数据统计;

    没有提供各个http的request和response的详细数据;

    WebPagetest(推荐)

    提供了首屏时间、首字节时间,全界面加载时间的工具,并提供对应时间点的截图;

    提供了瀑布流视图和连接视图,清晰展示了并发请求的http连接以及请求资源;

    提出优化建议checklist,详细标出各个资源是否可以优化,如压缩、缓存、发布CDN、设置GZIP等;

    提供测试过程的视频演示;

    并不是专门为移动端h5测试所设计的;

    关注h5前端页面本身的性能,没有关注浏览器引起的内存、CPU、FPS等的变化;

    Chrome DevTools(推荐)

    支持移动端h5在PC端远程调试,能够对具体的移动设备进行测试;

    集成了Page Speed;

    提供Network面板,展示瀑布流视图,各类资源清晰展示,并提供了缩略图,方便查看图的大小尺寸,以及是否有缺失和冗余;

    提供TimeLine面板,展示CPU、内存、FPS等性能数据;

    录制分析的一种静态分析方法,不同于fiddler等抓包工具提供的实时抓包、修改等功能;

    5、工具使用举例

    (1)WebPageTest

    WebPageTest是一个免费开源的在线性能评测工具;其使用真正的浏览器(IE和Chrome等)与真实的消费者连接速度,可以从全球多个地点运行免费网站速度测试;并依据测试结果提供丰富的诊断信息,包括资源加载瀑布图,页面速度优化检查和改进建议,会给每一项内容一个最终的评级。

    打开官网地址:https://www.webpagetest.org

    开源地址 https://github.com/WPO-Foundation/webpagetest

    在上图中2处输入要测试的URL网址。在3处选择地址(Test Location),如下图,下拉选择就好,可以选择安卓,iOS,PC端等设备,以及不同国家地等;补充:点击Advanced Setting下拉可以进行高级设置,不过我们一般选择默认就好设置完成,点击START TEST,开始测试;

    (2)Chrome DevTools

    Chrome DevTools(Chrome 开发者工具) 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。

    手机端USB和PC连接,并打开开发者模式;

    在浏览器地址栏输入chrome://inspect 或者 about:inspect 打开DevTools;

    如下图所示;由于网络限制缺少性能分析的功能;

     

    6、H5性能优化及原理

    1)Http请求个数 

    有统计证明:一个网页最终到达终端用户有80%的时间都是在JS,CSS,图片,mp3,flash等资源的http请求。另一方面,http请求的数量也是有限制的,浏览器对同一个域名有连接数限制,不同浏览器内核、不同版本的请求数不尽相同,大部分的并发请求数是6个。

    看来通过够控制http请求的数量,减少http请求时间,达到减少网页加载和呈现的时间,能带来更好的用户体验。

    (2)组件是否压缩

    通常来说,组件压缩是一种增加CPU压缩解压缩时间来减少网络传输消耗的办法,并且通常网络资源较cpu资源更紧张,所以对合适的对象设置压缩能个取得良好的收益。

    压缩方法:在http请求中设置所接受到压缩方式,在Server端对Response资源进行压缩再传给浏览器。一般使用GZIP设置content-Encoding字段。

    压缩对象:从http请求返回资源中的html,js,CSS,xml等都可以设置压缩,值得注意的是我们不需要对图片音乐等资源设置压缩,因为这些资源本身已经压缩过了,再次压缩收益并不高,而且增加CPU负担。Js,CSS我们通常通过去掉空格和回车来压缩,再经过GZIP压缩,能达到良好的压缩效果。

    (3)图片格式和大小是否合适 

    图片格式:显示效果较好的图片格式中,有webp、jpg和png24/32这几种常见的图片格式。一般来说,webp的图片最小,但在iOS或者android4.0以下的系统中可能会有兼容性问题需要解决。

    图片尺寸:这获取图片尺寸时候应该考虑图片具体的展示场景,如当前移动设备中常用个尺寸规格为480×800、600×1024、720×1280,800×1280等,从原图来保证图片能够被呈现,而不是通过代码对图片放大或缩小。

    图片压缩:对于jpg,png格式图片来说本身就已经经过了压缩,这对于稀缺的带宽资源是不够的,我们还需要更加优化的压缩算法,通过一系列的图片压缩工具如TinyPNG, Smush.it可以得到更好的压缩且图片质量不变。

    (4)CSS放在顶部  

    在浏览器渲染过程中谈到,dom树构建完成后。CSS要放到html代码的开头的head标签结束前。如果网页是动态生成的,那么在head代码完成后可以页面输出,这样浏览器就会更快地解析出来head中的内容,开始下载CSS文件资源。而CSS放在底部则会引起重新绘制,用户侧感受到“闪屏”的不好体验。

    (5)JS放在底部

    JS在下载的时候会引起两个问题:阻止网页内容的展示并阻止其他资源下载。在“减少http数量”部分中,我们谈到各种资源的下载是并行的,根据不同域名不同浏览器内核并行数量有所不同,所以下载js时候,并行下载机制失效。并且在js中可能包括document.write等改变页面布局的操作,所以渲染引擎会等待js下载完成再开始渲染。所以用户侧页面加载时间会因为等待而变得更长。

    (6)使用CDN

    CDN内容分发网络(Content Delivery Network)将源站内容发布到最接近用户的“边缘”节点,使用户可就近取得所需内容,提高用户访问的响应速度和成功率。解决因分布、带宽、服务器能力带来的访问延迟高问题,提供一系列加速解决方案。所以,如果H5的用户分散在全国各地,建议尽可能的将资源放到CDN,如腾讯云CDN。

     

     

     

    参考文章:https://mp.weixin.qq.com/s/drQcMJukTjozNRlpjtLPXw

     

     

    更多相关内容
  • 从页面开始加载,到用户能够操作页面的时间在APP客户端上测试测试H5性能时,还要关注因为加载H5时,APP的常规性能指标内存:加载页面前后内存变化,可以反映出H5中资源数量和大小,比如图片大小。...

    说起H5性能测试,可能许多同学有所耳闻,但是不知道该如何去做性能测试,或者不知道H5应该关注哪些性能指标。今天我们就来看下。希望阅读本文后,能够有所了解。

    常用指标

    1、H5性能相关参数介绍

    白屏时间:用户首次看到网页又内容的时间,即第一次渲染流程完成时间

    首屏时间:用户看到第一屏,即整个网页完全显示出来的时间

    首资源下载时间:从开始下载第一个资源到下载完成的时间

    总资源下载时间:从开始已下载到所有资源都下载完成的时间

    用户可操作时间:从页面开始加载,到用户能够操作页面的时间

    在APP客户端上测试测试H5性能时,还要关注因为加载H5时,APP的常规性能指标

    内存:加载页面前后内存变化,可以反映出H5中资源数量和大小,比如图片大小

    CPU:如果当前页面中样式过于复杂,可以观页面加载时的CPU占有率,如果CPU长期处于高占用率,需要考虑优化

    FPS:在动画效果比较复杂 或者有视频的H5页面中,应该重点关注,防止严重的卡顿

    2、H5性能测试点

    影响H5性能有这几个因素:网络带宽、DNS解析、服务器处理能力等。以下是H5性能的测试点:

    图片

    常用工具

    目前开源的免费的工具很多了,可以根据自己的需要来选用。

    1、WebPageTest

    WebPageTest是一个免费开源的在线性能评测工具;其使用真正的浏览器(IE和Chrome等)与真实的消费者连接速度,可以从全球多个地点运行免费网站速度测试;并依据测试结果提供丰富的诊断信息,包括资源加载瀑布图,页面速度优化检查和改进建议,会给每一项内容一个最终的评级。

    打开官网地址:

    https://www.webpagetest.org

    图片

    在上图中2处输入要测试的URL网址。

    在3处选择地址(Test Location),WebPagetest具有位于世界各地的测试机器,你应该从接近用户访问的位置进行测试,下拉选择就好,可以选择安卓,iOS,PC端等设备,以及不同国家地等;

    在4处选择使用什么浏览器进行测试。不同的位置支持不同的浏览器。

    补充:点击Advanced Setting下拉可以进行高级设置,不过我们一般选择默认就好。

    设置完成后,点击START TEST,开始测试;

    2、Chrome DevTools

    Chrome DevTools(Chrome 开发者工具) 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。

    打开要测试的网页,F12 可以看到Network的选项,在该选项下可以看到相应的网络请求时间和类型,以及资源大小。

    同理,也可以用Charels 等抓包工具来分析。

    图片

    3、Page Speed

    page speed 是google的一个浏览器插件,需要手动安装或者添加在谷歌浏览器,

    打开需要测试的网站,按F12 后,可以看到PageSpeed 的选项。

    点击START 开始分析,测试完成后会产出分析报告

    图片

    4、Lighthouse

    Lighthouse是一个开源的自动化工具,可将其作为一个 Chrome的插件运行,或者从命令行运行。

    通过chrome的应用商店搜索Lighthouse下载安装后,打开需要测试的网页,按F12 ,可以看到LightHouse的选项,

    打开后,点击Analyze page load 就开始分页页面性能,生成性能分析报告。

    图片

    报告样式如下:

    图片

    相关指标含义:

    首次内容绘制(First Contentful Paint):即浏览器首次将任意内容(如文字、图像、canvas 等)绘制到屏幕上的时间点。

    可交互时间(Time to Interactive):指的是所有的页面内容都已经成功加载,且能够快速地对用户的操作做出反应的时间点。

    速度指标(Speed Index):衡量了首屏可见内容绘制在屏幕上的速度。在首次加载页面的过程中尽量展现更多的内容,往往能给用户带来更好的体验,所以速度指标的值约小越好。

    最大内容绘制(Largest Contentful Paint):表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点。

    总的阻塞时间(Total Blocking Time):表示此次分析过程中遇到的阻塞时间

    关于H5性能的指标个工具就介绍这些,希望看了后对你能有所帮助~

    现在我邀请你进入我们的软件测试学习交流群:746506216】,备注“入群”, 大家可以一起探讨交流软件测试,共同学习软件测试技术、面试等软件测试方方面面,还会有免费直播课,收获更多测试技巧,我们一起进阶Python自动化测试/测试开发,走向高薪之路。

    喜欢软件测试的小伙伴们,如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “评论” “收藏” 一 键三连哦!

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 其实可以借用W3C协议完成自动化H5性能测试。 因为W3C标准是浏览器标准,一般浏览器都支持W3C标准,它规定使用者可以通过api查询性能信息。W3C官网:https://www.w3.org/TR/navigation-timing/ 更多关于专项测试的...

    浏览器访问:https://hub.docker.com/_/nginx 查看Nginx镜像详细信息。


    H5性能该如何测试呢?很多人不知道该如何下手。其实可以借用W3C协议完成自动化H5性能测试。

    因为W3C标准是浏览器标准,一般浏览器都支持W3C标准,它规定使用者可以通过api查询性能信息。W3C官网:https://www.w3.org/TR/navigation-timing/

    更多关于专项测试的文章,可以点击公众号关注哦~

    前文使用chrome浏览器对webview进行手工查看,伴随着业务增多,数量加大,手工操作的速度会无法跟上业务增长,此时需要自动化方法测试webview性能。

    当页面加载时,会渲染一系列内容,渲染过程可分为多个阶段,比如下图:

    • Prompt for unload 访问一个新页面时,旧页面卸载完成的时间
    • redirect 重定向,用户注销登陆时返回主页面和跳转到其它的网站等
    • App cache 检查缓存,是否打开
    • DNS 表示 DNS 查询的时间,如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点
    • TCP 与服务器建立链接的时间
    • Requests 客户端发起请求的时间
    • Response 拿到服务器第一个响应字节到最后一个响应字节的时间
    • Processing 各种状态的时间点,例如加载状态等等
    • onLoad 触发load事件执行的时间

    在chrome浏览器中,执行js代码可获取各个阶段的内容:

    window.performance.timing
    
    


    上面的时间只是一个时间点,如果想获取各阶段的具体时间,就需要对两个时间点进行相减运算,比如计算domContent加载事件时间:

    window.performance.timing.\
    domContentLoadedEventEnd -\ 
    window.performance.timing.\
    domContentLoadedEventStart
    
    


    appium/selenium可以执行js,借用appium/selenium工具可实现自动化获取能指标,调用appium/selenium的ExecuteScriptapi,可向页面注入下面代码:

    //显示所有阶段的时间点
    return
    JSON.stringify(window.performance.timing)
    
    //显示指定资源的时间,比如img
    return
    JSON.stringify(window.performance.\
    getEntriesByName (document.querySelector("img").src)[0], null, 2)
    
    
    

    使用python+selenium进行js注入:

    from selenium import webdriver
    driver = webdriver.Chrome()
    driver.get("https://home.testing-studio.com/")
    print(driver.execute_script(
        "return JSON.stringify(window.performance.timing)"))
    

    执行后会返回一个json数据,包含了简介中的各个性能指标,可对性能指标做二次处理或可视化展示:

    {"navigationStart":1585043212714,
    "unloadEventStart":0,
    "unloadEventEnd":0,"redirectStart":0,
    "redirectEnd":0,
    "fetchStart":1585043212717,
    "domainLookupStart":1585043212747,
    "domainLookupEnd":1585043212747,
    "connectStart":1585043212747,
    "connectEnd":1585043212835,
    "secureConnectionStart":1585043212787,
    "requestStart":1585043212836,
    "responseStart":1585043212918,
    "responseEnd":1585043212921,
    "domLoading":1585043212929,
    "domInteractive":1585043214972,"domContentLoadedEventStart":1585043214972,
    "domContentLoadedEventEnd":1585043214972,
    "domComplete":1585043215976,
    "loadEventStart":1585043215976,
    "loadEventEnd":1585043215976}
    
    
    

    内容全面升级,5 个月 20+ 项目实战强化训练,资深测试架构师、开源项目作者亲授 BAT 大厂前沿最佳实践,带你一站式掌握测试开发必备核心技能(对标阿里P6+,年薪50W+)!直推 BAT 名企测试经理,普遍涨薪 50%+!

    ⬇️ 点击“阅读原文”,提升测试核心竞争力!
    原文链接

    获取更多相关资料,请添加微信 ceshiren6
    获取更多技术文章分享
    下载镜像,默认会下载lastest最新版本的软件,可以指定软件的版本。例如:nginx:1.17.9。

    docker pull nginx
    
    
    docker pull nginx:1.17.9
    
    

    运行 Nginx 容器命令为:

    docker run -d --name nginx -p 8088:80 nginx:1.17.9
    
    
    • run:启动一个容器
      • -d:后台守护进行方式运行
      • –name:指定容器的名字
      • -p:映射容器的端口到宿主机,前面宿主机端口,后面容器端口。
      • nginx:1.17.9:容器镜像名称和版本信息

    如果出现“Welcome to nginx!”就表示Nginx服务已经正常启动啦!

    当我们可以访问 Nginx 服务的时候,会发现访问的页面是 Nginx 默认的欢迎页面,我们要怎么样才能访问自定义的页面呢?我们可以用挂载目录的方式让Nginx服务展示我们想要的页面。

    1. 在当前位置新建一个 html 目录,里面放一个新建的 html 文件,名字为 index.html,内容如下。
    2. Hogwarts

    
     Nginx 
     容器
    

    docker run -d --name nginx1 -p 8089:80
    -v ${PWD}/html:/usr/share/nginx/html
    nginx:1.17.9

    
    
    - -p 8089:80映射容器的80端口到宿主机8089端口。
    - - -v ${PWD}/html:/usr/share/nginx/html:-v参数代表挂载一个目录到容器内,前面的目录${PWD}/html代表宿主机的目录,后面的目录/usr/share/nginx/html代表容器内的目录。它们中间用分号隔开。其中${PWD}是一个系统变量,代表当前所在的目录。然后我们在访问宿主机的IP和端口查看一下状态。
    - ![](https://img-blog.csdnimg.cn/img_convert/25c3496e6f54df12cc5d93ab7035e916.png)
    当出现“Hogwarts”时,就代表运行正常,我们就可以把新建的 html 文档都放到 html 目录里面。然后去访问啦!
    
    明天的文章将会告诉大家如何用 Docker搭建测试用例平台 Testlink。Testlink 是基于 WEB 的测试用例管理系统哦。敬请期待。
    
    
    
    
    ### 点个在看你最好看
    ⬇️ 点击“阅读原文”,提升测试核心竞争力!
    [原文链接](https://mp.weixin.qq.com/s?__biz=MzU3NDM4ODEzMg==&mid=2247494485&idx=1&sn=e777571cb47fcab44b7316d36d8d7716&chksm=fd31899eca4600887a43a612d896b8c6d1a80a90d2d63072eda5ee0be936ac4f46f71b2f2359#rd) 
    
    获取更多相关资料,请添加微信 ceshiren6
    [获取更多技术文章分享](https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=csdn2&timestamp=1650855595)
    
    
    展开全文
  • WebPagetest H5性能测试工具入门详解

    千次阅读 2018-04-26 11:06:35
    总结下H5性能测试工具WebPagetest,非常赞的工具 WebPagetest的核心是用于测量和分析网页的性能。有很多选项,看着很吓人,但其实做快速测试是很简单的。 本指南将引导你提交测试和结果解释。 一、运行性能...

    总结下H5性能测试工具WebPagetest,非常赞的工具

    WebPagetest的核心是用于测量和分析网页的性能。有很多选项,看着很吓人,但其实做快速测试是很简单的。 本指南将引导你提交测试和结果解释。

    一、运行性能测试(Running a Performance Test)

    1.1 输入网页网址(Enter The Page URL)

    你需要做的第一件事是决定一个页面来测试。大多数人从他们的网站的主页开始(但不要忽视人们访问的其他页面)。确定要测试的页面后,转到WebPagetest并为其指定要测试的页面的URL:

    1.2 选择位置(Select a Location)

    接下来,应该决定从哪里运行测试。WebPagetest具有位于世界各地的测试机器,你应该从接近用户访问的位置进行测试,从列表中选择一个位置,或者单击Select from Map按钮,从地图视图中选择一个位置(只需单击气球,然后确定)。如果将指针放在气泡上,它们将显示一条消息,提示位置信息:

    1.3 选择浏览器(Select a Browser)

    最后,需要决定使用什么浏览器进行测试。不同的位置支持不同的浏览器,如果给定的位置没有正在寻找的浏览器,可以尝试不同的位置。 Dulles,VA USA位置支持WebPagetest工作的所有浏览器(IE 6,7,8和9)。现在忽略“dynaTrace”浏览器,这些用于更高级的分析。我们通常建议使用IE7进行初始测试,因为它几乎是最糟糕的情况,并且更容易看到很多问题,所以如果你不知道什么浏览器,开始只需使用IE7。

    1.4 提交测试(Submit the Test)

    一切配置完成后,点击START TEST按钮,请求将发送到测试位置进行测试。测试可能需要一段时间才能运行,具体取决于有多少次测试(在测试之前至少有一分钟的测试时间,但是它的时间甚至更长)。一旦测试完成,你将得到结果。

    二、解释结果(Interpreting the Results)

    第一次看到结果信息可能有点吓人,信息量有点大,但首先可以先查看一些关键信息。

    2.1 优化等级(Optimization Grades)

    在结果页面的顶部是一组最关键的性能优化等级。涵盖了适用于所有网站的基本优化,任何不是A或B的都需要进行进一步的优化。

    字母等级占比
    A90%+
    B80% ~ 89%
    C70% ~ 79%
    D60% ~ 69%
    F0% ~ 59%

    2.1.1 阻塞时间(First Byte Time)

    首字节时间是指浏览器收到HTML内容的第一个字节时间,包括DNS查找、TCP连接、SSL协商(如果是HTTPS请求)和TTFB(Time To First Byte)。
    关于First Byte Time和TTFB的区别在Metrics一节中做了简单分析。

    预期首字节 = RTT * 3 + SSL
    比值 = 100 - (实际观测首字节 - 预期首字节) / 10
    

    其中RTT的指往返通信时间。更多网络术语可以参考整理的网络协议

    2.1.2 长连接已启动(Keep-alive Enabled)

    请求网页上的内容(图像、JavaScript、CSS、Flash等)需要与Web服务器建立连接。每次都重新连接会耗费一些时间,所以最好复用连接,keep-alive实现了这个方法。默认情况下,在配置中已启用,而且是HTTP 1.1标准的一部分,但有时它们将被破坏(可能是无意的)。启用keep-alive通常只是服务器上的配置更改,不需要对页面本身进行任何更改,通常可以将加载页面的时间减少40-50%。计算公式如下:

    比值 = 实际复用连接数 / 预期复用连接数
    

    2.1.3 压缩文本(Compress Text)

    除了图片或视频,剩余的都是某种类型的文本(html,javascript,css等)。HTTP提供了一种以压缩形式传输文件的方法。启用文本资源压缩通常只是服务器配置更改,不需要对页面本身进行任何更改,提高性能降低服务内容的成本(通过减少传输的数据量)。由于文本资源通常在页面的开头(javascript和css)下载,因此,提供文本资源的快慢很影响用户体验。计算公式如下:

    比值 = 资源压缩后的大小 / 实际资源的大小
    

    2.1.4 压缩图片(Compress Images)

    图像压缩检查仅查看照片图像(JPEG文件),确保质量不会设置得太高。JPEG图像可以在不降低视觉质量的情况下压缩。我们可以在Photoshop的“网络存储”模式中,使用一种质量级别为“50”的压缩图像的标准。在视觉质量不是很差的情况下,尽量多的压缩图像。在照片中经常包含其他数据,特别是如果照片来自数码相机(包含关于相机,镜头,位置,缩略图的信息),其中一些应该在被发布到网络之前就移除(小心保留任何版权信息)。计算公式如下:

    比值 = 图片压缩后的尺寸 / 图片实际的尺寸
    

    2.1.5 缓存静态内容(Cache Static Content)

    静态内容是网页上不经常更改的内容(图片,javascript,css)。可以配置它们,以便用户的浏览器将它们缓存起来,浏览器决定一个资源被缓存多久取决于2个因素:缓存寿命过期时间(TTL)。资源的寿命可以通过2个标签配置:实体标签(ETags)和首部标签(Last-Modified)。过期时间是根据2个TTL首部标签:Cache-Control的max-age属性Expires Header。如果用户回到页面(或访问使用相同文件的其他页面),他们可以使用已经拥有的副本,而不是重新请求文件Web服务器。在用户浏览器中成功缓存静态内容可以显著提高重复访问的性能(高达80+%,具体优化率取决于页面),并能减少Web服务器上的负载。有时可能很难实现缓存而不改变页面,所以不要盲目地启用它(你需要能够更改希望改变的任何文件的文件名)。

    比值 = 过期资源数得分 / 静态资源总数
    

    这个评级需要一个缓存生命周期评分系统,如果一个静态资源的生命周期超过一周,就100分,超过一小时,最多50分,以上情况之外都是0分。

    2.1.6 合并JS/CSS文件(Combine JS/CSS Files)

    提高性能通常意味着减少对内容的请求数,最简单(最重要的)方法之一是减少在页面开头加载的css和javascript文件数量(在 中会阻塞页面显示)。一个简单的实现方法是将JavaScript和CSS分别合并到一个文件中(CSS最好在JavaScript之前加载)。减少用户从屏幕上看到东西的等待时间,对用户体验有巨大的影响。计算方式:

    2.1.7 使用CDN(Use of CDN)

    每个内容的请求都是从用户的浏览器到Web服务器,再返回。随着距离越来越远,这样一个往返可能消耗很多时间(页面上的请求越多,消耗的时间越多),把你的服务器建立在离用户比较近的地方就能解决这个问题,这正是内容分发网络(CDN)的作用。他们在世界各地都有靠近用户的服务器,从靠近用户的服务器提供网站的静态内容。使用CDN没有意义的唯一情况是如果网站的所有用户都已经接近Web服务器(例如社区网站)。计算方式:

    比值 = 通过CDN服务获取的静态资源数 / 静态资源总数
    

    2.2 高级度量(High-level Metrics)

    结果页顶部的数据表提供了有关已加载页面的一些高级信息:

    2.2.1 首次视图(First View)

    首次视图的测试,将会把浏览器的缓存和Cookie清除,表示访问者第一次访问该网页,将体验到的情况。

    2.2.2 重复视图(Repeat View)

    重复视图会在首次视图测试后立即执行,不会清除任何内容。浏览器窗口在First View测试后关闭,然后启动新浏览器以执行Repeat View测试。重复视图测试模拟的是用户离开页面后,马上再进入此页面的场景。

    2.2.3 文档加载完毕(Document Complete)

    从初始化请求,到加载所有静态内容(图片、CSS、JavaScript等),但可能不包括由JavaScript执行触发的内容,可以理解为开始执行window.onload。原文如下:

    The metrics grouped together under the Document Complete heading are the metrics collected up until the browser considered the page loaded (onLoad event for those familiar with the javascript events). This usually happens after all of the images content have loaded but may not include content that is triggered by javascript execution.

    2.2.4 页面所有元素加载时间(Fully Loaded)

    从初始化请求,到Document Complete后,2秒内没有网络活动的时间,这包括在主网页加载后由JavaScript触发的任何活动。原文如下:

    The metrics grouped together under the Fully Loaded heading are the metrics collected up until there was 2 seconds of no network activity after Document Complete. This will usually include any activity that is triggered by javascript after the main page loads.

    2.2.5 整页加载时间(Load Time)

    Document Complete中的时间属性相同。原文如下:

    The Load Time is the time from when the user started navigating to the page until the Document Complete event (usually when all of the page content has loaded).

    2.2.6 第一个字节加载时间(First Byte)

    这个时间表示从初始化请求到服务器响应后,接收到第一个字节的时间。此时的大部分时间通常称为“后端时间”,服务器为用户构建页面的时间量。原文如下:

    The First Byte time is the time from when the user started navigating to the page until the first bit of the server response arrived. The bulk of this time is usually referred to the "back-end time" and is the amount of time the server spent building the page for the user.

    2.2.7 页面渲染时间(Start Render)

    渲染时间表示屏幕上显示东西的第一个时间点,在这个时间点之前,用户看到的是一个空白页。这并不表示用户看到了内容,可能只是一个简单的背景色,但这是用户开始看到内容的第一个指标,我理解这个为白屏时间。原文如下:

    The Start Render time is the first point in time that something was displayed to the screen. Before this point in time the user was staring at a blank page. This does not necessarily mean the user saw the page content, it could just be something as simple as a background color but it is the first indication of something happening for the user.

    2.2.8 DOM元素数量(DOM Elements)

    在测试结束时测试页面上的DOM元素的计数。

    2.2.10 HTTP请求数(Requests)

    浏览器针对页面上的内容(图片,javascript,css等)发出的请求数。

    2.2.11 传输的字节量(Bytes In)

    浏览器加载页面下载的数据量。它通常也被称为“页面大小”。

    展开全文
  • H5性能测试方案

    2019-12-26 10:00:18
    H5性能测试方案 H5性能优化之前,需要经过一番性能测试,检测各个阶段的耗时时间,从而对症下药,针对耗时较长的阶段进行调试和优化。那么有什么检测的方法呢? App端 long t1 = System.currentTimeMillis(); ...
  • 移动H5性能测试平台解决方案.docx
  • 【腾讯TMQ】移动H5性能测试平台解决方案.docx
  • 从0到1:打造移动端H5性能测试平台

    千次阅读 2016-11-17 18:32:15
    不要紧张,我们来手把手教大家打造自己的移动端H5性能测试平台。【H5前端性能平台可以做什么–功能篇】以前我们要测试移动端H5性能,通常会用到远程连接+抓包分析,工具诸如:fiddler,Charles。或者是一些在线测试...
  • H5性能测试(优化建议)

    千次阅读 2018-01-12 10:36:21
    不要紧张,我们来手把手教大家打造自己的移动端H5性能测试平台。 功能篇 【H5前端性能平台可以做什么】 以前我们要测试移动端H5性能,通常会用到远程连接+抓包分析,工具诸如:fiddler,Charles。或者是...
  • H5性能测试,首屏时间统计(Argus)

    千次阅读 2019-10-01 16:17:41
    主要针对性:H5的游戏性能测试 主要介绍: 独家首屏时间统计: 告别人工掐秒 自动统计首屏加载耗时 细化至每个跳转页面 专利FPS算法: 专利FPS算法更科学地统计H5游戏帧率信息 真实反映衡量游戏流畅...
  • 前端性能测试(H5性能测试):https://www.cnblogs.com/wendyw/p/12443529.html#_label3 在线分析网站响应速度 PageSpeed Insights:https://developers.google.com/speed/pagespeed/insights/
  • 一、开篇:H5 页面加载过程浅析如下图所示,是精选平台打开 H5 页面的几个过程截图 二、实例分析:白屏问题前面我们已经了解了 H5 页面加载过程,接下来如果遇
  • H5性能分析实战来啦~

    2022-04-20 15:41:44
    其实可以借用W3C协议完成自动化H5性能测试。 因为W3C标准是浏览器标准,一般浏览器都支持W3C标准,它规定使用者可以通过api查询性能信息。W3C官网:Navigation Timing 更多关于专项测试的文章,可以点击公众号关注...
  • Argus是腾讯针对手机端H5游戏打造的一款专业性能测试工具,实时采集游戏性能指标,专利FPS算法真实反映H5游戏性能情况。 有以下几个特点: (1)独家首屏时间统计-----告别人工掐秒,自动统计首屏加载耗时,细化至...
  • H5性能优化方案: 链接:https://pan.baidu.com/s/1LCT83dJMmkvXabne3aWnzw 提取码:dc5z H5性能优化报告: 链接:https://pan.baidu.com/s/107TdDXY3xIOinvsjzj7Y8A 提取码:9hql 北京软件测试QQ1群:507088 北京...
  • 前端性能检测的工具 Lighthouse

    千次阅读 2022-04-11 10:37:38
    Lighthouse 是一个非常流行的第三方性能测评工具 支持移动端和PC端 使用它的话 我们要在本地安装一下 npm i lighthouse -g 安装之后我们运行 lighthouse 域名 --view --preset=desktop –preset=desktop 这个是代表...
  • H5测试方法

    千次阅读 2022-02-15 16:44:55
    一 功能测试 1 关注页面请求:请求数据是否正确,相应是否正确,是否有重复请求,造成流量浪费,响应速度变慢 2 关注application cache:cokkie值是否正确,清除cokkie后表现是否正常,获取数据失败是否有重试机制...
  • 如何做好 H5 性能优化

    2022-03-08 14:25:42
    性能测试并优化其性能就显得尤为重要。 二.用户感受 当用户能够在 1-2 秒内打开 H5 页面,看到信息的展示,或者能够开始进行下一步的操作, 用户会感觉速度还好,可以接受;而页面如果在 2-5 秒后才进入可用的...
  • H5性能分析实战

    2022-08-23 23:32:21
    因为W3C标准是浏览器标准,一般浏览器都支持W3C标准,它规定使用者可以通过api查询性能信息。前文使用chrome浏览器对webview进行手工查看,伴随着业务增多,数量加大,手工操作的速度会无法跟上...H5性能该如何测试呢?
  • H5性能测试学习

    2017-06-14 16:30:00
    工欲善其事,必先利其器,在做H5前端性能测试之前,选择合适的工具能让我们的测试工作事半功倍。本文要提到的工具有两类: 一类是抓包工具,如Fiddler、Charles等。这类工具不仅可以抓包,还可以对包进行修改,动态...
  • H5性能测试入门及优化建议

    千次阅读 2017-09-22 10:33:22
    说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。那本文谈到的则是H5前端性能测试,并希望通过阅读本文后,能够知道:H5前端性能...
  • 由于在标准组件参与了比较多运营活动h5页面的性能测试,在终端h5测试过程中发现随着移动设备和网络环境的复杂,使得性能测试越来越重要,所以在此对H5页面的性能测试结果(以及容易出问题的点),做一个总结,给H5...
  • H5游戏性能测试工具 选择与实践总结

    万次阅读 多人点赞 2018-01-16 20:26:13
    本文会对本人在使用白鹭做h5游戏进行性能测试的过程送使用的工具做一些简单记录。 包括 内存,cpu,耗电,启动时间,网络监控,弱网络,流量几个方面介绍。 背景 玩吧提测有一个性能需要求列表。需要每项指标达到...
  • 不要紧张,我们来手把手教大家打造自己的移动端H5性能测试平台。 【H5前端性能平台可以做什么--功能篇】 以前我们要测试移动端H5性能,通常会用到远程连接+抓包分析,工具诸如:fiddler,Charles。或者是一些在线...
  • 实战演示 H5 性能分析

    2022-06-06 11:32:42
    使用chrome浏览器对webview进行手工查看,伴随着业务增多,数量加大,手工操作的速度会无法跟上业务增长,此时需要自动化方法测试webview性能。当页面加载时,会渲染一系列内容,渲染过程可分为多个阶段,比如下图:...
  • 1.平台的目的说到H5性能测试,大家想到最多的是在PC端利用Firebug、Fiddle和HttpWatch等工具进行测试和性能指标的分析,但是如果我们测试的是Android上的H5,我们该如何保证数据准确度、如何测试起来更方便快捷、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,608
精华内容 8,643
关键字:

h5性能测试