Implementing Web performance monitoring based on PHANTOMJS

Reprint, original link http://www.webryan.net/2013/02/web-page-test-based-on-phontomjs/

1. Web Performance Monitoring Background description

In the previous issue of the "Web performance monitoring automation exploration of the road-the first knowledge webpagetest" from the perspective of dependence on webpagetest to do the performance of the daily inspection, but because the dependency structure is relatively complex we need to give a simpler solution. The main reason to test students ' lack of quick input is the relatively large language and maintenance costs. But the solution is diverse. Then we look at the nature of this demand: for the internal and external network environment needs regular site YSlow and page speed check to ensure that the continuous development process to ensure quality.

Comparing Webpagetest, we reflect on the resources and characteristics of our hands:

1, for the fixed HTML structure, we do not need multi-browser support can also get yslow and page speed and other conclusions;

2, WebKit is open-source;

3, Pagespeed and YSlow are open-source SDK;

Then our work becomes very simple, packaged WebKit implements a program that does not need to display the interface (of course, the interface information can be read from the UI thread at any time) to generate the required data files, and generate reports. The process is simplified as follows:

1, through QT or PHANTOMJS and other WebKit packaging tools to get HTTP request data Flow har file (here, using PHANTOMJS);

2, through the Har file to generate requests waterfall, YSlow report and page speed report;

3, by saving the Har file to generate the trend of the site;

4, by modifying the Hosts file to control the intranet test environment;

2, Phantomjs Introduction

PHANTOMJS (http://phantomjs.org/) is a webkit environment that supports the JavaScript API without interfaces and runs on the server side. It controls various modules of WebKit, such as CSS Selector,json,canvas, SVG, and HTTP networks, through JavaScript and Coffeescript. It is ideal for:

1, to do the service side of the website testing, including qunit,jasmin and so on

2, Screen capture

3. Web DOM operation

4, the network situation monitoring

It provides a lot of examples, where netsniff.js is used to monitor network requests and generate Har files. ，：

3. har file (HTTP Archive specification)

HAR (HTTP Archive specification) is a common file format for storing HTTP request/response information, based on JSON. The advent of this format allows the HTTP monitoring tool to export the collected data in a common format, which can be used by other HTTP analysis tools that support har, including Firebug,httpwatch,fiddler, to analyze the site's performance bottlenecks. The current HAR specification is the latest version of Har 1.2. The Har file must be UTF-8 encoded and there is no BOM matter.

HAR data structure:

A har file is a JSON object, as follows:

1{"Log": {2 3"Version": "1.2″,4 5"Creator" : {},6 7"Browser" : {},8 9"Pages": [],Ten  One"Entries": [], A  -"Comment": "" -  the } -  -}

• Version [string]–, default = 1.1.
• Creator [object]– creates the program name and version information for the Har file.
• Browser [object, optional]– browser name and version information.
• pages [Array, optional]– page list, this field can be omitted if the app does not support grouping by page.
• Entries [array]– List of all HTTP requests.
• Comment [string, optional] (new in 1.2) – comment.

Note: Each page corresponds to a <page> object, and each HTTP request corresponds to a <entry> object. If the HTTP Monitoring Analysis tool cannot group the requests by page, then <pages> is empty.

4. Page Speed SDK and YSlow

First we now download the installation SDK on Google's page speed site. http://code.google.com/p/page-speed/wiki/DownloadPageSpeed?tm=2.

The Har file obtained through PHONTOMJS is then parsed.

This is where you can get specific scores and suggestions from the command line.

In the same vein, we can also get yslow scores.

5. HAR Viewer

The Har Viewer (http://www.softwareishard.com/har/viewer/) is a powerful Har analysis tool based on JavaScript that can display har files in the form of waterfall streams and pie charts. Source code here: http://code.google.com/p/harviewer/.

These pictures combine the production of Har and the Pagespeed scoring recommendations are not very cool!

6. The follow-up thing

Store the Har file of the site in the form of a database, creating a trend-comparison document. Set up self-service tools as a site.

Reference URL:

1, http://phontomjs.org

2, Http://httparchive.org/about.php#harfile

3, http://weizhifeng.wordpress.com/2011/03/26/http-archive-specification-chinese/

4, http://www.igvita.com/2012/08/28/web-performance-power-tool-http-archive-har/

5, http://code.google.com/p/page-speed/wiki/DownloadPageSpeed?tm=2

6, Http://groups.google.com/group/http-archive-specification

Implementing Web performance monitoring based on PHANTOMJS