BackBone JS rendering multiple views performance issues

34
September 11, 2019, at 10:10 AM

I have a single page which is implemented using backbone. There are a minimum of 1000 views for the page. All the views are arranged in order in the page.

Few models will be dependent on other model. Let's say there are 500 models which are dependent on one model. Let this model be X. Now when model 'X' gets updated, all it's dependent models should also update and respective views will also be rendered. I have solved this problem in following way:

Solution: I have created a map where key is model 'X' and value is the array of all the dependents of model'X'.

var map = {
    model_X_obj: [dependent_model_obj_1, dependent_model_obj_2, ...till 500]
}

Now if model 'X' is changed, I'm looping through it's dependent array and updating all the dependent models one by one. The respective views also get updated. The problem is, it is taking lot of time to render all the views. The page gets stuck during this process.

Note: I have checked that each view render does not take time, but all views together is taking time.

How to solve this problem so that it doesn't take much time to update all models and render views? Is there any way to achieve this?

READ ALSO
jQuery fade in and animate at the same time on document ready

jQuery fade in and animate at the same time on document ready

I have a modal popup that I'm trying to get to fade in and animate at the same time when the document is ready but I can't get it to functionI can fadeIn just fine:

31
Is it possible to pass raw video frame TO a browser?

Is it possible to pass raw video frame TO a browser?

Is possible to pipe raw video frames to a browser/website? For instance the decoding could be done locally in Gstreamer, and then that could be forwarded somehow to a browser

43
Navbar link margin classes seem repetitive in Tailwind CSS, is there a better way?

Navbar link margin classes seem repetitive in Tailwind CSS, is there a better way?

Having to add margin classes to each LI seems REALLY repetitive on a menu that is not being dynamically generatedThis feels dirty like using style="" attributes

30
What is this “normalize.less” I see in F12 Developer Console?

What is this “normalize.less” I see in F12 Developer Console?

I am having trouble finding information on this "normalizeless" thing I'm seeing in the Chrome 76 developer console

43