Compatibility and Performance

Getting Started

Table of Content

Compatibility and Performance

Ensuring that JavaScript code runs smoothly across different browsers and optimizing performance are key aspects of web development. This section covers techniques for handling cross-browser compatibility, performance optimization, and best practices for efficient JavaScript execution.

Handling Cross-Browser Compatibility

Different browsers interpret JavaScript slightly differently. Developers must ensure that their code works consistently across modern browsers like Chrome, Firefox, Safari, Edge, and even older versions of Internet Explorer when necessary.

Feature Detection Using `if` Statements

Before using a feature, check if the browser supports it.

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(position => {
    console.log("Latitude:", position.coords.latitude);
  });
} else {
  console.log("Geolocation is not supported in this browser.");
}

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(position => {
    console.log("Latitude:", position.coords.latitude);
  });
} else {
  console.log("Geolocation is not supported in this browser.");
}

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(position => {
    console.log("Latitude:", position.coords.latitude);
  });
} else {
  console.log("Geolocation is not supported in this browser.");
}

Using `try...catch` for Fallbacks

For features that may throw errors in unsupported browsers:

try {
  let speech = new SpeechSynthesisUtterance("Hello");
  window.speechSynthesis.speak(speech);
} catch (error) {
  console.log("Speech API not supported.");
}

try {
  let speech = new SpeechSynthesisUtterance("Hello");
  window.speechSynthesis.speak(speech);
} catch (error) {
  console.log("Speech API not supported.");
}

try {
  let speech = new SpeechSynthesisUtterance("Hello");
  window.speechSynthesis.speak(speech);
} catch (error) {
  console.log("Speech API not supported.");
}

Using Polyfills

A polyfill is JavaScript code that provides modern functionality in older browsers.

Example: Adding fetch() support for older browsers:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js"></script>

Reducing JavaScript Execution Time

Minifying JavaScript removes unnecessary characters to reduce file size.

Use Terser or UglifyJS to minify scripts:

Load scripts asynchronously to prevent blocking the page load.

async: Loads in parallel but executes immediately.

defer: Loads in parallel and executes after HTML parsing is complete.

<script src="script.js" async></script>
<script src="script.js" defer></script>

<script src="script.js" async></script>
<script src="script.js" defer></script>

<script src="script.js" async></script>
<script src="script.js" defer></script>

Reduce Unnecessary DOM Manipulation

Frequent DOM changes can slow down performance.

Inefficient:

for (let i = 0; i < 100; i++) {
  document.body.appendChild(document.createElement("p"));
}

for (let i = 0; i < 100; i++) {
  document.body.appendChild(document.createElement("p"));
}

for (let i = 0; i < 100; i++) {
  document.body.appendChild(document.createElement("p"));
}

Efficient (using DocumentFragment):

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  let p = document.createElement("p");
  fragment.appendChild(p);
}
document.body.appendChild(fragment);

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  let p = document.createElement("p");
  fragment.appendChild(p);
}
document.body.appendChild(fragment);

let fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  let p = document.createElement("p");
  fragment.appendChild(p);
}
document.body.appendChild(fragment);

Optimizing Loops and Event Listeners

Use Efficient Loops

forEach() and map() are convenient but for loops can be faster for large datasets.

let arr = new Array(100000).fill(0);

console.time("forEach");
arr.forEach(num => num + 1);
console.timeEnd("forEach");

console.time("for-loop");
for (let i = 0; i < arr.length; i++) {
  arr[i] + 1;
}

console.timeEnd("for-loop");

let arr = new Array(100000).fill(0);

console.time("forEach");
arr.forEach(num => num + 1);
console.timeEnd("forEach");

console.time("for-loop");
for (let i = 0; i < arr.length; i++) {
  arr[i] + 1;
}

console.timeEnd("for-loop");

let arr = new Array(100000).fill(0);

console.time("forEach");
arr.forEach(num => num + 1);
console.timeEnd("forEach");

console.time("for-loop");
for (let i = 0; i < arr.length; i++) {
  arr[i] + 1;
}

console.timeEnd("for-loop");

Throttle and Debounce Events

Expensive event listeners (e.g., scroll, resize) can degrade performance.

Debouncing ensures the function runs only after the event has stopped firing.
Throttling ensures the function runs at a fixed interval, even if the event continues firing.

Debounce Example

function debounce(func, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}
  
window.addEventListener("resize", debounce(() => {
  console.log("Resize event fired!");
}, 300));

function debounce(func, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}
  
window.addEventListener("resize", debounce(() => {
  console.log("Resize event fired!");
}, 300));

function debounce(func, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}
  
window.addEventListener("resize", debounce(() => {
  console.log("Resize event fired!");
}, 300));

Throttle Example

function throttle(func, limit) {
  let lastCall = 0;
  return function () {
    let now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      func.apply(this, arguments);
    }
  };
}
  
window.addEventListener("scroll", throttle(() => {
  console.log("Scroll event fired!");
}, 200));

function throttle(func, limit) {
  let lastCall = 0;
  return function () {
    let now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      func.apply(this, arguments);
    }
  };
}
  
window.addEventListener("scroll", throttle(() => {
  console.log("Scroll event fired!");
}, 200));

function throttle(func, limit) {
  let lastCall = 0;
  return function () {
    let now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      func.apply(this, arguments);
    }
  };
}
  
window.addEventListener("scroll", throttle(() => {
  console.log("Scroll event fired!");
}, 200));

Use Web Workers for Heavy Computations

Web Workers allow running JavaScript in the background without blocking the main thread.

Creating a Web Worker

let worker = new Worker("worker.js");

worker.postMessage("Start");
  
worker.onmessage = event => {
  console.log("Worker Response:", event.data);
};

let worker = new Worker("worker.js");

worker.postMessage("Start");
  
worker.onmessage = event => {
  console.log("Worker Response:", event.data);
};

let worker = new Worker("worker.js");

worker.postMessage("Start");
  
worker.onmessage = event => {
  console.log("Worker Response:", event.data);
};

worker.js

self.onmessage = () => {
  let result = 0;
  for (let i = 0; i < 1e9; i++) {
    result += i;
  }
  postMessage(result);
};

self.onmessage = () => {
  let result = 0;
  for (let i = 0; i < 1e9; i++) {
    result += i;
  }
  postMessage(result);
};

self.onmessage = () => {
  let result = 0;
  for (let i = 0; i < 1e9; i++) {
    result += i;
  }
  postMessage(result);
};

Use Efficient Data Structures

Use Maps Instead of Objects for Large Datasets

let obj = {};
let map = new Map();
  
map.set("key1", "value1");
console.log(map.get("key1"));

let obj = {};
let map = new Map();
  
map.set("key1", "value1");
console.log(map.get("key1"));

let obj = {};
let map = new Map();
  
map.set("key1", "value1");
console.log(map.get("key1"));

Use Set for Unique Values

let uniqueNumbers = new Set([1, 2, 3, 3, 4]);
console.log(uniqueNumbers.size); // Outputs: 4

let uniqueNumbers = new Set([1, 2, 3, 3, 4]);
console.log(uniqueNumbers.size); // Outputs: 4

let uniqueNumbers = new Set([1, 2, 3, 3, 4]);
console.log(uniqueNumbers.size); // Outputs: 4

Conclusion

Optimizing JavaScript ensures better browser performance and compatibility. This section covered techniques for reducing execution time, handling memory leaks, improving event handling, and using efficient data structures. The next section will focus on JavaScript in the Backend with Node.js, covering server-side development with JavaScript.

Still have questions?

Get in touch