Last Updated: February 25, 2016
·
1.176K
· pulkit110

Move, Copy or swap DOM elements?

For jMatrixBrowse, we wanted to have the data available for the user as soon as he reaches a particular cell. We implemented a background caching module for this that loaded all the cells in the matrix in a separate background container so that all the data is available in the DOM when it is required.
The only thing that we needed to take care of was how to swap in the content from the background to the matrix content. Here are some experimental results from three strategies that we tested.

Strategy 1: Load the background data in a separate container and when more cells are required in the matrix, we clone and move the cells from the background container to the main matrix container at the corresponding position.
Strategy 2: Load the background data in the same container as the matrix content but make it initially hidden. Change the top/left of the background cells and show them when new data is required in the matrix.
Strategy 3: Load the background data in a separate container and when new data is required in the matrix, swap the html of the new data in place of the already existing cells.

See the complete results here:
http://pulkitgoyal.in/2012/09/03/645/

Have a fresh tip? Share with Coderwall community!

Post
Post a tip