Performance analysis of Web front end--practice

When we know the key points of Web front-end performance, then the next thing to do is to implement and get the data of these key points. Through the previous learning to know a lot of good tools, after the comparison of personal feel dynatrace is still good.

Not only supports the Ie,ff browser, but also has the JS function level optimization analysis, its analysis data is also the most comprehensive, the analysis data can be exported, finally and yslow,pagespeed like support to the showslow above to transmit the result information to save a lot of things. So the implementation is specifically identified as Dynatrace used to capture the Web front page access performance data, and then uploaded to Showslow to explore the test results.

Dynatrace Installation and use
1. Download and install Dynatrace Ajax Edition
2, from the start-the program can open the tool
3, the default state after starting IE is not connected to Dynatrace
4. Click the leftmost connection of Dynatrace plugin on IE
5. The current URL page will automatically refresh after successful connection
6. Refresh the browser node on the Dynatrace tool interface at this time
7. Data analysis chart can be seen after loading test data successfully


Installation of the Showslow site
Showslow is an open source PHP project designed to show performance data for multiple test tools, such as YSlow. It has an online version, but also support your next source in your own company to build a local version of the Showslow. So here we will build a private Showslow site.
1, download Showslow, and extract to a local directory
2, download and build Showslow site of other support programs, such as Web server, PHP, MySQL and so on
3, download Apache2.2,,nginx can also, other support PHP execution of the Web server is OK "but the configuration may be a bit troublesome"
4, download PHP program, preferably 5.3, and is a thread-safe version "otherwise some modules do not have, and choose Apache 2.2 x-modle, and install the extension"
5, download mysql5.5 and above, this default installation option is available


Configure each Support program:

Official Note Link: http://www.showslow.org/Installation_and_configuration

Apche configuration:
1, first test the default after the installation can work
2. Modify the httpd.conf configuration file
3, remove the following 3 modules loaded annotation symbols: mod_deflate, mod_rewrite and Mod_expires
4. Add a line module load statement loadmodule php5_module "X:/.../php/php5apache2_2.dll"
5. Add the following 2 types of Web request type pages: "Between <ifmodule mime_module> tags"
AddType application/x-httpd-php. php
AddType application/x-httpd-php. phtml
6. Add a line of PHP config file directories at the bottom of the document: Phpinidir "x:/.../php"
7, modify the path of DocumentRoot for you to extract the directory of Showslow "Remember there are two, there is a <directory > tag"
8, for DirectoryIndex add a default php browse File: Shape: DirectoryIndex index.php
9, browse the following index.php page, if the contents of the PHP source code file is displayed, then the above configuration is not a big problem

PHP Configuration:
1. Open the configuration file in the PHP installation directory php.ini
2, cancel the following 2 extension module comment symbol: Php_mysql.dll,php_mysqli.dll

MySQL configuration:
1. Test if MySQL is installed correctly
2. Create a database for Showslow

[SQL]View Plaincopy

1. $&NBSP;MYSQL&NBSP;-U&NBSP;ROOT&NBSP;-P&NBSP;&NBSP;
2. MySQL > create DATABASE&NBSP;SHOWSLOW;&NBSP;&NBSP;
3. mysql> grant usage  On showslow.* to [email protected] identified  by 
4. mysql> grant all  privileges on showslow.*  to [email protected];  
5. MYSQL>&NBSP;QUIT&NBSP;&NBSP;

3, modify the Showslow extract directory under the config.sample.php file named config.php
4, modify the database connection information of the file, according to the database name created above, user name, password can be
5, create a table structure for Showslow, by running Showslow extract the dbupgrade.php under the main directory and the users sub-directory dbupgrade.php file "If you can run the make command in the home directory under Linux"

OK, now that all the configuration has been completed, you can again access our configured URLs, is not already able to access the normal.


Integrated Dynatrace and Showslow:
2 individual programs have been installed to complete the use of cooperation, in fact, integration is in the Dynatrace main program interface, or called the Agent interface for an upload operation.
1. Click to view a summary page of previously recorded performance data
2. Select a URL address in the upper right window
3, right-click, select Upload to Showslow.com

However, you should not be able to play after the order, because you also need to add some configuration in the dynatrace configuration file :
1. Open dynatrace configuration file Dtajax.ini, in the installation directory
2, add the following configuration line
-dcom.dynatrace.diagnostics.ajax.beacon.uploadurl=http://www.showslow.com/beacon/dynatrace
-dcom.dynatrace.diagnostics.ajax.beacon.portalurl=http://www.showslow.com/
The location where the first behavior is uploaded, that is, where the data is transferred; in fact, it points to a PHP file that is used to receive the JSON string that was sent in the past and stored in the Showslow database.
Second behavior after manual upload prompts you to open the Showslow page to view the URL address of the data analysis
3, now go to upload once, and then go to Showslow home Refresh once

In an environment integrated into automated testing:

Let dynatrace automatically upload data:

In fact, Dynatrace does not have any external standard interface can be called by automation, but it provides some simple configurable options, such as can be configured in the Dtajax.ini file automatic upload,
Specifically, add the following line:

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

to automatically capture web browsing data when automated test execution occurs:
There is also an environment variable that can be configured Dynatrace, because when the browser installs the Dynatrace plug-in, each time the plug-in will check the specific environment variable, if its value equals a specific configuration will
As a parameter initialized to a plug-in, where there is an environment variable that supports the switch function as a tool, you can control the dynatrace indirectly by controlling the values of these environment variables when running automated tests.
Depending on the version there will be different names of environment variables, specifically, you can see here. Https://apmcommunity.compuware.com/community/display/AJAXFORUM/Automation+with+dynaTrace+AJAX+Edition
Where the 3.x environment variables are as follows:
Dt_ae_agentactive=true
Dt_ae_agentname= "Any string name"
Each browser instance you launch will open the Dynatrace proxy feature by default, so all page access data throughout the automated testing process will be collected, and after you close the browser after your test is completed
Automatically send all the data to the specified showslow above, after the test can also send mail to the relevant personnel to showslow directly to view.


PS:
About the use and analysis of Showslow can look at this article:
http://blog.dynatrace.com/2009/11/17/a-step-by-step-guide-to-dynatrace-ajax-edition-available-today-for-public-download/
how to integrate into automation can look at these articles:
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/

Finally there are other questions to go to its community to ask, go to its blog to search, all the contact information on the default main interface of Dynatrace is prompted

Performance analysis of Web front end--practice