On the front-end performance testing tools do not understand, ask at the front end colleague next to learn a simple tool, summarized here under.
What front-end performance test measured?
The following is a copy:
- Rendering engine Workflow
-
dom Tree Construction: start from the parsed html tag will be resolved to the various labels dom each node in the tree, the tree node label and is dom-one relationship.
-
Construction render tree: the CSS style information and parse style tag tree is rendered, the number of rectangles render tree with attributes such as color and size, which are to be displayed on the screen in the correct order.
-
And rendering the render tree layout: dom render tree to determine the respective single node in the exact location of the screen, the information drawn on the page in the color rendering tree.
It is worth noting that this process is done gradually, for a better user experience, the rendering engine will be as early as possible to present the content on the screen, and will not go until after all the construction and layout of html are parsed render tree. It is part of the complete analytical content on the display part of the content, while the rest may also download content over a network.
So one of the key front-end performance testing resources that download and rendering.
Dangdang when ~ ~ tool played
In fact, many browser that comes with developer tools have been very good to complete this feature, such as chrome, just use the command line looks big on that.
https://github.com/pod4g/hiper
Under this recommendation, front-end development of Alipay to do