Best Practices

Performance Tips

Avoid blocking the main thread. Use debouncing for frequent events. Minimize DOM access by caching references.

const list = document.querySelector("#list");
const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  const li = document.createElement("li");
  li.textContent = "Item " + i;
  fragment.appendChild(li);
}

list.appendChild(fragment);

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

Try it Yourself →

Security Best Practices

Never trust user input. Use textContent instead of innerHTML to prevent XSS. Validate and sanitize all external data.

function displayMessage(msg) {
  const div = document.querySelector("#output");
  div.textContent = msg;
}

function sanitize(str) {
  const el = document.createElement("div");
  el.textContent = str;
  return el.innerHTML;
}

const userInput = "<script>alert('xss')</script>";
displayMessage(sanitize(userInput));

Try it Yourself →

Readability & Maintainability

Write small, pure functions. Use descriptive names. Avoid deep nesting. Favor early returns.

function isValidEmail(email) {
  if (!email) return false;
  if (!email.includes("@")) return false;
  const parts = email.split("@");
  return parts[0].length > 0 && parts[1].includes(".");
}

function processUser(user) {
  if (!user || !user.id) return null;
  const name = user.name || "Anonymous";
  return { id: user.id, displayName: name };
}

Try it Yourself →

← Previous Style Guide

Next → Examples