Skip to content
Submitted over 3 years ago

Mobile-first Workflow, Javascript with JSON file, CSS Grid and Flexbox

sass/scss
Achref KS•530
@AchrefFast
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everyone,

I would like to know if my way of loading the JSON file is right. I feel like there is some kind of delay when the page is loaded the first time.I believe the reason is because the await fetch() I used to load the JSON data.

Is there any way to avoid such behavior?

Any suggestion, advice or feedback would be really appreciated.

Thanks.

Code

Please log in to post a comment

Log in

Community feedback

  • gusfoca•170
    @gusfoca

    I noticed you're updating the cards' contents after the DOM gets changed. Maybe that's causing more css repaints/reflows (just google those terms). You may also try using XMLHttpRequest instead of fetch, but just look at this solution (it's not mine): https://www.frontendmentor.io/solutions/time-tracking-dashboard-NkKJ4xnzC. It inserts a template html with "container.insertAdjacentHTML" (line 23). But you'll see the lag in that solution and others, don't know if it is solvable (my solution doesn't build the html, has it already in place and it sometimes lag, too: https://github.com/gusfoca/time-tracking-dashboard-main).

  • Achref KS•530
    @AchrefFast

    Hi gusfoca,

    Thanks for your reply, I really appreciate it.

    Concerning the XMLHTTPRequest, I did some research and I found that the fetch() is actually faster than the XMLHTTPRequest especially when it comes to decode JSON data.

    Resource: https://gomakethings.com/the-fetch-api-performance-vs.-xhr-in-vanilla-js/ .

    So, it seems that this is not what causing the problem.

    Regarding the insertAdjacentHTML : In my solution I used the append method instead of the insertAdjacentHTML. I wasn't sure which one is more performant, so I did some digging and from what I found, it seems that the append method is slightly more performant than insertAdjacentHTML.

    Resources:

    • https://www.measurethat.net/Benchmarks/Show/11738/0/insertadjacenthtml-vs-append#latest_results_block

    • https://medium.com/codex/what-is-faster-to-insert-into-dom-html-or-dom-nodes-ff11586f8570

    Finally, I took a look at the Reflow / Repaint subject that you mentioned. It seems that in my solution I used a lot of Reflow by updating the container of the fields and appending a new node for each property in the JSON file. So, in order to confirm if that is the cause of the problem, I changed the data from being a JSON data to a simple array that contains the same array in the JSON file. And by doing that the problem disappeared and what that means is that the Reflow isn't the cause of the problem, but instead the loading of the JSON file is.

    Thank you so much for your suggestions, they made me learn many new things and deepen my understanding of others.

    Thanks again 😃.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord