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

Community feedback

• 

  gusfoca•170

  @gusfocaPosted almost 3 years ago

  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).

  1
• 

  Achref KS•530

  @AchrefFastPosted almost 3 years ago

  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 😃.

  0