前端性能测试分析

原理篇

browser工作原理

web浏览器与web服务器之间通过HTTP协议进行通信的过程。所以，web C/S之间握手的协议就是HTTP协议。

页面的请求过程

请求阶段

  1. browser send url request

  1. 递归寻找DNS server

  1. 连接目标IP并建立TCP连接
  2. 向目标服务器发送http请求
  3. web服务器接收请求后处理
  4. web服务器返回相应的结果【无效、重定向、正确页面等】
  5. 浏览器接收返回的http内容

前端解析阶段

渲染引擎—通过网络获得所请求文档的内容, 解析html以构建dom树->构建render树->布局render树->绘制render树

  1. 开始解析html文件，当然是自上而下，先是头部，后是body
  2. 当解析到头部css外部链接时，同步去下载，如果遇到外部js链接也是下载【不过js链接不建议放在头部，因为耽误页面第一展现时间】
  3. 接着解析body部分，边解析边开始生成对应的DOM树，同时等待css文件下载
  4. 一旦css文件下载完毕，那么就同步去用已经生成的DOM节点+CSS去生成渲染树
  5. 渲染树一旦有结构模型了，接着就会同步去计算渲染树节点的布局位置
  6. 一旦计算出来渲染的坐标后，又同步去开始渲染
  7. 4-6步进行过程中如果遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染原来图片的位置
  8. 同7步，如果渲染过程中出现js代码调整DOM树结构的情况，暂停其它渲染，再次重新来过，从修改DOM那步开始
  9. 最终所有节点和资源都会渲染完成

    分析结束

  10. 渲染完成后开始page的onload事件
  11. 整个页面load完成

最新内容请见作者的GitHub页：http://qaseven.github.io/

时间： 2024-08-02 16:41:39

前端性能测试分析的相关文章

WebPagetest网页前端性能测试工具和实现分析

WebPageTest 原本是由AOL开发内部使用的工具,后来在Google Code上开源, 是一款非常优秀的网页前端性能测试工具. 在线版本http://www.webpagetest.org Google Code: http://code.google.com/p/webpagetest/ 部署WebPageTest 私有实例参考资料 http://testing.etao.com/node/303 http://testing.etao.com/node  如下是作者提供的客户端实现分

右击 -> 查看源文件，和其他一些前端性能测试技巧

最近读了Steve Souders的High Performance Web Sites: Essential Knowledge for Frontend Engineers(O'Reilly, 2007),这本书的副标题是 "14 Steps to Faster-Loading Web Sites".在你发现此书面向对象为开发人员,从而停止阅读之前,考虑以下几点: ● 作者的研究表明,网页响应时间约80%-90%是由前端设计决定的.而我的经验中,这个数字更应该是50%-80%,但我

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

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

前端性能分析优化

分析问题 我们并不仅仅关注页面资源的解析和展示响应时间,而是要关注总时间:我们进行web前端性能测试的目的是计算出包含页面渲染.网络传输以及服务器端解析等综合因素在内的加载时间等指标,对该页面性能进行评估分析,找出影响性能的主要因素和瓶颈,并在此结果的基础上,给出一定的优化建议和解决方案,从而提升用户体验. 根据雅虎团队经验:网站页面性能优化的34条黄金守则,我们逐条分析. 性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所

web前端性能分析--实践篇

当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了.通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的. 不仅支持ie,ff浏览器,还具备js函数级别的优化分析,它的分析数据也是最全面的,分析数据可以导出,最后和yslow,pagespeed一样支持向showslow上面传送结果信息这样就节省了很多的事情了.所以实施方案具体确定为dynatrace用来捕获web前端页面访问的性能数据,然后上传至showslow来浏览测试

web前端性能分析--原理篇

web前端性能: 即是web用户在访问一个页面时所要花费的时间总和.即一个完全意义上的用户响应时间,相对于服务器的响应时间而言还会包括更多的内容和影响因素.那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识,先了解一下用户从浏览器访问一个url后到页面完全展示所有内容的整个过程吧. 页面的请求过程: 1.浏览器的url请求 2.递归寻找DNS服务器 3.连接目标IP并建立TCP连接 4.向目标服务器发送http请求 5.web服务器接收请求后处理

从食堂就餐看性能测试分析

中午在单位食堂吃饭排了个长队,等了好半天.然后就想这不就是在跑性能吗?? 如果把食堂看作一个在线系统,员工吃饭看作是一次业务处理.回过头来看系统性能测试分析中需要关注的点,其实颇有意思 首先最直观的性能表现就是打饭窗口的长队,可以说这是系统性能处理能力最直观的表现了.指标对应ResponseTime 队伍前进的快慢,对应每秒处理事务数TPS 同时进餐人数,对应并发请求数 我们再看看影响性能指标的相关因素 1)打饭窗口数--对应业务处理进程数,有时某个窗口存在多个打饭师傅,这时可以看作是多线程.处

ELK前端日志分析、监控系统

前端日志与后端日志不同,具有很强的自定义特性,不像后端的接口日志.服务器日志格式比较固定,大部分成熟的后端框架都有非常完善的日志系统,借助一些分析框架,就可以实现日志的监控与分析,这也是运维工作的一部分. 什么是ELK ELK在服务器运维界应该是运用的非常成熟了,很多成熟的大型项目都使用ELK来作为前端日志监控.分析的工具. 那么首先,我们来了解下什么是ELK,ELK实际上是三个工具的集合: E:Elasticsearch L:Logstash K:Kibana 这三个工具各司其职,最终形成一整

百度有啊前端框架分析(自定义事件)

      今天早晨从酒店出来,外面下着鹅毛大雪,我的妈呀,我来的时候只穿了一件秋衣,昨天晚上好像所有的天气预报都没有报告今天会下雪,我操,我们的天气预报的仙人们天天在那里说的跟真的一样,这不是骗人吗,但是也没有办法,只能自己想办法怎么能事自己变得更暖和些.          JavaScript中的事件也是如此,浏览器内置的事件不可能帮你把所有的事情都做了,因此遇到特殊事件,必须我们自定义把他实现,那么我们就来来看百度有啊前端JavaScript框架的自定义事件是如何实现的.