web前端性能测试小点

关于前端性能的文章:

http://www.cnblogs.com/fnng/archive/2011/09/19/2181894.html

web应用的前端性能响应时间指浏览器的页面加载时间。浏览器的页面加载时间包括对html的解析,对页面图片及css等文件的获取和加载、客户端脚本的执行时间以及对你页面进行展现所花费的时间。这个与并发用户量的大小并没有直接的关系,主要关注:如何提高浏览器下载和执行资源的并发性,如何让浏览器尽快开始渲染页面,如何让浏览器尽可能充分的利用缓存。在yahoo中,到少50个团队通过纯粹的前端性能相关的技巧,将最终用户的响应时间减少了25%以上。

在了解web前端性能时,我们应该知道http协议。

http协议采用请求/响应模型,客户端向服务器发送一个请求,请求头包含请求的方法、URI、协议版本等信息,服务器以一个状态行作为响应,响应的内容包括消息协议的版本、成功或者错误编码加上包含服务器的信息、实体元信息等内容。该协议是一种非面向连接的协议,每个http请求都是独立的。

请求报文的格式:请求行 | 通用信息头 | 请求头 | 实体头 | 报文主体   Method     Request-URI  HTTP-versionCRIF

响应报文的格式:状态行 | 通用信息头 | 响应头 | 实体头 | 报文主体

响应报文的状态码如下:

1XX:信息响应类,表示接收到请求并继续处理

2XX:处理成功响应类,表示动作被成功接收、理解和接收

3XX:重定向响应类,表示为了完成指定的动作,必须接收进一步处理

4XX:客户端错误,表示客户请求包含语法错误或不能正确的执行

5XX:服务端错误,表示服务器不能正确执行一个正确的请求

与前端性能相关的头信息:

1、accept-encoding:告诉服务器所接受的页面的编码方式,gzip使用gzip压缩,deflate不压缩,压缩可以减少下载所需的时间。

2、connection:因为HTTP是费面向连接的,无状态的协议,每一个HTTP请求都会经过“建立连接--请求页面或资源--获得资源--断开连接”的过程。对于小的资源可能建立连接的时间都会超过对资源的处理时间,为了减少时间引入了持久连接。当浏览器和服务器约定好后,当某个资源传输完成后并不立即断开连接,而是等待一段时间,在这段时间内若传输其他的资源就复用该连接,否则就关闭。当值为keep-alive时有持久连接。

3、expires:用于只是返回数据的到期时间。到期时间之前都是从缓存处直接获取相应的资源,之后才会向服务器发送请求获取。

提高前端性能的方法:

1、减少页面加载的时间,

2、减少网络时间:CDN技术,DNS缓存技术,减少文件的尺寸

3、减少发送的请求量:利用浏览器缓存

4、让页面尽早的开始显示

对于前段性能测试的理解:

由于本人之前有两三个月的时间接触了前端,对于前端的知识点比较熟悉,在这方面理解起来不是很困难,对于http协议,用户响应请求的过程都熟悉,但是那个时候并没有详细的考虑到页面的加载时间问题,只是想着将页面呈现出来,而忽略了对于响应时间的要求。由于自己都是在本机上实现的,所以每次想看结果的时候都要等很久,这就是没有使用性能的思想,去减少页面的加载时间,没有考虑周全。现在对于这方面有了更深的理解。

时间: 2024-10-10 07:13:47

web前端性能测试小点的相关文章

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

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

Web前端学习小建议

这里跟大家扯一扯学习前端的小方法,是我自己的学习方法,大家凑合看看,倒也不一定对~ 在写css前,其实html的结构要是比较合理的,这样写css也会比较顺手.在写一个网页之前,建议先琢磨几分钟,不要上来就写.多去看看别人是怎么写的,然后结合自己的项目,心中有一个大致规划.可以先把最外层轮廓写好,先不着急去写某一个具体的部分. 这里给大家分享一些css小技巧: 1.使用reset.css火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同.这种情况下,使用reset.css重置所有的基本样

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

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

web前端知识小笔记(二)

1.if条件语句相关 对于 if 语句括号里的表达式,ECMAScript 会自动调用 Boolean()转型函数将这个表达式的结果转换成一个布尔值.如果值为 true,执行后面的一条语句,否则不执行. 2.arguments相关 通过arguments 对象的length属性,来智能的判断有多少参数,然后把参数进行合理的应用 . 比如,要实现一个加法运算,将所有传进来的数字累加,而数字的个数又不确定. function box() { var sum = 0; if (arguments.le

转 WEB前端性能分析--工具篇

在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ShowSlow 说明: showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件.page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示.只需要在dyn

web前端性能

由于web前端性能测试包含的知识点很多:浏览器工作原理.浏览器缓存.相关的http头信息.http状态码.完整的一个http请求及响应过程.响应时间.web前端性能测试工具以及优化方法等等,所以决定分两篇文章来总结,这一篇主要介绍一些跟web前端性能有关的一些概念,最近也在收集阅读相关文档,一边学习一边理解消化一边总结,有什么不对的希望指出. 浏览器的主要构成: 1>.用户界面 - 包括地址栏.后退/前进按钮.书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分. 2>.

WEB前端性能分析--工具篇【转】

在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ShowSlow 说明: showslow是yslow的数据收集与展示平台http://www.showslow.com/,它是一个开源的php项目,可以用来与firefox的yslow插件.page speed插件或者dynatrace通信,收集插件或程序所发送过来的信息并集中展示.只需要在dyn

想要成为web前端程序员需要掌握哪些技能

Web前端开发工程师已经成为发展中的职业香馍馍.几乎整个互联网行业都缺Web前端工程师,无论是刚起步的创业公司,还是上市公司乃至巨头,空缺一样存在.Web前端开发早已不是做带动画的下拉菜单的时代了,他们已成为互联网主宰者,各行业都用其开发互联网应用,但目前整互联网行业的Web前端开发工程师紧俏,优秀的Web前端工程师简直比大熊猫还稀少.企业正高薪求才,薪资待遇一涨再涨!目前,Web前端如日中天,怎样成为一名优秀的Web前端程序员?本文,千锋重庆小编给你答案. 怎样成为一名优秀的Web前端程序员?

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API.微信后台管理及前端微信小程序的应用方案. 1.基于Web API的微信开发框架 首先我们各个业务模块,都应该围绕着Web API进行展开,