When it comes to H5 performance testing, most people think of using Firebug, Fiddle, HttpWatch and other tools to test and analyze performance indicators on the PC side. However, if we test H5 on Android, How do we ensure data accuracy, how do we make it easier and faster to test, and how can we do performance testing with a simple method?
2. Solutions
With these questions, I studied, thought and discussed deeply, and finally decided on a one-click test solution, that is, users only need to submit a Url, and can get a perfect report.
With these ideas, let’s go into the realization of H5 performance test platform, hand in hand to build H5 performance test platform.
3. Knowledge needed to build a platform
There are many ways to build the platform and languages used. In order to be convenient, fast and efficient, we use Python Web architecture for page display and data interaction, Jenkins for task scheduling and processing, Harviewer for HAR file parsing and waterfall stream display.
Django 3.1
PythonWeb framework
Django uses the MVT framework pattern, model M, View V, and template T. The Django architecture diagram gives you a clear idea of what Django is made of.
3.2 Jenkins
Jenkins is an extensible continuous integration engine, Jenkins is very easy to install and configure, simple to use. The scheduling function of H5 performance test task is realized by Jenkins’ scheduled task function.
3.3 Harviewer
HarViewer is a Har log file created in Json format to visualize Http tracing tools. You can easily display the generated Har file.
4. Platform architecture
The whole platform involves a lot of resources, including Jenkins, H5 platform, Linux Web services and mobile functions.
1) The user submits the Url, and the H5 platform saves the data into the database and adds it to the task queue
2) Jenkins task initiates task execution request to H5 platform every minute, H5 platform queries whether there are waiting tasks, and performs H5 test task and data collection to Python Web interface of Linux if there are
3) After completing the H5 test task, send the test results to the H5 platform for parsing and warehousing
4) After the result is completed, the request page will automatically jump to the result page or view the result information in the task list
Note: The previous calls of H5 platform, Jenkins and Linux Web services used Http GET/POST requests.
5. Platform implementation
5.1 Implementation of H5 Performance platform functions
According to Djangos architectural flow logic, it is easy to implement the flow from Http request to View /Http response.
1) The user opens a link in the browser
2) When Django receives an Http request, it looks for the url in the configuration file
3) GetHtmlControllerView implements request parameter fetching, database query and return to View.
4)Finally, the display of the page is realized in Template, including Html, CSS and JS.
5.2 Implementation of Jenkins task scheduling
Jenkins task scheduling mainly implements the configuration of scheduled tasks and Http request.
1) Jenkins task configuration
Configure a job in Jenkins and set the scheduled task to be executed once every minute.
Specifies the batch task to execute in the configuration information
2) Python code for Http request implementation
Easily access an Http request with Httplib in Python.
6. Platform page function explanation
6.1 H5 Request Page
The USER submits a Url on the page, and the H5 platform stores the Url in the database and queries the task execution status every 5s. At present, the platform only supports the company’s Wifi test, and will be extended to more mobile phones and various networks for H5 performance test.
6.2 H5 Task List
After submitting the H5 page test, the user can view the queuing and execution of the task in the task list. If the execution is complete, the user can view the result
6.3 Display results in details
The result page provides a wealth of H5 performance indicators, including 11 key indicators, domain name resource statistics, resource statistics, image resource statistics, and detailed suggestions and terminal waterfall flow. It can be analyzed and positioned based on these indicators and detailed recommendations.
Copyright, prohibit reprint