DEV Community: Jharna Khatun

Dynamically create option in select element

Jharna Khatun — Sun, 20 Oct 2024 12:38:18 +0000

There are two ways to create an option dynamically :

1) Using the Option constructor and add() method

2) Using the DOM methods

1) Using the Option constructor and add() method :

let newOption = new Option('Option Text','Option Value');
const select = document.querySelector('select'); 
select.add(newOption,undefined);

2) Using the DOM methods :

// create option using DOM
const newOption = document.createElement('option');
const optionText = document.createTextNode('Option Text');
// set option text
newOption.appendChild(optionText);
// and option value
newOption.setAttribute('value','Option Value');

const select = document.querySelector('select'); 
select.appendChild(newOption);

Some effective ways to create checkboxes

Jharna Khatun — Sat, 19 Oct 2024 16:31:28 +0000

There are 3 ways to create checkbox :

By direct html code
By JS code, create each element, attributes, content and appendChild child to parent
By JS code, with innerHTML and Template literal

By direct html code :

<div>
  <input type="checkbox" name="color" id="red">
  <label for="red">Red</label>
 </div>
 <div>
  <input type="checkbox" name="color" id="green">
  <label for="green">Green</label>
 </div>
 <div>
  <input type="checkbox" name="color" id="Blue">
  <label for="Blue">Blue</label>
 </div>
 <div>
  <input type="checkbox" name="color" id="yellow">
  <label for="yellow">Yellow</label>
 </div>

By JS code, create each element, attributes, content and appendChild child to parent :

<body>
    <div id="root"></div>

    <script>
      const root = document.getElementById("root");
      const colors = ["Red", "Green", "Blue", "Yellow"];
      colors.forEach((color) => {
        // create id
        const id = color;

        // create label
        const label = document.createElement("label");
        label.setAttribute("for", id);

        // create checkbox input element
        const input = document.createElement("input");
        input.type = "checkbox";
        input.name = "color";
        input.id = id;
        input.value = color;

        // appendChild child to parent
        label.appendChild(input);
        label.appendChild(document.createTextNode(color));
        root.appendChild(label);
      });
    </script>
  </body>

By JS code, with innerHTML and Template literal :

<body>
    <div id="root"></div>

    <script>
      const root = document.getElementById("root");
      const colors = ["Red", "Green", "Blue", "Yellow"];
      const checkbox = colors.map((color)=>`<label for="${color}">
        <input type="checkbox" name="color" id="${color}" value="${color}" >
        ${color}</label>
      `
    ).join("");

    root.innerHTML = checkbox;
    </script>
  </body>

Reflows and Repaints in Javascript

Jharna Khatun — Fri, 18 Oct 2024 13:54:46 +0000

What are the best practices for optimizing CSS to reduce unnecessary reflows and repaints, especially in large-scale applications?

1. Reflow (Layout Recalculation):

A reflow (also called layout or re-layout) occurs when the browser recalculates the position, size, and layout of elements on the page. This process happens every time the layout of the page changes such as when elements are added, removed, resized, or their visibility changes. It’s a more complex and time-consuming operation

Example :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
const box = document.getElementById('box');
// Triggering a reflow by changing width and height
box.style.width = '200px';
box.style.height = '200px';

// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

When does a reflow happen?

Adding, removing, or modifying DOM elements (e.g., appendChild, removeChild).
Changing the layout by adjusting CSS styles like width, height, margin, padding, etc.
Resizing the window or changing the size of elements.
Changing the font size or font properties.
Using methods like offsetWidth, offsetHeight, scrollTop, getBoundingClientRect() because they force the browser to recalculate layout.

How reflow works:

When you change something that affects the layout of the page, the browser has to:

Recalculate the positions and dimensions of all elements affected by the change.
Rebuild the layout tree, which is the internal representation of how the elements are laid out.

If many elements are affected by a single change, the reflow can be costly and slow down the performance of your site.

2. Repaint (Visual Update)

A repaint (or redraw) occurs when visual properties of an element change but the layout doesn’t. It’s less expensive than a reflow because it only requires updating the appearance of elements without recalculating their position or layout. Repaints happen after the layout is recalculated (in cases where both are needed) or when non-layout-affecting properties are changed, like color or visibility.

Example :

<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>

<script>
// Triggering a repaint by changing the background color
box.style.backgroundColor = 'red';
</script>

When does a repaint happen?

Changing the background-color, border-color, or visibility properties.
Changing the box-shadow, outline, or color of an element.
Updating opacity (opacity), transforms (transform), or z-index.

A repaint doesn’t involve recalculating layout, so it’s faster than reflow, but it still requires redrawing parts of the page, which takes some time.

The Rendering Pipeline

DOM Construction: The browser parses HTML to build the DOM (Document Object Model) tree.
CSSOM Construction: CSS is parsed to build the CSSOM (CSS Object Model) tree.
Render Tree Construction: The DOM and CSSOM are combined to create the render tree, which contains the visual information for each visible element.
Layout (Reflow): The browser calculates the position and size of each visible element in the render tree.
Paint: The browser fills in pixels based on the visual properties like colors, borders, shadows, etc.
Composite: The browser composes the different painted layers (for complex elements like animations, 3D transforms, etc.) and displays them on the screen.

Performance Impact

Reflow: Expensive in terms of performance, especially if it affects large parts of the page or is triggered repeatedly (e.g., in a loop or on resize). It affects the layout of the page and requires recalculating positions and sizes of elements.
Repaint: Less expensive than a reflow but still impacts performance, especially if many elements need to be repainted frequently.

How to Optimize Reflows and Repaints

Minimize DOM manipulation : Use techniques like batching DOM updates (as mentioned earlier) or DocumentFragment to make multiple changes at once, instead of one by one.
Avoid layout thrashing : If you read a layout property (e.g., offsetHeight) and immediately write (change the layout) in the same cycle, it forces a reflow, known as layout thrashing. To avoid this, separate reading and writing DOM properties in different steps.
```
const height = element.offsetHeight; 
element.style.height = height + 'px';
```
Use CSS classes : Instead of modifying individual styles, use CSS classes to make changes. The browser handles class switching more efficiently.
```
element.classList.add('newClass');
```
Reduce complexity of CSS: Avoid deeply nested elements and overly complex CSS rules that can trigger reflows.
Use visibility: hidden instead of display: none when you just want to hide an element without affecting layout. display: none triggers a reflow, while visibility: hidden only triggers a repaint.

Conclusion

Reflows involve recalculating the layout of the page and are more costly in terms of performance.
Repaints update the visual appearance without affecting layout and are less costly.
Minimizing both helps keep your site responsive and fast, improving user experience.

What is a Batch DOM update and Why is it useful?

Jharna Khatun — Fri, 18 Oct 2024 13:01:17 +0000

Batching DOM updates :

Batching DOM updates refers to making multiple changes to the DOM in a way that reduces the number of reflows and repaints, which are costly operations for the browser. A Batch DOM update is when you make multiple changes to a webpage's structure (the DOM) all at once, instead of one by one.

Why is it useful?

Making changes to the DOM one at a time can slow down your webpage because the browser has to keep stopping, recalculating positions, and redrawing the page for every single change. By batching updates, you combine all the changes and apply them in one go, making your webpage faster and smoother.

Scenario:

Imagine you’re moving furniture around a room. If you move one chair, then wait for everyone to notice, then move a table, and wait again, it will take forever. But if you move everything at once and show the final result, the process will be quicker and less disruptive.

In coding terms, instead of updating the DOM every time you add or change something, you collect all your changes and apply them together, which is much faster.

Example:

Instead of adding items to a list one by one (slow):

// Updating DOM one by one (slow)
const list = document.getElementById('myList');
const newItem = document.createElement('li');
newItem.textContent = "Item 1";
list.appendChild(newItem);

You can collect all the items in a "batch" and add them all at once (fast):

// Batch DOM update (fast)
const list = document.getElementById('myList');
const fragment = document.createDocumentFragment();

for (let i = 1; i <= 5; i++) {
    const newItem = document.createElement('li');
    newItem.textContent = `Item ${i}`;
    fragment.appendChild(newItem);
}

list.appendChild(fragment);

This way, the browser only updates the page once after all the items are ready, making it faster and more efficient!