Hi,

in another thread we discussed the best way to a large number of
Controls in a ScrollPanel and/or how to virtualize that.

I tried Mark's approach:

Create a number of TBasicPanel components on a ScrollPanel, align them
and trigger the OnScroll event of the ScrollPanel to "fill" these panels.
That works fine with about 100 panels. With a bigger number of panels I
expected a linear slowdown (100 panels = x ms, 500 panels = 5 x (x ms)).
But that doesn't seem to be true.

Adding layouts to the panel slows down the whole thing (as expected),
but using the Layout.Overflow functionality just makes it unusable.

Here is what I tested (in each case I added another 100 BasicPanels to a
ScrollPanel - Begin- and EndUpdate used of course):

a) No Layout used
      for i := 0 to 99 do
      begin
         with TBasicPanel.create(ScrollPanel1) do
         begin
            Width  := 100;
            Height := 30;
            Left   := 0;
            Top    := i * 30;
         end;
      end;

100 Panels added: 65 ms - Panels total: 100 - Total duration: 65 ms
100 Panels added: 104 ms - Panels total: 200 - Total duration: 169 ms
100 Panels added: 138 ms - Panels total: 300 - Total duration: 307 ms
100 Panels added: 174 ms - Panels total: 400 - Total duration: 481 ms
100 Panels added: 210 ms - Panels total: 500 - Total duration: 691 ms
100 Panels added: 260 ms - Panels total: 600 - Total duration: 951 ms
100 Panels added: 285 ms - Panels total: 700 - Total duration: 1236 ms
100 Panels added: 324 ms - Panels total: 800 - Total duration: 1560 ms
100 Panels added: 354 ms - Panels total: 900 - Total duration: 1914 ms
100 Panels added: 398 ms - Panels total: 1000 - Total duration: 2312 ms

b) Layout used
      for i := 0 to 99 do
      begin
         with TBasicPanel.create(ScrollPanel4) do
         begin
            Width  := 100;
            Height := 30;
            Layout.Position := lpTopLeft;
            Layout.Consumption := lcBottom;
         end;
      end;

100 Panels added: 88 ms - Panels total: 100 - Total duration: 88 ms
100 Panels added: 120 ms - Panels total: 200 - Total duration: 208 ms
100 Panels added: 173 ms - Panels total: 300 - Total duration: 381 ms
100 Panels added: 203 ms - Panels total: 400 - Total duration: 584 ms
100 Panels added: 263 ms - Panels total: 500 - Total duration: 847 ms
100 Panels added: 308 ms - Panels total: 600 - Total duration: 1155 ms
100 Panels added: 367 ms - Panels total: 700 - Total duration: 1522 ms
100 Panels added: 399 ms - Panels total: 800 - Total duration: 1921 ms
100 Panels added: 460 ms - Panels total: 900 - Total duration: 2381 ms
100 Panels added: 502 ms - Panels total: 1000 - Total duration: 2883 ms

c) Layout with OverFlow functionality used
      for i := 0 to 99 do
      begin
         with TBasicPanel.create(ScrollPanel4) do
         begin
            Width  := 100;
            Height := 30;
            Layout.Position := lpTopLeft;
            Layout.Consumption := lcRight;
            Layout.Overflow := loBottom;
         end;
      end;

100 Panels added: 252 ms - Panels total: 100 - Total duration: 252 ms
100 Panels added: 628 ms - Panels total: 200 - Total duration: 880 ms
100 Panels added: 992 ms - Panels total: 300 - Total duration: 1872 ms
100 Panels added: 1377 ms - Panels total: 400 - Total duration: 3249 ms
100 Panels added: 1770 ms - Panels total: 500 - Total duration: 5019 ms
100 Panels added: 2146 ms - Panels total: 600 - Total duration: 7165 ms
100 Panels added: 2579 ms - Panels total: 700 - Total duration: 9744 ms
100 Panels added: 2980 ms - Panels total: 800 - Total duration: 12724 ms
100 Panels added: 3406 ms - Panels total: 900 - Total duration: 16130 ms
100 Panels added: 3883 ms - Panels total: 1000 - Total duration: 20013 ms

Any idea why each loop of adding panels is getting slower?

Uli

Uli Becker wrote:

>> in another thread we discussed the best way to a large number of
>> Controls in a ScrollPanel and/or how to virtualize that.

Hi Uli

This is a great idea. Since you have the code in place, can I ask (a bit cheeky) what happens if you set Layout.Stretch to lsRight but do not use Overflow? I'm wondering what effect the stretch will have, particularly as I guess that would get used quite a lot in the "panel list" scenario.

Cheers
Mark

Hi Mark,

> This is a great idea. Since you have the code in place, can I ask (a bit cheeky) what happens if you set Layout.Stretch to lsRight but do not use Overflow? I'm wondering what effect the stretch will have, particularly as I guess that would get used quite a lot in the "panel list" scenario.

Not cheeky at all! Glad to contribute something here.

I wouldn't use Overflow if a had just one column, but with 2 (or more) columns stretch doesn't work.

Nevertheless here the duration values:

      for i := 0 to 99 do
      begin
         with TBasicPanel.create(ScrollPanel4) do
         begin
            Width  := 100;
            Height := 30;
            Layout.Position := lpTopLeft;
            Layout.Consumption := lcBottom;
            Layout.Stretch := lsRight;
            //Layout.Consumption := lcBottom;
            //Layout.Overflow := loBottom;
         end;
      end;

100 Panels added: 67 ms - Panels total: 100 - Total duration: 67 ms
100 Panels added: 105 ms - Panels total: 200 - Total duration: 172 ms
100 Panels added: 158 ms - Panels total: 300 - Total duration: 330 ms
100 Panels added: 215 ms - Panels total: 400 - Total duration: 545 ms
100 Panels added: 265 ms - Panels total: 500 - Total duration: 810 ms
100 Panels added: 315 ms - Panels total: 600 - Total duration: 1125 ms
100 Panels added: 380 ms - Panels total: 700 - Total duration: 1505 ms
100 Panels added: 439 ms - Panels total: 800 - Total duration: 1944 ms
100 Panels added: 498 ms - Panels total: 900 - Total duration: 2442 ms
100 Panels added: 546 ms - Panels total: 1000 - Total duration: 2988 ms

Uli

Interesting - can you clarify the timing here.

> 100 Panels added: 3883 ms - Panels total: 1000 - Total duration: 20013 ms

Are you saying that the last 100 panels of the 1000 took that long to add? And are you including or excluding the EndUpdate call?

One thing I found was that you had to be sure you were calling BeginUpdate on the right thing, otherwise the update code was being called anyway.

But I presume that the more panels just means more work to calculate the various positions. I expect someone could put it in o(n) notication or something. 8-)


The key though is this is why you don't do this. The browser just has too much work, and you are not getting anything useful from it. The data structure in the DOM is too expensive.

If you virtualise the panel contents instead, then you have that fast performance, and then the updates are fast too.

--

Matthew Jones

Uli Becker wrote:

>> Not cheeky at all! Glad to contribute something here.

Perfect thanks - so stretch has minimal effect - think I'll be sticking to one column then!

Cheers
Mark

Mark,

I also replaced overload by setting the left value in code. That's way faster.
Not at my computer today I will post more results tomorrow.

Uli

Uli Becker wrote:

>> I also replaced overload by setting the left value in code. That's way faster.

Ok. Can you expand on that (when you get back) - thanks again.

Mark,
 
> Ok. Can you expand on that (when you get back) - thanks again.

Sure. I posted the test application with sources here:

https://www.elevatesoft.com/forums?action=view&category=ewb&id=ewb_demos&page=1&msg=257#257

So you can see what I mean and do your own tests.

Uli

Matthew,
  
> Are you saying that the last 100 panels of the 1000 took that long to add?

Yes, and that was my question.

> If you virtualise the panel contents instead, then you have that fast performance, and then the updates are fast too.

That's why I use emtpy BasicPanels. The content is created later depending on the scroll position.
But I need these panels as a container for the content at the right position.

Generally that works fine, the question (see above) is just: why does each subsequent loop of adding a number of panels take more time?

Please have look at the test application I used for my tests:

https://www.elevatesoft.com/forums?action=view&category=ewb&id=ewb_demos&page=1&msg=257#257

Uli

Uli Becker wrote:

>>Sure. I posted the test application with sources here:

Great - many thanks Uli