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

当我们知道了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创建数据库

[sql] view plaincopy

$ mysql -u root -p

mysql> create database showslow;

mysql> grant usage on showslow.* to showslowuser@localhost identified by '... database-password ...';

mysql> grant all privileges on showslow.* to showslowuser@localhost;

mysql> quit

[sql] view plaincopy

$ mysql -u root -p

mysql> create database showslow;

mysql> grant usage on showslow.* to showslowuser@localhost identified by '... database-password ...';

mysql> grant all privileges on showslow.* to showslowuser@localhost;

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上直接查看即可。

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

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

web前端性能分析--实践篇相关推荐

大型网站技术架构（3）：WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器 ...
前端性能分析工具利器
作者:basinwang,腾讯 PCG 前端开发工程师大型项目容易遇到性能问题,一般来说,当我们遇到性能瓶颈的时候,才会开始去进行相应的分析.分析的方向除了业务本身的特点相关之外,常见的还可以借助一 ...
Web前端性能优化思路
本文旨在整理常见Web前端性能优化的思路,可供前端开发参考.因为力求精简,限于篇幅,所以并未详述具体实施方案. 基于现代Web前端框架的应用,其原理是通过浏览器向服务器发送网络请求,获取必要的inde ...
（2020.12.7）初次web前端性能优化记录
(转载公司内部论坛本人文章2020.12.7) 导语: 作为客户端开发,由于项目的需要,最近一年陆续做了很多web前端的需求开发.但过去做的大部分都是单页面的运营H5,上线时间短,一般保证能稳定运行就 ...
web前端性能优化与SEO
web前端性能优化与SEO 网站优化的必要性浏览器的页面优化使用浏览器缓存 css Sprites 压缩 css与js文件的位置减少cookie运输 javascript代码优化数据访问字符 ...
web前端性能(一)
浏览器的加载速度和性能关于性能,我们要先理解整个页面从准备加载新页面,到load事件结束这个过程的细节是什么,怎么完成的,浏览器是怎么加载的,怎么解析的,以及相关的很多细节问题,这些将构成我们性能优 ...
web前端性能优化指南
读过的最简洁,最直接,也最有价值的web前端性能文章 http://www.dbanotes.net/web/high_performance_web_site.html <高性能网站建设指南& ...
前端性能分析工具-Lighthouse
1.前言对于前端开发人员来说,除了实现页面功能外,那就是页面的性能响应问题也要关注.同样对于测试人员在进行性能测试时,也要关注前端页面的性能指标.测试前端性能市面上可以用到的工具也比较多,比如可以用 ...
【JavaWeb】Web前端性能优化
本文目录一. 浏览器访问优化 1.1 减少http请求 1.2 使用浏览器缓存 1.3 启用压缩 1.4 CSS放在页面最上面. JavaScript 放在页面最下面 1.5 减少Cookie传输 ...

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

web前端性能分析--实践篇相关推荐

最新文章

热门文章