0

Prevent page redraw while resizing browser window

asked 2020-12-15 07:13:10 +0800

54patman gravatar image 54patman
13 3

I have a complicated layout with Borderlayouts within Borderlayouts. As well I have a lot of data which constructs a large DOM. I can remove many of my Borderlayouts but when I resize the browser window the layout (not sure which one) will redraw the whole page which takes a while to render (10-12 seconds). I noticed that it will render multiple steps during the resize of the window.

How do I prevent the relayout and render while window resizing. I only need it to redraw and render when the user releases the mouse. Before I investigate Event.stopPropagation() and hope it works client side, maybe there's a setting or strategy. I couldn't find anything Also I can't enable Render On Demand I don't have EE, just a FYI.

Thanks in advance for any help.

delete flag offensive retag edit

5 Answers

Sort by ยป oldest newest most voted
0

answered 2020-12-15 12:45:46 +0800

hawk gravatar image hawk
2710 1 5
http://hawkphoenix.blogsp... ZK Team

which zk version? do you register any onAfterSize listener?

It's usually no easy, straight-forward solution for a performance problem. The solution depends on the root cause/bottleneck. It could be server-side or client-side. Please find the performance bottleneck first by reading https://www.zkoss.org/wiki/ZKDeveloper%27sReference/PerformanceMonitoring/StepbyStepTrouble_Shooting

After you share with us about your finding, then we can discuss which solution suits your case.

link publish delete flag offensive edit
0

answered 2020-12-16 09:29:08 +0800

54patman gravatar image 54patman
13 3

updated 2020-12-16 09:42:20 +0800

cor3000 gravatar image cor3000
5613 2 7
ZK Team

Thanks for the tips. The version is 9.5 CE. I have investigated the and it's not serve side. My laptop has a lot of ram and CPU. I made this zkfiddle to illustrate:

https://zkfiddle.org/sample/2qnpsco/3-resize-issue-and-redraw-during-window-resize

Wait for the Borderlayouts and content to render on screen. Now restore (un-maximize) your browser window and start to resize it. Resize the window in a jerking motion, 3-4 and release the mouse. Notice the Borderlayout performs multiple recalculations (2-3) of the children before occupying the correct space. You can also collapse the East and North panels but the effect is not as pronounced.

From Chrome dev tools my code/application, and the fiddler, the time spent is in Scripting and Rendering, and that's it. In network and other tabs it's not the server or other factors. This is why it's important to wait until the page is fully rendered before testing.

Yes the content is a large DOM. But, I tested the fiddler with 9.0.0.1 and it's much better and more fluid. But I didn't performance test.

What I'm hoping for is to delay the recalculation until the mouse release event, if possible.

Thanks again for the support.

link publish delete flag offensive edit
0

answered 2020-12-16 15:57:45 +0800

hawk gravatar image hawk
2710 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2020-12-16 16:03:21 +0800

Thanks for the zkfiddle. After I do a performance profiling, it's caused by size reset and applying css flex for many <hlayout height="100%" hflex="1" >

image description

It looks like ZK does something more. I will post a bug to improve this case.

If this is your use case, the workaround would be to replace hflex="1" width="100%" if it gives you the same result.

What you suggest "to delay the recalculation until the mouse release event", which is impossible. Since you can't detect a mouse down when resizing a browser because it clicks outside of a web page.

link publish delete flag offensive edit

Comments

Thanks for the investigation. I'll make the change to use width instead. Is the issue with Borderlayout? I use it for convenience but I can mimic it's functionality with vlayout and hlayout.

54patman ( 2020-12-16 20:06:56 +0800 )edit

No. it's not specific to borderlayout. It's because there are many components with hflex=1. ZK has to process them.

hawk ( 2020-12-25 09:26:39 +0800 )edit
0

answered 2020-12-29 18:29:57 +0800

hawk gravatar image hawk
2710 1 5
http://hawkphoenix.blogsp... ZK Team

But comparing chrome profiling results between 9501 and 9001, they look quite similar for these 2 versions.

image description

In both cases, beforeSize() and fixCSSFlex() consume most of the time.

If you feel 9.0.0.1 is much better, could you do client-side profiling?

link publish delete flag offensive edit

Comments

Thanks for the follow up. I tested with the fiddler link I posted and using Chrome debug tools version 9.0 was faster. But my biggest tests was visual inspection. If I change the fiddle to 9.0 and perform the same dragging the refresh is better and faster. I'll try and pull up some numbers.

54patman ( 2020-12-30 03:13:35 +0800 )edit
0

answered 2021-01-04 11:00:20 +0800

hawk gravatar image hawk
2710 1 5
http://hawkphoenix.blogsp... ZK Team

Please try 9.5.1.FL.20201230-Eval that improves the rendering performance.

link publish delete flag offensive edit

Comments

Thanks for the follow up. Is this release live, it's not in http://mavensync.zkoss.org/maven2/org/zkoss/zk/zk/

54patman ( 2021-01-07 06:41:23 +0800 )edit

the repository you found is CE, please download EE Evaluation from a different repo http://mavensync.zkoss.org/eval/org/zkoss/zk/zk/

hawk ( 2021-01-08 11:16:51 +0800 )edit

I'm unable to test as changing from CE to EE breaks my code. It would take me days to debug fix the issues. If you can generate a CE version I would be happy to test. Thanks for the follow up.

54patman ( 2021-01-10 19:43:54 +0800 )edit

Since there is only ee evaluation for 9.5.1, if you want to test CE. You need to wait for CE release.

hawk ( 2021-01-13 15:00:51 +0800 )edit

Ok thanks for the update. I'll test the official release when ready and I'll let you know what I get as a result. I apricate the support!

54patman ( 2021-01-13 20:27:43 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2020-12-15 07:13:10 +0800

Seen: 26 times

Last updated: Jan 12

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More