JS Create element

JS creates multiple data and inserts a method into the page.

Method One:

The execution time is about 35ms.

This belongs to the use of string concatenation, once again inserted into the page. The disadvantage is that it is easy to cause events to be difficult to bind.

Method Two:

The execution time is uncertain, the minimum is around 80ms, long to reach 180ms or so.

This method is to create a document fragment to save the nodes that need to be inserted, and then insert them into the page at once.

Method Three:

The execution time is basically maintained at around 80ms.

This method is inserted into the page immediately after each node is created, which frequently results in reflow and repaint of the page. It is not recommended to use this method for Dom read and write.

When using jquery to create a document fragment, the method is similar to JS creation, which requires that the jquery object be converted to a DOM object and then manipulated.

It takes more than 300 milliseconds.

JS Create element