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

时间:2022-02-18 00:23:51

当我们知道了web前端性能的关键点后,那么接下来要做的就是如何去具体实施并获取这些关键点的数据了。通过前面的学习知道了不少好的工具,经过对比后个人觉得dynatrace还是不错的。

不仅支持ie,ff浏览器,还具备js函数级别的优化分析,它的分析数据也是最全面的,分析数据可以导出,最后和yslow,pagespeed一样支持向showslow上面传送结果信息这样就节省了很多的事情了。所以实施方案具体确定为dynatrace用来捕获web前端页面访问的性能数据,然后上传至showslow来浏览测试结果。

dynatrace安装与使用
1、下载并安装dynatrace ajax edition
2、从开始--》程序就可以打开该工具
3、启动IE后默认状态是没有连接到dynatrace
4、点击ie上dynatrace插件的最左边的连接
5、连接成功后会自动刷新当前url页
6、此时刷新dynatrace工具界面上的browser节点
7、载入测试数据成功后就能看到数据分析图表

showslow站点的安装
showslow是一个开源的php项目,主要用来展示多个测试工具的性能数据,比如yslow等。它有一个线上版的,也支持你下一个源码在自己的公司搭建一个本地版showslow。所以这里我们会搭建一个自己私人的showslow站点。
1、下载showslow,并解压到一个本地目录
2、下载搭建showslow站点的其他支撑程序,如web服务器、php、mysql等
3、下载apache2.2,,nginx也可以,其它的支持php执行的web服务器都行【但是配置可能有点麻烦】
4、下载php程序,最好是5.3的,而且是线程安全的版本【不然有些模块没有,而且安装时选择apache 2.2 x-modle,以及安装扩展插件】
5、下载mysql5.5及以上的,这个默认安装的选项就可以了

配置各支持程序:

官方说明链接:http://www.showslow.org/Installation_and_configuration

apche配置:
1、先测试一下默认的安装后是否可以工作
2、修改httpd.conf配置文件
3、去掉以下3个模块加载的注释符号: mod_deflate, mod_rewrite and mod_expires
4、添加一行模块加载语句LoadModule php5_module "x:/.../php/php5apache2_2.dll"
5、添加以下2种web的请求类型页:【在<IfModule mime_module>标签之间】
AddType application/x-httpd-php .php
AddType application/x-httpd-php .phtml
6、在文档最下方添加一行php配置文件的目录:PHPIniDir "x:/.../php"
7、修改DocumentRoot的路径为你解压showslow的目录【记住是有两处,还有一个在<Directory >标签处】
8、为DirectoryIndex添加一个默认的php浏览文件:形如:DirectoryIndex index.php
9、浏览以下index.php页,如果显示了php源码文件内容,则上述配置没有什么大问题

php配置:
1、打开php安装目录中的配置文件php.ini
2、取消以下2个扩展模块的注释符号:php_mysql.dll,php_mysqli.dll

mysql配置:
1、测试mysql是否安装正确
2、给showslow创建数据库

  1. $ mysql -u root -p
  2. mysql> create database showslow;
  3. mysql> grant usage on showslow.* to showslowuser@localhost identified by '... database-password ...';
  4. mysql> grant all privileges on showslow.* to showslowuser@localhost;
  5. mysql> quit

3、修改showslow解压目录下的config.sample.php文件名为config.php
4、修改该文件的数据库连接信息,按照上面创建的数据库名,用户名,密码即可
5、给showslow创建表结构,通过运行showslow解压主目录下的dbupgrade.php和users子目录下dbupgrade.php文件【如果是在linux下可以在主目录运行make命令即可】

ok,现在所有的配置都已经完成了,可以再次访问我们配置的网址,是不是已经可以正常访问了。

集成dynatrace和showslow:
2个程序单独的都已经安装完成就可以合作使用了,其实集成就是在dynatrace主程序界面,或者叫代理界面中进行一个上传操作即可。
1、点击查看之前录制的性能数据的概要页面
2、在右边上方窗口中选择一个url地址
3、右键之,选择上传至showslow.com

不过点过之后应该没有起到作用,因为还需要在dynatrace的配置文件添加一些配置:
1、打开dynatrace的配置文件dtajax.ini,在安装目录
2、添加如下配置行
-Dcom.dynatrace.diagnostics.ajax.beacon.uploadurl=http://www.showslow.com/beacon/dynatrace
-Dcom.dynatrace.diagnostics.ajax.beacon.portalurl=http://www.showslow.com/
第一行为上传的位置,即数据传输到哪;其实是指向了一个php文件,这个文件用来接收发送过去的json字符串,并存储在showslow的数据库中
第二行为手动上传后提示你打开showslow页面查看数据分析时的url地址
3、现在再去上传一次,然后去showslow首页刷新一次

集成到自动化测试的环境中:

让dynatrace自动上传数据:

其实dynatrace没有任何的外部标准接口可以被自动化所调用,但是却提供了一些简单的可配置的选项,比如可以在dtajax.ini文件中配置自动上传,
具体为添加如下行即可:

-Dcom.dynatrace.diagnostics.ajax.beacon.autoupload=true

让自动化测试执行时自动捕获网页浏览数据:
还有一个可以配置dynatrace的地方就是环境变量,因为当浏览器安装了dynatrace的插件后,每次启动插件都会去检查特定的环境变量,若其值等于特定的配置则会
作为初始化为插件的参数;而其中就有环境变量支持作为工具的开关功能,在运行自动化测试时可以通过控制这些环境变量的值就可以间接的控制dynatrace了。
因版本不同会有不同的环境变量名,具体可以看一下这里。https://apmcommunity.compuware.com/community/display/AJAXFORUM/Automation+with+dynaTrace+AJAX+Edition
其中3.x的环境变量如下:
DT_AE_AGENTACTIVE=true
DT_AE_AGENTNAME="any string name"
这样你启动的每一个浏览器实例都会默认打开dynatrace的代理功能,所以整个自动化的测试过程中的所有页面访问数据都会被收集,同时在你测试完成关闭浏览器之后会
自动发送所有数据到指定的showslow上面,测试结束后还可以发送邮件给相关人员去showslow上直接查看即可。

PS:
关于showslow的使用和分析可以看这边文章:

http://blog.dynatrace.com/2009/11/17/a-step-by-step-guide-to-dynatrace-ajax-edition-available-today-for-public-download/
如何集成到自动化可以看这些文章:
http://blog.dynatrace.com/2009/11/04/5-steps-to-automate-browser-performance-analysis-with-watir-and-dynatrace-ajax-edition/
http://blog.dynatrace.com/2010/05/21/how-to-use-your-selenium-tests-for-automated-javascriptajax-performance-analysis/
http://blog.dynatrace.com/2011/01/05/5-steps-to-setup-showslow-as-web-performance-repository-for-dynatrace-data/

最后有其他问题可以去它的社区去问,去它的博客去搜,所有的联系方式在dynatrace的默认主界面上都有提示

转 web前端性能分析--实践篇的更多相关文章

  1. Web前端性能分析

    Web前端性能通常上代表着一个完全意义上的用户响应时间,包含从开始解析HTML文件到最后渲染完成开始的整个过程,但不包括在输入url之后与服务器的交互阶段.下面是整个过程的各个步骤: 开始解析html ...

  2. 转 web前端性能分析--分析篇

    通过具体实施后就可以获得第一手的web前端性能的数据了,然后每次新版本都跑,这就会获得大量的数据,为性能分析提供了基础的输入,同时应该还要综合使用多种工具去从不同的方向收集数据:比如showslow同 ...

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

    在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ...

  4. 转 web前端性能分析--原理篇

    转自http://blog.csdn.net/five3/article/details/7686715 web前端性能: 即是web用户在访问一个页面时所要花费的时间总和.即一个完全意义上的用户响应 ...

  5. web前端性能优化指南&lpar;转&rpar;

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  6. Web前端性能优化教程05:网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  7. web前端性能概述

    1.认识前端性能 不管你的网站设计的有多好,后端有多好,对于用户来说全部都是无感知的,用户只关心页面打开的速度,而前端性能表现很大程度上影响着用户的这种感知. 改善前端的性能对用户感知的整体性能提升有 ...

  8. web前端性能优化指南

    web前端性能优化指南 web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loadin ...

  9. web前端性能调优(二)

    项目经过第一波优化之后APP端已基本已经符合我们的要求了,但是TV端还是反应比较慢,页面加载和渲染都比较慢了一点,我觉的还是有必要在进行一些优化,经过前面的优化,我们的优化空间已经小了一部分,不过还是 ...

随机推荐

  1. 开源网站&period;NETMVC&plus; Layui&plus;SqlSugar&plus;RestSharp

    SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 ...

  2. bash里面的一些符号说明

    $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行的命令的结束代码(返回值) $- 使用Set命令设定的Flag一览 $* 所有参 ...

  3. PHP7革新与性能优化

    有幸参与2015年的PHP技术峰会(PHPCON),听了鸟哥(惠新宸)的关于PHP7的新特性和性能优化的分享,一切都令人感到激动.鸟哥是国内最权威的PHP专家,他的分享有很多非常有价值的东西,我通过整 ...

  4. 病毒侵袭持续中 - HDU 3065(AC自动机,判断子串个数)

    分析:依然是一个模板题,不过在写建立失败指针的地方竟然写错了三次....看来现在状态不太好.   代码如下: ============================================= ...

  5. rpc远程过程协议调用

    在linux 5.X以及下的版本你可以通过service portmap status命令查看rpc是否启动.如果提示running,表示正在运行:如果提示stop就是关闭了.如果没有安装,则通过安装 ...

  6. Inno Setup入门(五)&mdash&semi;&mdash&semi;添加readme文件

    这个实现起来很简单,就是在[files]段中的某个预先作为readme的文件后面添加标志位isreadme: [setup] ;全局设置,本段必须 AppName=Test AppVerName=TE ...

  7. 读zepto源码之工具函数

    读zepto源码之工具函数 Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性.目 ...

  8. mac 上使用 zip 版的mysql

    1. 下载: 2. 解压,然后复制到需要的目录下 3. 修改 /usr/local/mysql的所有者为mysql: chown -R mysql:mysql mysql (这一步我是没做,爱做不做. ...

  9. poj1734 Sightseeing trip【最小环】

    Sightseeing trip Time Limit: 1000MS   Memory Limit: 65536K Total Submissions:8588   Accepted:3224   ...

  10. java语言登陆界面(菜鸟版)

    最近在看的Java入门书是<Head First Java>,一本很棒的Java书. 老师要求的程序流程图我没有,之前我们的做法是写完代码再画流程图,我想这样的做法是不对的,流程图应该是在 ...