IE11 performance #1599

Closed
chmanie opened this Issue Feb 16, 2016 · 5 comments

Projects

None yet

3 participants

@chmanie
chmanie commented Feb 16, 2016

So I built a fairly small app and in it's first rendering phase the component's update() method is called roughly 5.800 times (over all components, I profiled that). The update() method itself calls window.requestAnimationFrame(). These calls to window.requestAnimationFrame(), which just trigger the updated event take about 100s (yes, seconds!) in IE11, whereas Chrome takes about 100ms (yes, milliseconds) for that. I have a couple of questions/remarks here:

  1. Is 5.800 updates too much (over all components, including nested calls) for the initial page render?
  2. Why does IE11 take so long for the window.requestAnimationFrame() calls and Chrome does not (maybe out of scope)?
  3. When I comment out the rAF line, render speed in IE is back to normal

The same applies to the edge browser, btw.

@GianlucaGuarini
Member

Is 5.800 updates too much..?

it's not too much, it's insane :)

Why does IE11 take so long for the window.requestAnimationFrame() calls and Chrome does not (maybe out of scope)?

Probably in your updates you have also DOM updates, calculations.. the chrome V8 javascript engine is really fast compared to Internet Explorer 11

When I comment out the rAF line, render speed in IE is back to normal

I think you have circular events loops in your app, and it's a sign of bad design decisions.

Probably posting a live example could help us finding the problem

@chmanie
chmanie commented Feb 17, 2016

Thank you for your answer, @GianlucaGuarini. I get that what I'm doing is everything else then performant. So I'll try to do some improvements here.

Let me try to explain my situation:

One particular problem I ran into is the following: I define sub-routes inside a component as I wanted the component to be self-contained (getting it's data while reacting so certain routes for example).
So what happens is that I have one update() call once the component is mounted. After that the sub-route kicks in and has to update the component a second time, accordingly. As far as I understand how things work with the update cycle that all nested components are updated as well. So I call update() at least 2 times on all the nested components without being able to do something about it.

The pattern of having sub-routes inside components seems to be not well supported by riot (see also riot/route#51). What is the preferred way to do it then?

Also this is a problem: #1020. I have a list that I include twice (one list is hidden conditionally). But both are evaluated. One idea here would be to not update components that are not mounted (which is done currently). Problem here is that components are updated before they are mounted (why is that?).

Given these problems imagine the following situation:

Imagine having the two aforementioned lists. Each of them contains 100 entries and the list-element component has about 5 nested elements (buttons and such things). This is a fairly simple view which should work like a breeze. Then again at least 1000 calls are made to the update() method (calling requestAnimationFrame()).

Is there some kind of shouldComponentUpdate hook like they have in react? That would be really helpful.

@chmanie
chmanie commented Feb 18, 2016

So I've put together an example (which is basically what I describe above):

http://plnkr.co/edit/syxUnaJlniAE8BoA6V3Q?p=preview

This list loads quite fast on Chrome (0,5s), on IE11 it's very slow (~5sec).

In comparison I also uploaded an example using an older riot version (2.2.0):

http://plnkr.co/edit/PSmKxYMKI8pKX6nFeY08?p=preview

(speed is a lot better)

I know you changed things regarding list performance in the last minor update. But what am I supposed to do in such a situation (that seems to be fairly easy to get in in a complex app)?

@GianlucaGuarini
Member

@chmanie thanks for your example it helps me a lot! I will see what I can do here

@GianlucaGuarini GianlucaGuarini added the bug label Feb 27, 2016
@GianlucaGuarini GianlucaGuarini added a commit that closed this issue Feb 27, 2016
@GianlucaGuarini GianlucaGuarini closes #1599 002519e
@cbxp
cbxp commented Sep 13, 2016

We just received update event for not mounted children (if=false), which broke for us.
Is it normal that unmounted children receive the updated event from here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment