Backbone.js Performance for IE6 IE7 and IE8

I encounter performance bottlenecks for rendering a large score table from Backbone.js sets in most versions of IE.

How did others get around this problem?

Anyway, can we cache the output in these lower browsers?

+6
source share
1 answer

I assume that you add lines to the DOM one at a time. This probably causes a lot of transitions in the browser, which gives you a feeling of lag / slowness, like line rendering.

The easiest way to increase speed is to limit your interaction with the DOM. Instead of inserting strings into the DOM one by one, paste them all together.

Keep reading the example of what I mean.

What NOT to do:

http://jsfiddle.net/skylar/arkxp/4/

In this example, notice how I add the table to the DOM before adding any of the rows. Bad , because it causes the browser to repaint 1000 times!

It is not right:

this.table = $("<table></table>").appendTo("body"); this.model.each(this.addRow); 

What you should do:

http://jsfiddle.net/skylar/arkxp/5/

In this example, I wait to add a table to the DOM until I have generated all the rows. This means that the DOM only replicates once and should be much faster than the above example.

It is right:

 this.table = $("<table></table>"); this.model.each(this.addRow); this.table.appendTo("body"); 

This is true for any interaction with the DOM. The more you mess with it, the more it will slow down. In fact, it is often said that the fastest way to speed up JS is to limit your interactions with the DOM

If you find that you need to add something to an element that is already inside the DOM, simply set it to display:none or temporarily remove it from the DOM while you are working on it. When you're done, paste it back and you will only be forced to redraw.

As soon as you get the opportunity to optimize your interactions with the DOM, I think you will find many opportunities to improve your application.

Modern browsers limit the reprint of the DOM by caching your requests for updating the DOM and making changes in "chunks". IE (and older browsers) will redraw with every change. This probably explains why your modern browsers work better, despite the excessive interaction with the DOM.

+22
source

Source: https://habr.com/ru/post/914023/


All Articles