├── exercises
    ├── inefficient-css-2
    │   ├── README.md
    │   ├── style.css
    │   ├── index.html
    │   └── script.js
    ├── detached-dom-objects
    │   ├── README.md
    │   ├── index.html
    │   └── script.js
    ├── memory-leaks
    │   ├── README.md
    │   ├── index.html
    │   └── script.js
    ├── poor-event-listener
    │   ├── README.md
    │   ├── style.css
    │   ├── index.html
    │   └── script.js
    ├── poor-event-listener-2
    │   ├── README.md
    │   ├── script.js
    │   └── index.html
    ├── excessive-dom-size
    │   ├── README.md
    │   ├── script.js
    │   └── index.html
    ├── force-sync-layout
    │   ├── README.md
    │   ├── script.js
    │   └── index.html
    ├── inefficient-css-3
    │   ├── README.md
    │   ├── script.js
    │   ├── index.html
    │   └── style.css
    ├── excessive-dom-size copy
    │   ├── worker.js
    │   ├── index.html
    │   ├── README.md
    │   └── script.js
    ├── inefficient-css-1
    │   ├── script.js
    │   ├── style.css
    │   ├── README.md
    │   └── index.html
    └── layout-thrashing
    │   ├── README.md
    │   ├── index.html
    │   └── script.js
└── README.md


/exercises/inefficient-css-2/README.md:
--------------------------------------------------------------------------------
1 | # Learnings
2 | 


--------------------------------------------------------------------------------
/exercises/detached-dom-objects/README.md:
--------------------------------------------------------------------------------
1 | # Learnings
2 | 
3 | - Clean up memory when cleaning DOM
4 | 


--------------------------------------------------------------------------------
/exercises/memory-leaks/README.md:
--------------------------------------------------------------------------------
1 | # Learnings
2 | 
3 | - Remove Event Listeners Before Clearing Items
4 | - Using Event Delegation
5 | 


--------------------------------------------------------------------------------
/exercises/poor-event-listener/README.md:
--------------------------------------------------------------------------------
1 | # Learnings
2 | 
3 | - use event delegation instead of adding event listeners to every element in a list
4 | 


--------------------------------------------------------------------------------
/exercises/poor-event-listener-2/README.md:
--------------------------------------------------------------------------------
1 | # Learnings
2 | 
3 | - use event delegation instead of adding event listeners to every element in a list
4 | 


--------------------------------------------------------------------------------
/exercises/poor-event-listener/style.css:
--------------------------------------------------------------------------------
1 | #content div {
2 |   margin: 10px;
3 |   padding: 10px;
4 |   background-color: lightgrey;
5 |   cursor: pointer;
6 | }
7 | 


--------------------------------------------------------------------------------
/exercises/excessive-dom-size/README.md:
--------------------------------------------------------------------------------
1 | # Learnings
2 | 
3 | - virtualization is a technique to render only the visible part of a list or those near the visible part to improve performance
4 | 


--------------------------------------------------------------------------------
/exercises/force-sync-layout/README.md:
--------------------------------------------------------------------------------
1 | # Learnings
2 | 
3 | Forced Synchronous Layout often appears as multiple layout recalculations during a single synchronous block of JavaScript execution.
4 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-3/README.md:
--------------------------------------------------------------------------------
1 | # Learnings
2 | 
3 | width and height are expensive properties to animate. They trigger layout, paint, and composite. Consider using transform with e.g. scale instead.
4 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-3/script.js:
--------------------------------------------------------------------------------
1 | document.getElementById("toggleButton").addEventListener("click", () => {
2 |   const box = document.getElementById("box");
3 |   box.classList.toggle("expand");
4 | });
5 | 


--------------------------------------------------------------------------------
/exercises/excessive-dom-size copy/worker.js:
--------------------------------------------------------------------------------
1 | self.addEventListener("message", () => {
2 |   let result = 0;
3 |   for (let i = 0; i < 100000000; i++) {
4 |     result += Math.sqrt(i);
5 |   }
6 |   postMessage(result);
7 | });
8 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-1/script.js:
--------------------------------------------------------------------------------
1 | // Simple script to interact with the list items
2 | document.querySelectorAll(".list-item").forEach((item) => {
3 |   item.addEventListener("mouseover", () => {
4 |     console.log("Item hovered");
5 |   });
6 | });
7 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-1/style.css:
--------------------------------------------------------------------------------
 1 | /* Potentially inefficient CSS */
 2 | /* .list-item:hover {
 3 |   background-color: yellow;
 4 | } */
 5 | 
 6 | .list-item {
 7 |   transition: opacity 0.3s ease;
 8 |   will-change: opacity;
 9 | }
10 | 
11 | .list-item:hover {
12 |   opacity: 0.2;
13 | }
14 | 


--------------------------------------------------------------------------------
/exercises/excessive-dom-size copy/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Long JavaScript Execution Time Exercise</title>
 7 |   </head>
 8 |   <body>
 9 |     <button id="processData">Process Data</button>
10 |     <div id="result"></div>
11 |     <script src="script.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/exercises/excessive-dom-size/script.js:
--------------------------------------------------------------------------------
 1 | document.getElementById("generateItems").addEventListener("click", () => {
 2 |   const container = document.querySelector(".container");
 3 | 
 4 |   // Generate a very large number of items
 5 |   for (let i = 0; i < 10000; i++) {
 6 |     const newItem = document.createElement("div");
 7 |     newItem.classList.add("item");
 8 |     newItem.textContent = `Item ${i + 1}`;
 9 |     container.appendChild(newItem);
10 |   }
11 | });
12 | 


--------------------------------------------------------------------------------
/exercises/layout-thrashing/README.md:
--------------------------------------------------------------------------------
1 | Addressing layout thrashing typically involves reorganizing the way you read from and write to the DOM to prevent unnecessary layout recalculations.
2 | 
3 | One effective method is to batch all DOM reads together and then perform all the DOM writes. This approach minimizes the number of reflows.
4 | 
5 | Another approach is to use requestAnimationFrame to defer actions until the next repaint, reducing the frequency of layout recalculations.
6 | 


--------------------------------------------------------------------------------
/exercises/poor-event-listener-2/script.js:
--------------------------------------------------------------------------------
 1 | document.getElementById("addItem").addEventListener("click", () => {
 2 |   const container = document.querySelector(".container");
 3 |   const newItem = document.createElement("div");
 4 |   newItem.classList.add("item");
 5 |   newItem.textContent = "New Item";
 6 |   container.appendChild(newItem);
 7 | 
 8 |   // Attaching a new click event listener every time an item is added
 9 |   newItem.addEventListener("click", () => {
10 |     newItem.style.backgroundColor = "lightblue";
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-2/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   width: 100%;
 3 |   max-width: 600px;
 4 |   margin: auto;
 5 |   text-align: center;
 6 | }
 7 | 
 8 | .dynamic-content > * {
 9 |   /* Apply transition only to specific properties if needed */
10 |   transition: background-color 0.3s ease;
11 |   font-family: "Arial", sans-serif;
12 |   color: #333;
13 | }
14 | 
15 | .dynamic-content > *:nth-child(odd) {
16 |   background-color: lightblue;
17 | }
18 | 
19 | .dynamic-content > *:nth-child(even) {
20 |   background-color: lightgreen;
21 | }
22 | 


--------------------------------------------------------------------------------
/exercises/force-sync-layout/script.js:
--------------------------------------------------------------------------------
 1 | document.getElementById("updateItems").addEventListener("click", () => {
 2 |   const container = document.querySelector(".container");
 3 | 
 4 |   // Force Synchronous Layout inside a loop
 5 |   for (let i = 0; i < 100; i++) {
 6 |     const newItem = document.createElement("div");
 7 |     newItem.classList.add("item");
 8 |     newItem.textContent = `Item ${i + 1}`;
 9 |     container.appendChild(newItem);
10 | 
11 |     // Forced layout calculation
12 |     // console.log(newItem.offsetWidth);
13 |   }
14 | });
15 | 


--------------------------------------------------------------------------------
/exercises/poor-event-listener/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Event Listener Debugging Exercise</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div id="content">
11 |       <!-- Dynamically populated content -->
12 |     </div>
13 |     <button id="addItems">Add Items</button>
14 |     <script src="script.js"></script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Hard CSS Debugging Exercise</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <div class="box" id="box"></div>
12 |       <button id="toggleButton">Toggle Effect</button>
13 |     </div>
14 |     <script src="script.js"></script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-1/README.md:
--------------------------------------------------------------------------------
 1 | # Learnings
 2 | 
 3 | will-change in combination with transforms or opacity does not trigger paint.
 4 | 
 5 | will-change is a newer property. It allows you to hint to the browser that an element is going to change in the future. This allows the browser to optimize for this change ahead of time.
 6 | 
 7 | Use it sparingly and only when you know that an element is going to change. Otherwise, you may end up with worse performance. Every performance optimization comes with a cost, but not always a benefit.
 8 | 
 9 | Used Paint Flashing in Rendering of Chrome DevTools to see what is being painted.
10 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Inefficient CSS Debugging Exercise</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <div class="dynamic-content">
12 |         <!-- Content dynamically updated by JavaScript -->
13 |       </div>
14 |       <button id="updateButton">Update Content</button>
15 |     </div>
16 |     <script src="script.js"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/exercises/excessive-dom-size copy/README.md:
--------------------------------------------------------------------------------
1 | # Learnings
2 | 
3 | - processing in batch and single number when doing generator functions is the same speed
4 | - The reason the Web Worker seems fast even though the message to start processing is sent on a button click is that the heavy computation doesn't block the UI thread. As soon as the user clicks the button, the Web Worker starts the task in the background, allowing the main thread to continue running smoothly.
5 | - The Web Worker does not start any computation until it receives the message to start. The speed comes from the fact that it runs in parallel and doesn't interrupt or slow down the main thread, not from pre-computing the result.
6 | 


--------------------------------------------------------------------------------
/exercises/poor-event-listener-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Poorly Managed Event Listeners Exercise</title>
 7 |     <style>
 8 |       .item {
 9 |         margin: 5px;
10 |         padding: 5px;
11 |         background-color: lightgrey;
12 |       }
13 |       .container {
14 |         margin: 20px;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <div id="app">
20 |       <button id="addItem">Add Item</button>
21 |       <div class="container"></div>
22 |     </div>
23 |     <script src="script.js"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/exercises/memory-leaks/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Memory Leak Exercise</title>
 7 |     <style>
 8 |       .item {
 9 |         margin: 5px;
10 |         padding: 5px;
11 |         background-color: lightgrey;
12 |         cursor: pointer;
13 |       }
14 |       .container {
15 |         margin: 20px;
16 |       }
17 |     </style>
18 |   </head>
19 |   <body>
20 |     <div class="container" id="container"></div>
21 |     <button id="addItems">Add Items</button>
22 |     <button id="removeItems">Remove Items</button>
23 |     <script src="script.js"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-3/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   display: flex;
 3 |   justify-content: center;
 4 |   align-items: center;
 5 |   height: 100vh;
 6 | }
 7 | 
 8 | /* .box {
 9 |   width: 100px;
10 |   height: 100px;
11 |   background-color: blue;
12 |   transition: width 2s, height 2s, transform 2s;
13 | } */
14 | 
15 | /* .box.expand {
16 |   width: 300px;
17 |   height: 300px;
18 |   transform: rotate(180deg);
19 | } */
20 | 
21 | .box {
22 |   width: 100px;
23 |   height: 100px;
24 |   background-color: blue;
25 |   transition: transform 2s; /* Only animate transform */
26 |   transform-origin: center; /* Optional, for visual effect */
27 | }
28 | 
29 | .box.expand {
30 |   transform: rotate(180deg) scale(3); /* Use scale for size change */
31 | }
32 | 


--------------------------------------------------------------------------------
/exercises/force-sync-layout/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>FSL Debugging Exercise</title>
 7 |     <style>
 8 |       .item {
 9 |         margin: 5px;
10 |         padding: 5px;
11 |         background-color: lightgrey;
12 |       }
13 |       .container {
14 |         margin: 20px;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <div id="app">
20 |       <button id="updateItems">Update Items</button>
21 |       <div class="container">
22 |         <!-- Items will be added here -->
23 |       </div>
24 |     </div>
25 |     <script src="script.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/exercises/memory-leaks/script.js:
--------------------------------------------------------------------------------
 1 | const addItem = () => {
 2 |   const container = document.getElementById("container");
 3 |   const newItem = document.createElement("div");
 4 |   newItem.classList.add("item");
 5 |   newItem.textContent = "New Item";
 6 |   container.appendChild(newItem);
 7 | 
 8 |   // Add an event listener to each item
 9 |   newItem.addEventListener("click", () => {
10 |     console.log("Item clicked");
11 |   });
12 | };
13 | 
14 | const removeItems = () => {
15 |   const container = document.getElementById("container");
16 |   container.innerHTML = ""; // Remove all items
17 | };
18 | 
19 | document.getElementById("addItems").addEventListener("click", addItem);
20 | document.getElementById("removeItems").addEventListener("click", removeItems);
21 | 


--------------------------------------------------------------------------------
/exercises/layout-thrashing/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Layout Thrashing Exercise</title>
 7 |     <style>
 8 |       .box {
 9 |         width: 100px;
10 |         height: 100px;
11 |         margin: 10px;
12 |         background-color: lightblue;
13 |       }
14 |       .container {
15 |         display: flex;
16 |         flex-wrap: wrap;
17 |       }
18 |     </style>
19 |   </head>
20 |   <body>
21 |     <div class="container" id="container">
22 |       <!-- Boxes will be added here -->
23 |     </div>
24 |     <button id="addBoxes">Add Boxes</button>
25 |     <script src="script.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/exercises/poor-event-listener/script.js:
--------------------------------------------------------------------------------
 1 | document.getElementById("addItems").addEventListener("click", () => {
 2 |   const content = document.getElementById("content");
 3 |   for (let i = 0; i < 100; i++) {
 4 |     const newItem = document.createElement("div");
 5 |     newItem.textContent = `Item ${i + 1}`;
 6 | 
 7 |     // why is this inefficient?
 8 |     // 1. we are adding an event listener to each item
 9 |     // 2. we are recreating the function for each item, instead of reusing the same function
10 |     // Solution here is to use event delegation, where we add the event listener to the parent, because the event bubbles up
11 |     newItem.addEventListener("click", () => {
12 |       console.log(`Item ${i + 1} clicked`);
13 |     });
14 |     content.appendChild(newItem);
15 |   }
16 | });
17 | 


--------------------------------------------------------------------------------
/exercises/detached-dom-objects/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Detached DOM Objects Exercise</title>
 7 |     <style>
 8 |       .item {
 9 |         margin: 5px;
10 |         padding: 5px;
11 |         background-color: lightgrey;
12 |         cursor: pointer;
13 |       }
14 |       .container {
15 |         margin: 20px;
16 |       }
17 |     </style>
18 |   </head>
19 |   <body>
20 |     <div class="container" id="container">
21 |       <!-- Items will be added here -->
22 |     </div>
23 |     <button id="addItems">Add Items</button>
24 |     <button id="removeItems">Remove Items</button>
25 |     <script src="script.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Inefficient CSS Debugging Exercise</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="content">
11 |       <ul>
12 |         <!-- Generating 1000 list items for demonstration -->
13 |         <!-- This can be done through JS to avoid cluttering the HTML -->
14 |         <script>
15 |           for (let i = 0; i < 1000; i++) {
16 |             document.write('<li class="list-item">Item ' + (i + 1) + "</li>");
17 |           }
18 |         </script>
19 |       </ul>
20 |     </div>
21 |     <script src="script.js"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/exercises/excessive-dom-size/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Excessive DOM Size Exercise</title>
 7 |     <style>
 8 |       .item {
 9 |         margin: 5px;
10 |         padding: 5px;
11 |         background-color: lightgrey;
12 |       }
13 |       .container {
14 |         height: 500px;
15 |         overflow: auto;
16 |       }
17 |     </style>
18 |   </head>
19 |   <body>
20 |     <div id="app">
21 |       <button id="generateItems">Generate Many Items</button>
22 |       <div class="container">
23 |         <!-- A large number of items will be added here -->
24 |       </div>
25 |     </div>
26 |     <script src="script.js"></script>
27 |   </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/exercises/inefficient-css-2/script.js:
--------------------------------------------------------------------------------
 1 | // document.getElementById("updateButton").addEventListener("click", () => {
 2 | //   const dynamicContent = document.querySelector(".dynamic-content");
 3 | //   dynamicContent.innerHTML = "";
 4 | 
 5 | //   for (let i = 0; i < 50; i++) {
 6 | //     const newElement = document.createElement("p");
 7 | //     newElement.textContent = `Item ${i + 1}`;
 8 | //     dynamicContent.appendChild(newElement);
 9 | //   }
10 | // });
11 | 
12 | document.getElementById("updateButton").addEventListener("click", () => {
13 |   const dynamicContent = document.querySelector(".dynamic-content");
14 | 
15 |   // Instead of clearing and repopulating everything, just add new items
16 |   for (let i = dynamicContent.children.length; i < 50; i++) {
17 |     const newElement = document.createElement("p");
18 |     newElement.textContent = `Item ${i + 1}`;
19 |     dynamicContent.appendChild(newElement);
20 |   }
21 | });
22 | 


--------------------------------------------------------------------------------
/exercises/detached-dom-objects/script.js:
--------------------------------------------------------------------------------
 1 | let items = [];
 2 | 
 3 | const addItem = () => {
 4 |   const container = document.getElementById("container");
 5 |   const newItem = document.createElement("div");
 6 |   newItem.classList.add("item");
 7 |   newItem.textContent = "New Item";
 8 |   container.appendChild(newItem);
 9 | 
10 |   items.push(newItem); // Store reference to each item
11 | };
12 | 
13 | const removeItems = () => {
14 |   const container = document.getElementById("container");
15 |   container.innerHTML = ""; // Clear container
16 | };
17 | 
18 | document.getElementById("addItems").addEventListener("click", addItem);
19 | document.getElementById("removeItems").addEventListener("click", removeItems);
20 | 
21 | // let items = [];
22 | 
23 | // const addItem = () => {
24 | //   const container = document.getElementById("container");
25 | //   const newItem = document.createElement("div");
26 | //   newItem.classList.add("item");
27 | //   newItem.textContent = "New Item";
28 | //   container.appendChild(newItem);
29 | 
30 | //   items.push(newItem); // Store reference to each item
31 | // };
32 | 
33 | // const removeItems = () => {
34 | //   const container = document.getElementById("container");
35 | //   container.innerHTML = ""; // Clear container
36 | 
37 | //   items = []; // Clear the array to remove references to DOM elements
38 | // };
39 | 
40 | // document.getElementById("addItems").addEventListener("click", addItem);
41 | // document.getElementById("removeItems").addEventListener("click", removeItems);
42 | 


--------------------------------------------------------------------------------
/exercises/layout-thrashing/script.js:
--------------------------------------------------------------------------------
 1 | // document.getElementById("addBoxes").addEventListener("click", () => {
 2 | //   const container = document.getElementById("container");
 3 | 
 4 | //   // Simulate layout thrashing
 5 | //   for (let i = 0; i < 50; i++) {
 6 | //     const box = document.createElement("div");
 7 | //     box.classList.add("box");
 8 | //     container.appendChild(box);
 9 | 
10 | //     // Triggering layout calculations inside a loop
11 | //     console.log(box.offsetWidth, box.offsetHeight);
12 | //   }
13 | // });
14 | 
15 | // document.getElementById("addBoxes").addEventListener("click", () => {
16 | //   const container = document.getElementById("container");
17 | //   const boxes = [];
18 | 
19 | //   // First, perform all DOM writes
20 | //   for (let i = 0; i < 50; i++) {
21 | //     const box = document.createElement("div");
22 | //     box.classList.add("box");
23 | //     container.appendChild(box);
24 | //     boxes.push(box);
25 | //   }
26 | 
27 | //   // Then, perform all DOM reads
28 | //   boxes.forEach((box) => {
29 | //     console.log(box.offsetWidth, box.offsetHeight);
30 | //   });
31 | // });
32 | 
33 | document.getElementById("addBoxes").addEventListener("click", () => {
34 |   const container = document.getElementById("container");
35 | 
36 |   const addBox = (i) => {
37 |     if (i < 50) {
38 |       const box = document.createElement("div");
39 |       box.classList.add("box");
40 |       container.appendChild(box);
41 | 
42 |       // Defer layout calculations to the next repaint and not in the same frame as the DOM write
43 |       requestAnimationFrame(() => {
44 |         console.log(box.offsetWidth, box.offsetHeight);
45 |         addBox(i + 1); // Add the next box
46 |       });
47 |     }
48 |   };
49 | 
50 |   addBox(0); // Start adding boxes
51 | });
52 | 


--------------------------------------------------------------------------------
/exercises/excessive-dom-size copy/script.js:
--------------------------------------------------------------------------------
 1 | // document.getElementById("processData").addEventListener("click", () => {
 2 | //   const start = performance.now();
 3 | //   const resultDiv = document.getElementById("result");
 4 | //   let result = 0;
 5 | 
 6 | //   for (let i = 0; i < 100000000; i++) {
 7 | //     result += Math.sqrt(i);
 8 | //   }
 9 | 
10 | //   const duration = performance.now() - start;
11 | //   resultDiv.textContent = `Result: ${result} (Time: ${duration.toFixed(2)}ms)`; // Result: 666666661666.567 (Time: 117.20ms)
12 | // });
13 | 
14 | // function* processNumbers() {
15 | //   let result = 0;
16 | //   for (let i = 0; i < 100000000; i++) {
17 | //     result += Math.sqrt(i);
18 | //     if (i % 1000000 === 0) yield;
19 | //   }
20 | //   return result;
21 | // }
22 | 
23 | // document.getElementById("processData").addEventListener("click", () => {
24 | //   const start = performance.now();
25 | //   const resultDiv = document.getElementById("result");
26 | //   const generator = processNumbers();
27 | 
28 | //   function processChunk() {
29 | //     const next = generator.next();
30 | //     if (!next.done) {
31 | //       requestAnimationFrame(processChunk);
32 | //     } else {
33 | //       const duration = performance.now() - start;
34 | //       resultDiv.textContent = `Result with Generator: ${
35 | //         next.value
36 | //       } (Time: ${duration.toFixed(2)}ms)`; // Result with Generator: 666666661666.567 (Time: 1317.80ms)
37 | //     }
38 | //   }
39 | 
40 | //   processChunk();
41 | // });
42 | 
43 | // function* processNumbersBatch() {
44 | //   let result = 0;
45 | //   let batchSize = 1000000;
46 | 
47 | //   for (let i = 0; i < 100000000; i += batchSize) {
48 | //     for (let j = i; j < i + batchSize && j < 100000000; j++) {
49 | //       result += Math.sqrt(j);
50 | //     }
51 | //     yield;
52 | //   }
53 | //   return result;
54 | // }
55 | 
56 | // document.getElementById("processData").addEventListener("click", () => {
57 | //   const start = performance.now();
58 | //   const resultDiv = document.getElementById("result");
59 | //   const generator = processNumbersBatch();
60 | 
61 | //   function processChunk() {
62 | //     const next = generator.next();
63 | //     if (!next.done) {
64 | //       requestAnimationFrame(processChunk);
65 | //     } else {
66 | //       const duration = performance.now() - start;
67 | //       resultDiv.textContent = `Result with Batched Generator: ${
68 | //         next.value
69 | //       } (Time: ${duration.toFixed(2)}ms)`; // Result with Batched Generator: 666666661666.567 (Time: 1310.70ms)
70 | //     }
71 | //   }
72 | 
73 | //   processChunk();
74 | // });
75 | 
76 | // if (window.Worker) {
77 | //   const myWorker = new Worker("worker.js");
78 | 
79 | //   document.getElementById("processData").addEventListener("click", () => {
80 | //     const start = performance.now();
81 | //     myWorker.postMessage("start");
82 | 
83 | //     myWorker.onmessage = function (e) {
84 | //       const duration = performance.now() - start;
85 | //       document.getElementById(
86 | //         "result"
87 | //       ).textContent = `Result with Web Worker: ${
88 | //         e.data
89 | //       } (Time: ${duration.toFixed(2)}ms)`; // Result with Web Worker: 666666661666.567 (Time: 120.60ms)
90 | //     };
91 | //   });
92 | // } else {
93 | //   console.log("Your browser doesn't support web workers.");
94 | // }
95 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Web Performance Notes
  2 | 
  3 | # Common issues
  4 | 
  5 | 1. **Unoptimized Images**: Large or unoptimized images can significantly slow down page load times. This is one of the most common issues, as images are a major part of most websites.
  6 | 
  7 | 2. **Excessive JavaScript Execution**: Heavy or inefficient JavaScript can block the main thread, leading to delays in page interactivity and rendering.
  8 | 
  9 | 3. **Too Many Render-Blocking Resources**: CSS and JavaScript files that are loaded in the head of your document without async or defer attributes can block the page from rendering quickly.
 10 | 
 11 | 4. **Unnecessary Downloads**: Loading resources that aren't immediately needed, such as off-screen images or features only used by a small percentage of users.
 12 | 
 13 | 5. **Lack of Compression**: Not using text compression (like Gzip or Brotli) for your resources can increase the amount of data transferred, affecting load time.
 14 | 
 15 | 6. **Inefficient CSS Selectors**: Complex or inefficient CSS selectors can slow down the rendering process, as the browser has to spend more time calculating styles.
 16 | 
 17 | 7. **Excessive DOM Size**: A large DOM can lead to increased memory usage and slower performance, especially during DOM manipulation operations.
 18 | 
 19 | 8. **Memory Leaks**: JavaScript memory leaks can lead to increased memory usage over time, eventually causing the page to slow down or crash.
 20 | 
 21 | 9. **Poor Cache Strategy**: Not leveraging browser caching effectively can lead to unnecessary network requests, slowing down repeat visits to your page.
 22 | 
 23 | 10. **Slow Third-Party Scripts**: Dependency on third-party scripts and services (like ads, analytics, or widgets) can significantly impact performance if these scripts are slow or unresponsive.
 24 | 
 25 | # Analyzing the performance data
 26 | 
 27 | ## Interpreting the flame chart
 28 | 
 29 | ### Understanding the Flame Chart
 30 | 
 31 | - **Time Axis**: The horizontal axis represents time.
 32 | - **Call Stack**: Each row in the flame chart represents a function call stack at any point in time.
 33 | - **Bars**: Each bar represents a function call. The width of the bar indicates the time taken by that function.
 34 | 
 35 | ### Interpreting the Data
 36 | 
 37 | - **Wide Bars**: Indicate functions that took a long time to execute. These are your primary targets for optimization.
 38 | - **Tall Stacks**: A tall stack of bars represents a deep call stack, suggesting complex function executions.
 39 | - **Color Coding**: Different colors can represent different types of activities (e.g., scripting, rendering).
 40 | - **Hover for Details**: Hover over bars to see more information about the function, including execution time and resources used.
 41 | 
 42 | ### Analyze deep call stacks
 43 | 
 44 | 1. **Identify the Root Cause**: Look at the bottom of the stack to understand what initiated the series of calls.
 45 | 2. **Trace the Execution Path**: Follow the stack upwards to see the sequence of function calls and how the execution flows through different layers of your application.
 46 | 3. **Look for Anomalies**: Unusually deep or unexpected paths might indicate inefficiencies or bugs, like unintended recursive calls or unnecessary nested functions.
 47 | 
 48 | ## Call Tree and Bottom-Up Views
 49 | 
 50 | **Examine the Call Tree:**
 51 | 
 52 | Switch to the "Bottom-Up" or "Call Tree" tab to see where most time is spent.
 53 | 
 54 | Focus on high self-time functions.
 55 | 
 56 | ## Tips for effective analysis
 57 | 
 58 | - **Look for Wide Bars**: In the flame chart, wide bars indicate functions that took a long time to execute. These are your primary targets for optimization.
 59 | - **Identify Long Tasks**: Any task that takes over 50ms can impact user responsiveness. In the overview graph, these are often marked with a red triangle.
 60 | - **Check Call Stacks**: Deep stacks can indicate complex calculations or recursive functions.
 61 | - **Correlate with Events**: Use the overview graph to correlate scripting or rendering spikes with specific events like user interactions or network responses.
 62 | 
 63 | # Memory profiling
 64 | 
 65 | ## What is the heap?
 66 | 
 67 | The heap is a region of computer memory that's used to store dynamic data structures. It's where objects, strings, and closures are allocated when your code is running.
 68 | 
 69 | ## Take heap snapshots
 70 | 
 71 | Go to memory panel and take a heap snapshot.
 72 | 
 73 | ## Interpreting heap snapshots
 74 | 
 75 | **Look at Constructor Names:** This helps you identify objects by their types.
 76 | 
 77 | Sort by Shallow Size or Retained Size.
 78 | 
 79 | **Shallow Size:** The memory taken up by the object itself.
 80 | **Retained Size:** The total size of memory that can be freed up if this object is removed, including its dependencies.
 81 | 
 82 | **Check for Unexpected Large Objects:** Objects consuming a large amount of memory could be a sign of a memory leak.
 83 | 
 84 | Use the **Containment** and **Dominators** Views: These views help to understand the hierarchy and the ownership of objects.
 85 | 
 86 | ## Identify objects for garbage collection
 87 | 
 88 | An object should be garbage collected when it is no longer reachable or needed in your application. This typically occurs when:
 89 | 
 90 | - There are no references to it from other live objects or global variables.
 91 | - It’s not part of a closure, event listener, or callback that’s still in use.
 92 | 
 93 | In heap snapshots, investigate objects with no clear references or those that are unexpectedly large and don't seem to be in use anymore.
 94 | 
 95 | ## Check for detached DOM trees
 96 | 
 97 | Detached DOM trees are collections of DOM elements that are no longer part of the live DOM but are still held in memory by JavaScript references.
 98 | 
 99 | **How to Identify:**
100 | 
101 | - In the heap snapshot, look for DOM nodes that have no parent or whose parent is not part of the current document.
102 | - Use the 'DOM Breakdown' tab to see a summary of detached DOM elements.
103 | 
104 | # Critical Rendering Path
105 | 
106 | The Critical Rendering Path (CRP) is the process by which a browser converts HTML, CSS, and JavaScript into pixels on the screen. It's a sequence of steps that the browser goes through to render a web page.
107 | 
108 | **HTML Parsing and DOM Construction:** The browser reads the HTML and creates the Document Object Model (DOM), a tree structure representing all HTML elements.
109 | 
110 | **CSS Parsing and CSSOM Construction:** The browser parses CSS files and inline styles, creating the CSS Object Model (CSSOM), which represents the styling information for each DOM node.
111 | 
112 | **Render Tree Construction:** The browser combines the DOM and CSSOM to create a render tree, which contains only the nodes required to render the page, along with their styles.
113 | 
114 | **Layout:** The browser calculates the size and position of each node in the render tree. This process is also known as "reflow."
115 | 
116 | **Paint:** The browser fills in pixels for each node, applying text, colors, images, etc.
117 | 
118 | **Composite:** Layers are drawn onto the screen in the correct order to create the final visual output.
119 | 
120 | ```
121 | [HTML] --> [DOM]
122 | [CSS] --> [CSSOM]
123 | [DOM + CSSOM] --> [Render Tree] --> [Layout] --> [Paint] --> [Composite]
124 | ```
125 | 
126 | # Layout Reflow
127 | 
128 | A layout reflow is the process by which the browser recalculates the positions and dimensions of elements in the document. It's a critical step in the rendering process, where the browser determines where to place each element on the page.
129 | 
130 | ## How they occur
131 | 
132 | **DOM Manipulation:** Any script that changes the layout of a part of the page (like altering the height of an element) will trigger a reflow of that element, its children, and possibly siblings and ancestors.
133 | 
134 | **Style Changes:** Changing styles that affect the size or position of elements (like width, height, margin, padding, border, etc.) will also trigger a reflow.
135 | 
136 | **Computed Style Access:** Accessing certain properties in JavaScript, like offsetWidth, scrollTop, or getComputedStyle(), can also trigger reflow because the browser needs to ensure it returns the correct value.
137 | 
138 | # Layout Thrashing
139 | 
140 | When your JavaScript repeatedly reads and then writes to the DOM, the browser must reflow the layout after each read/write cycle. If these cycles are numerous and close together, it causes layout thrashing.
141 | 
142 | Each reflow operation is computationally expensive. In a thrashing scenario, the browser ends up performing far more layout calculations than necessary, consuming significant CPU time and slowing down the page.
143 | 
144 | ## How to avoid
145 | 
146 | **Batch DOM Read/Write Operations:**
147 | 
148 | Group all your DOM reads together first, and then perform all the writes. This minimizes the number of reflow cycles.
149 | 
150 | Example: If you need to read then write to multiple elements, read from all of them first, then write to all of them.
151 | 
152 | **Use Document Fragments:**
153 | 
154 | Build your changes off-DOM using document fragments, and then append the fragment to the DOM as a single operation.
155 | 
156 | **Optimize CSS:**
157 | 
158 | Simplify CSS selectors to reduce the time the browser spends recalculating styles.
159 | 
160 | **Use requestAnimationFrame:**
161 | 
162 | This method allows you to queue changes to be made in the next repaint, reducing the number of reflows.
163 | 
164 | **Debounce and Throttle:**
165 | 
166 | For operations tied to events like resize or scroll, use debounce or throttle techniques to limit the number of times these operations are executed.
167 | 


--------------------------------------------------------------------------------