Strange browser behaviour - I need your thoughts

Wappler General
1

The problem is the stuttered or delayed drawing of elements (red lines etc) on screen.

Things to note...

  • This video is showing Microsoft Edge.
  • Chrome, although the same type of lag, is faster.
  • This video of Edge on my machine is about the same as Chrome on my client's machine, his machines are slower than mine.
  • I am using Wappler 5.8.2 on a reasonably quick Windows 10 machine.
  • This has only started to happen after I did a global update to the site along with database changes.
  • When you press the F5 key, the screen refreshes and the redraw is much quicker as you can see in the second half of the video.
  • This is the part that I don't understand, F5 just refreshes the call to the server, so how can the redraw be quicker?
  • It only happens on this page, the rest of the site runs quickly.
  • The red lines/border indicate fields that need to be completed.

Can anyone cast any thoughts as to why this might be happening?

2

I recently had a serious lag issue on one of my dashboards. The problem turned out to be some sort of Security software running. Wolf something? Fox something? I can't remember the name. But disabling that really sped things up.

3

Chrome user here, but perhaps Edge has something similar to "developer tools"? Chrome has some good performance views into the page rendering. Have you explored watching page performance under the hood so-to-speak?

4

Hi @brad, we've looked into that but without success. Thanks for the suggestion.

5

Hi @GraybeardCoder, Edge has DevTools that look identical to Chrome DevTools. I have run a 15 second capture under the Performance tab but unfortunately I cannot interpret the results. It's not an area that I am familiar with :frowning_face:

6

maybe take a look at this. don't show until you get a status 200 etc. Just an idea

https://community.wappler.io/t/modal-with-dynamic-show-shows-for-split-second-on-page-load-before-it-hides/43499

7

Thanks @baub, interesting solution. I will certainly try it.

My guess is that it will stop the red outline from flashing up, but won't speed up the redraw of all the other elements. I'd like to think I'm wrong :smile:

8

Hey Neil,

I would like to point 2 things...

Are you sure that you haven't changed something in your code after the update that can produce these red borders?

I noticed that the red border doesn't apple on ALL the elements...

image
image1805×985 105 KB

On tab.8, the 8.3 inputs are not affected...
Is there something different on them? Probably they are not "required"?

9

Chrome and Edge share the same Blink rendering engine. The difference between the two lies in security, AI, overhead and data collection. Google tends to harvest more data than Microsoft.

Having read over this post, I do not think that the problem, that you are seeing, is the fault of the browser.

In my humble opinion, the problem lies with the speed at which the data that is collected and rendered. Judging from the video, the inputs have all been set at required. When an input is empty, the red outline is shown. When there is a value for the input, the red outline disappears. In other words, the page is rendered before the data has been collected. Parts are then re-rendered when the data is available.

Pressing F5 merely recalls the data from the browser's cache, hence no waiting for the server.

If there is no faster way to retrieve the data from the server, I suggest adding a spinner, or similar, while the data is being retrieved. After that, show the page fully rendered.

1 Like
10

Hi @famousmag, you are right, not all fields are necessary to complete the report and therefore, as you quite rightly point out, not all fields have the red line. We cannot use the HTML input 'required' attribute because not all data is available at the initial time of data entry. Sometimes the data is not available at all, and this then highlights that point to the Chief Engineer who may have to comment on the fact when he finalises the report.

The way the red outlines work has not change in over 12 months.

Thanks for your observations.

11

Ok, i see.

You wrote that the problem occured after a "global update" you did...
Still on 5.8.2? Or moved to 6.8.0 ( AS2) ?
Anyway, @ben's suggestoon/explanation id the most promishing one...
Probbly the use of conditional regiond would solve this problem

1 Like
12

Hi @ben, thanks for your thoughts and I am agreeing with you about the problem not lying with the browser, and more with the way the data is packaged and sent to the browser.

Your humble opinion is always welcome. As mentioned in my reply to famousmag we don't use the HTML input 'required' attribute because not all data is available at the initial time of data entry. Sometimes the data is not available at all, and this then highlights that point to the Chief Engineer who may have to comment on the fact when he finalises the report.

The red outline is created via dmx-class:alert-red-border="!value" wherever it is needed.

This whole data entry thing is one big 'page' with one ServerConnect call. When you click on one of the green buttons (1, 2, 3, 6, 7, 8, 9, 10) you are simply changing the value of a variable called 'steps', that in turn displays a DIV row via is="dmx-if" dmx-bind:condition="steps.value == 2".

Within each of these DIV row sections is a separate form so that the screen of data can be saved before moving on to one of the other sections.

It is therefore pulling the data from RAM because of the IF condition.

Maybe if I change all of the dmx-if to dmx-show then it would create one BIG page but only show a section at a time, whereas the IF conditions aren't simply hiding the data, they haven't yet pulled it from RAM. Using Show/Hide attribute, the data is still in RAM, there are no additional ServerConnect calls (except when a save is initiated). I think that makes sense :crazy_face: I will just have to try it.

@famousmag I meant a website update not a Wappler update, so still on 5.8.2.

13

Maybe you can also include the tabs in conditional regions so they are renders only if previous form is completed/filled or just add dmx-disabled on the tabs...

But what I'm eorried more is WHY SUDDENLY it is problem after the site update...
Was there any Javascript function handling rthis behavior and accidentally was modified/deleted (???)