I've been trying to learn the browser performance profiler

I've gone a long time not learning mit, mainly because I haven't found a need to fine tune anything
------------
🔔 Newsletter eepurl.com/hnderP
💬 Discord / discord
📁. GitHub github.com/codyseibert/youtube

[@jaunathang]

I relate to this 100%. I am getting into it too. As I have read on many forum threads, frameworks like React are so well optimized under the hood that you rarely see a need for optimization, even when you're not applying best practices. This resonates so much today.

[@rs832]

I appreciate you sharing your level of experience with doing this right in the beginning, avoiding trying to come across as an "expert" - its really helpful to have our expectations managed appropriately. Great video, thanks for sharing!

[@hennyC_]

I have never even coded in react and have no clue how this got to my recommended but this video managed to capture my attention for its entire length and it was very interesting!

[@sdegueldre]

I know this is a pretty old video but I'd like to point out that there is one thing that you can do to speed this up *significantly*, even though this is browser code, and it's to make the browser do less layouting and styling work by having fewer elements in the DOM, which can be achieved by only having React render the elements that are visible in the viewport. This is a technique called "list virtualization".

[@cameronpaczek5686]

pretty interesting video, I mainly focus on the network tab for performance but I have looked at the performance tab a few times. Two things I would note: Firstly, Reversing the array: There wasn't that much code to look at but from what I can tell you are probably doing testArray = testArray.reverse() or something like that, this is very memory intensive and is re-writting the entire array to memory every time you reverse the array. The better way to do this is simply render the array in reverse. I am not a react dev so not sure if this is possible but simply going from the last item in the array and looping to the first item is a lot faster than re making the whole list. i.e if you were to envision how the array is stored in memory (This is not a great example as react may have higher level stuff which would slow this down) You would have a memory address such as 0x0000 with a length of 1000 bytes so your array would end at 0x1f40. When your updating the dom you simply start from 0x1f40 and go backwards instead of trying to re arrange memory. However, I did notice that each of your rows has a date object, it may be faster to have that object as a string instead of a date object as the CPU doesn't have to jump to each date object memory address to find the date every time you reverse the list. Please take all of the above with a massive grain of salt, I am not an expert in JS and because its pretty high level there may be lots of fancy optimizations however if this was coded in C/C++ what I said above would make sense. Secondly, there is an easy to fix the render time: AFAIK chrome renders the entire content of the page on each render change so a simple fix for this would be pagination. its taking 800ms to render because its rendering everything off screen as well if you don't want to use pagination you should then elect for infinite scrolling where more of the table gets rendered as you scroll (this is much more complicated to get right tho) There are a lot of inefficiencies with JS compared to a lower level lang like C/C++ and JS doesn't give you all the tools to make really performant code. i.e a doubly linked list would be perfect for this application as you just change which pointer your using. (ik you can technically make a doubly linked list in JS but its not as good as C/C++ as you have no low level memory access)

[@WebDevCody]

Yeah so I did some profiling and the time to sort the collection of 3000 items is less than 1 ms, so all of the slowdown results from react and the browser reflow. The js sorting algorithm is O(nlog(n)), so it shouldn’t take long for a small list. The reason we can’t do pagination or infinite scroll is that our users like to do cmd + f to find exactly what they are looking for, so we can’t hide rows. We plan to implement a UX change to provide dropdown filters which will help a lot, but it’s in a future feature that hasn’t been prioritized yet. Sometimes a better solution has to wait due to the business processes in place. But thanks for all the great feedback and breakdown!

[@blue_name_warrior]

The recalculate-syle time increased maybe because the style of each row is inlined? I'm not an expert of React but Vue would do a lot of analysis and improvement in compile time underneath, which may also reduce the javascript function time.

[@louis1574]

What's your vscode theme. It looks really nice.

[@WebDevCody]

Shades of purple

[@louis1574]

@@WebDevCody Thank you. Keep up the good work.

[@markokraljevic1590]

you should prepare this better and make clear point

[@SeibertSwirl]

Good job babe!!!! FIRRRSSST