Do not mess with trees while living in the forest
summary
Examines working with tree data structures in front-end development, covering common pitfalls and safer techniques for manipulating trees in JavaScript. Demonstrates practical approaches and patterns to avoid breaking application state or performance when modifying hierarchical data.
AI-written summary · about
chapters (7)
- 0:00DO NOT MESS WITH TREES WHILE LIVING IN THE FOREST
- 9:36Part of rendering process when all dimensions positions and elements relations are calculated. Also is known as reflow, • Flow model is used which allow browser to process most elements at once pass • Except tables Tables are special snowflakes. They need more than one pass • Flow model means that changes in element causes consequences for element down the flow
- 15:06PAINT • Browsers are trying to split image to layers to make viewport update easier . With no other circumstances layers are created by z
- 27:06CRITICAL RENDERING PATH Intermediate steps between receiving the HTML, CSS, and JavaScript bytes and the required processing to turn them into rendered pixels
- 27:55CRITICAL RESOURCE Resource that could block initial rendering of the page
- 33:07BOOSTING RENDERING SPEED IN PAGE LIFECYCLE
- 37:21Use CSS animations wherever is possible: - Use requestAnimationFrame for cakulated animations • Use will change to avoid CSS critical performance issues • Use DOM events delegation; • Debounce user interaction event handlers such as window resize
related talks
34mClassic programming techniques in frontend
49mSee the tries for the trees
46mJavaScript: Give me back my interfaces! — good practices
46mArchitecture of a Modern Enterprise Node js Application
40mReduce System Complexity with Data-Oriented Programming
38mSOLID JavaScript
46mGit internals: Why trees are a developer's best friend
42mStart Applying SOLID Principles in JavaScript Thanks to TypeScript