[mythtv-users] Web interface scalability issue: Video Gallery

[Paul Harrison]

On 07/09/2023 13:02, Peter Bennett wrote:

>
> On 9/6/23 17:01, Paul Harrison wrote:
>>
>> You should also be able to use your browsers debug tools to see how 
>> long each network operation takes as well.
>>
>>
>> Big disclosure I haven't been able to test the latest WebApp but when 
>> Stuart and I started the initial development the WebApp was very fast 
>> but as we added more stuff it started to slow down dramatically for 
>> me but not for Stuart! I was seeing regular delays of 10 to 15 
>> seconds to update the screen. We never figured out why I was seeing 
>> it and not Stuart or what the cause was. Angular does shift most 
>> processing to the client end ie the machine running the browser 
>> rather than what is more traditional with stuff like php where most 
>> of the processing is done at the server end. At the time I was using 
>> a 16 core Ryzen 7 so it can't be lack of processing power on the 
>> client end. I was running the BE in a ESXI virtual machine which may 
>> have contributed to the slow down since the WebApp does sent many 
>> requests to the backends services API but I never found any evidence 
>> to support that idea.
>>
>>
>> If Jan is seeing many of the screens showing very slow update times 
>> then she may be seeing the same thing I was. If it's just one screen 
>> then it's likely something else. One thing you need to know with 
>> Angular is that it is basically one giant web page that has the 
>> entire WebApp on it. Angular just hides and shows stuff based on what 
>> the user clicks on once the page is loaded. It does mean that the 
>> initial loading is always slow since the browser has to pull the 
>> several hundred megabyte? of data for the entire WebApp before it 
>> shows the page you want. At least that is the way I believe it works.
>>
>>
>>
> While developing the code I have found in some cases unacceptably long 
> responses, in particular with upcoming shows and recorded list. In 
> both cases I fixed it by switching to a virtual list with lazy load. 
> That was an immediate huge improvement. I have the code ready to 
> switch videos to a virtual list with lazy load. I want to make sure 
> that the problem the user is experiencing is on the angular side, not 
> the server side. Lazy load will not help if the server is taking a 
> long time to produce the list.
>
> Peter
>

I made some time to at least get a working backend running again so I 
could test the latest code. For me there are still some long delays like 
when switching to some tabs or if a page refresh is done. I tried both 
Firefox and Chromium  browsers both work the same.


Using the browser debug tools I found something interesting. More often 
than not one of the requests sent to the backend will result in a 10 
second wait before it receives any data. I'd be interested to know if 
anyone else can see these 10 second delays.


If while viewing one of the WebApp pages you open the debug tools,  
right click and select 'Inspect' in the context menu or press 
Ctrl+Shift+I, click the network tab in the debug window, then click 
refresh or press F5 on the WebApp window. You should see the list of 
requests update. Look for any with a tortoise symbol in the Filename 
column, those are the requests that the browser thinks where slow. If 
you click one of them you can see the timings. For me the slowest 
requests always spend just over 10 seconds waiting. The file that is 
slow isn't always the same one it seems to be random which one is slow, 
although I think all so far have been in the root directory like main.js 
in the linked screenshot.

https://mythqml.net/img/Screenshots/WebApp-timings.jpg


Paul H.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.mythtv.org/pipermail/mythtv-users/attachments/20230909/53ea502d/attachment.htm>