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