Ionic 3 lazy loading make lag with large html file

Hi, i am using ionic 3 in my project and i have some problems with lazy load.

I have a ResultPage with the template resultpage.html has more than 1000 html lines code. In the HomePage i want to navigate to ResultPage by navCtrl.setRoot. When i call it, the screen freeze in 3-4s before take me to the ResultPage. It is really a bad UX. It only happen with lagre teamplate and in the first time i enter that page. I decide to remove lazy load in ResultPage and the lag disapear. I don’t know is it a right way? Can some one please tell me what should i do in this case?

Thanks alot!

you need to work on your app performence, something is slow

If i remove all logic code in ResultPage. It is still lag. I think it is beacause of my large html.

1 Like

it might be the reason, try removing everything and then enter

I tried it before. It enter the page imediatly. I tested so many case and pretty sure the problem come from big html file. But i can not reduce the html.

so post your html here

How big is your resultpage.html?
How long does it take to open it in a browser directly?

Using dev tools of your browser you should be able to see what it is doing when you enter the page. Probably loading the file and then later rendering it takes quite long.

I think posting html is unnecessary. Beacause it can happen with any large html file so reducing html is not a smart way.

My html file has 1000+ lines code and its size is 100KB. It take 4s to load in zenphone 3 max. But i can’t find how time does it take to load in chrome directly. I found in network tab of chrome dev tool but can not find any html file. Could you please tell me how to find it?

The html all gets put into a main.x.js file (or similar). Just compare the non-lazy-loaded and lazy-loaded variants of your project and you will see.

@Sujan12: Here is the screen of network pane when i enter page with lazy-loaded:
image
As we can see, it take 1000ms after load 42.js to the next call and it is the time the screen freeze.

What is 42.js?
And what does it do?

I think it is compiled file of ResultPage. main.js just load once when enter app. May be main.x.js is x.js now

It’s your file. Look inside it, you should recognize at least parts of the code.

Yeah. It actualy is my file. But what are we finding?

Ok, now we know 42.js is really the file you before thought might be the file… we can look into that further:

It takes the time where nothing happens to render your html or JS that is on that page.
Using the “Performance” tab of the dev tools you can make a recording that shows you what exactly happens in that time.

I used Perfomance tab and here is the result:
image
Evaluate Script Activity take 2,8s running and it make the screen freeze. Now, what should i do?

https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/performance-reference#scripting_events - not helpful :wink:
https://developers.google.com/web/tools/chrome-devtools/rendering-tools/#tools - this might be

Can you please show part of the html you have so we can get an idea what could be evaluated in there?

Is it the same for other pages, just MUCH faster? Or is this special for this one?

I followed this page and find out Style, Layouts, Paint or Composite not take much time. It is really fast. Evaluate Script still take the whole time load. It explained why the problem occur only in the first time i load page.

It is the same for other page. The time load proportion with the length of html code. Look inside Evaluate Script, i saw so many foreach and map function, and they all take long time.


In my HTML, there are so many nested ngFor. You can see it here. But i think we should not go deep to optimize html because we will have to do it every time in every big page and it is too hard.

I think you are doing way too much work in your templates, and I would shift as much as possible to the controller. You also have a bunch of magic numbers in the template, especially in the first part. Can’t that be shifted to the controller as well?