Using the enjoy meta-mode to solve the problem of slow parsing of web pages caused by too many DOM elements

I also do not know should be for the idea of this article to take a more appropriate title, but feel in line with the idea of the Yuan model.

In some Web applications, sometimes a super huge list, thousands of rows, then most of the browser parsing is very painful (it is possible to die directly).

Perhaps you would say that you can load pages or dynamically? But is it possible that the demand does not allow paging, dynamic loading? Network delays can also lead to bad experiences.

Then the appropriate time to introduce the implementation of the idea of this article, there is a need for students can refer to the realization.

First, the final effect:

The main ideas are as follows:

First, create the three div,scrollbar shown to show the specific scrollbar (CSS needs to be set ZIndex, to be displayed on the bottom of demo-list), Real-panel is used to calculate the actual height of the list (each Li's height is fixed, The number of data is also known, so that the actual height of the list can be calculated, Demo-list is mainly used for the current scrollbar height corresponding to the actual data (CSS needs to set the ZIndex, displayed in the upper layer of scrollbar, You need to use JS to calculate the width equal to the width of the Real-panel, which just covers the area outside the underlying scroll bar.

Then, using KO to bind the data, due to the two-way binding of KO, we can no longer implement the scrolling scroll bar when the data changes brought about by the update operation.

Finally, it's compatibility. The concrete realization of this paper has perfect effect on Ie6\7\8\9\10\11,firefox,chrome,edge.

Using the enjoy meta-mode to solve the problem of slow parsing of web pages caused by too many DOM elements