性能学习-了解前端性能测试

  原文:http://www.wangyuxiong.com/archives/51405

   原文:http://www.cnblogs.com/fnng/archive/2012/07/11/2587196.html

  性能测试一直是Web应用中非常受关注的部分,目前大多数人对于性能测试还主要集中在服务器端,重点都会放在服务器端的性能测试与调优,但实际上,除了考虑服务端在足够短的时间内返回页面数据之外,还可以从页面前端考虑。

从用户的感受来看,虽然传输速度受用户带宽的限制。但我们可以通过很多技术来使用户想要看到的页面更快的显示

   Web应用的基础是超文本传输协议(HTTP)和超文本标记语言(HTML),HTTP协议本身是一种面向非连接的协议,HTML语言则是一种用于制作超文本文档资料的简单标记语言。

  对于一个页面而言,“请求”与“返回数据”都可能多次发生,由于HTTP对浏览器下载资源并发请求数量、Cache等方面都进行定义和限制,以及浏览器对于HTML的处理过程所以说,用户所以感受的响应时间中的相当大的一部分并不完全取决于应用的后台处理所需要的时间

  前端性能测试的执行工具有 YSlow,Page Speed ,dyna Trace AJAX Edition,webload,这些关注的性能点有所不同,所有有了将这些工具产生的数据收集起来的工具----showslow---收集数据生成报表

  现在的一些思路:

  1、需要测试的URL可能比较多,所以每次手动添加刷新不太靠谱,所以需要自动化

  2、安装执行插件:FireBug,YSlow,pagespeed,dynatrace

  3、搭建一个showslow,用于收集数据生成报表

前端性能指标说明

  1、Dynatrace时间

    ①首次显示时间(Time to First Impression):在浏览器地址栏输入URL按回车到用户看到网页的第一视觉标志为止

    ②onLoad事件时间(Time to onLoad Event):这个时间是知道浏览器触发onload事件的时间,当初始文档和所有引用的内容完全下载后才会触发这个时间

    ③完全载入时间(Time to Fully Loaded):等于知道所有的onLoad JavaScript处理程序执行完毕,所有动态的或延迟加载的内容都通过这些处理程序触发的时间

  2、页面大小:组成页面的所有资源总大小,图像/css/js的大小也可以单独成为一个指标

  3、请求数量:从网站下载资源时所有网络请求的总数,尽量少

  4、网络方面的指标(yslow中的一些指标的意义)

    ①DNS时间:托管网站资源的每个域名都会发生一次DNS查找,如果你在多个网页之间移动,当前一个页面已经请求过一次DNS查找后,浏览器不会再对同一个域名请求另一个DNS查找,但通过查看总体DNS时间,可以确定是否存在DNS查找时间问题,有可能牵出DNS配置不当的问题

    ②连接时间:根据浏览器和资源的大小不同,浏览器可能会在域名上建立一到多个连接,连接时间就是浏览器与Web服务器建立TCP/IP连接的时间,连接通常会保持打开状态,除非Web服务器命令浏览器关闭连接。当使用SSL建立安全通信时,连接时间也包括SSL握手时间,连接时间过长有以下原因:到Web服务器的网络链接速度较慢,使用了SSl,不允许浏览器保持连接打开

    ③服务器时间:高服务器时间意味着Web/应用程序服务器需要很长的时间请求处理,监视服务器时间对于找出性能瓶颈和应用程序的扩展问题是至关重要的,通过增加Web服务器实现负载均衡,使静态内容的扩展是很容易的,当然也可以购买CDN加速服务来达到同样的目的,但以这种方法实现动态应用程序扩展就行不通

    ④传输时间:这个时间与传输内容的大小、浏览器与服务器之间的链接速度紧密相关,保持低传输时间是确保页面快速载入的关键,可以通过减小总的页面大小,或者通过CDN将内容挡在离最终用户较近的地方改善传输时间

    ⑤等待时间:等待时间与相同域名下资源的数量直接相关,受浏览器同一域名物理网络链接数的限制,访问某个资源时可能必须等待另一个连接的释放,减少资源的数量,或将资源分布在多个域名商,可以有效较少等待时间 

    ⑥域名的数量:托管网站资源域名的数量也很重要,因为它会影响DNS,连接和等待时间,要下载的资源使用额外的域名将会直接减少等待时间

  

  

时间: 2024-10-08 20:50:44

性能学习-了解前端性能测试的相关文章

H5前端性能测试快速入门

说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试.那本文谈到的则是H5前端性能测试,并希望通过阅读本文后,能够知道:H5前端性能测试什么?如何发现问题以及相应的优化规则. 一.浏览器渲染引擎 浏览器是Html解析和页面最终展示的工具,所以测试H5前理解浏览器的工作原理是必不可少的,具体可参考<浏览器工作原理>. 浏览器的主要功能 浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在

SQLite介绍、学习笔记、性能测试

SQLite介绍.学习笔记.性能测试 哪些人,哪些公司或软件在用SQLite: Nokia's Symbian,Mozilla,Abobe,Google,阿里旺旺,飞信,Chrome,FireFox可见SQLite的稳定性及性能是不会有什么问题的,详细列表请参见:http://www.sqlite.org/famous.html. 网上关于SQLite的介绍一抓一大把,总结起来,他有如下特点: SQLite优点及适应场合: 轻量级绿色组件单一文件跨平台查询效率极高使用事务插入速度极快支持limi

为什么学习web前端开发?

本文主要分析web开发的相关方向及技术,为想投入web开发的同学提供下参考. 什么是WEB开发 说到WEB开发就不得不提两种架构模式,B/S架构和C/S架构. 互联网发展初期,大多数系统都是C/S架构,C代表客户端,S代表服务器,常见的软件,比如QQ(WEB版的不算),都是采用这种架构模式.这种架构模式通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境的优势.B/S架构(浏览器/服务器)是随着Internet技术的兴起而出现的,它是C/S架构的改进

前端性能测试工具

概要:要提升前端性能,有两大思路: 1>.减少页面加载所需要的时间. 2>.提升用户的观感,让用户觉得页面更快. 减少页面加载所需的时间,可以从请求的数量.请求的并发度及网络传输时间等方面来着手:而提升用户观感,则主要从让页面尽快开始显示入手. 常用的前端性能测试工具: 1.Apache Benchmark工具,简称ab,命令如下: ab -c[并发用户数量] -n[发出请求的数量] [被测试页面的URL] 2.Firebug工具 Firebug工具是一个备受推崇的.强大的Web开发工具,它提

【转】两款 Web 前端性能测试工具

前段时间接手了一个 web 前端性能优化的任务,一时间不知道从什么地方入手,查了不少资料,发现其实还是蛮简单的,简单来说说. 一.前端性能测试是什么? 前端性能测试对象主要包括: HTML.CSS.JS.AJAX 等前端技术开发的 Web 页面 影响用户浏览网页速度的因素主要有: 服务端数据返回.网络传输.页面渲染等 前端性能测试目的: 计算出包含页面渲染.网络传输以及服务器端解析等综合因素在内的加载时间指标,对该页面性能进行评估分析,找出影响性能的主要因素和瓶颈,并在此基础上,给出一定的优化建

用Docker安装Web前端性能测试工具YellowLabTools

一.YellowLabTools概述 1.YellowLabTools简介 Yellow Lab Tools:是一款开源的Web前端性能测试工具,具有一些在其他工具上无法看到的独特功能,如页面加载时,JavaScript与DOM互动和其他程序代码验证问题. Yellow Lab Tools 偏向于一个发现不良实践的工具,会综合页面权重.请求数.DOM.错误的Javascript.错误的CSS等方面取得一个综合评分.并显示出在加载页面的过程中,DOM 是如何相互影响. 2.YellowLabToo

怎样学习Web前端?如何从基础到深入学习Web前端?

Web前端一直被认为是"上手快"."薪资高"的行业,随着需求的进步和用户需求的提高,Web前端开发人员需求旺盛,吸引了大批的人涌入这个行业.不过如何从基础到深入学习Web前端呢?就这个问题给大家简单分享一下方法. 很多人认为Web前端简单,可以自学,但往往在学习的过程中或求职时碰壁,究其原因还在于自学存在的两大缺陷.首先是自学容易钻进死胡同,没有一个好的学习路线和好的老师引导,你在遇到较难的知识点时就会碰壁,或长时间纠结在这一知识点,又或者是直接略过这个知识点,这都

前端性能测试工具hiper介绍

对前端性能测试工具还不了解,在请教了旁边的前端同事后学习到了简单的工具,在这里总结下. 前端的性能测试测什么? 以下是复制: 渲染引擎工作流 dom树构建:从html标签的解析开始,将各种标签解析为dom树中的各个节点,标签和dom树的中的节点是一一对应关系. 渲染树构建:将CSS和style标签中的样式信息解析为渲染树,渲染树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上. 渲染树布局和绘制:渲染树确定各个dom节点在屏幕中单确切位置,根据渲染树中的颜色等信息绘制出

学习web前端开发感想

1.学习一个技术,不是一看见源代码就是copy,而是仔细阅读后,找到自己想要的,并且自己写出来,自己理解了,下次遇到同样的问题,自己才能解决. 2.在电脑上学习的过程中,我总是先建立一个文本文档,这样便于记录,然后再进行分类到笔记本中... 3.把你看到的每个网页用大脑生成html代码和css布局. 把你看到的每个动画和交互用大脑生成javaScript. 4.一定要养成做好笔记的习惯.并且要学会做笔记. 5.页面中中所有的东西都要放在一个标签里面.否则不好控制. 6.自己的知识库在开始学习的时