Keeping the performance in mind while selecting the elements manually

Here is the final code from the previous lesson:

const accountForm = document.querySelector(".account-form");
  
accountForm.addEventListener("submit", function (event) {
  // Prevents the default form submission behavior
  event.preventDefault();

  //Select all the fields individually so that you can access their values
  const fullNameField = document.querySelector("#full-name");
  const emailField = document.querySelector("#email");
  const ageField = document.querySelector("#age");
  const countryField = document.querySelector("#country");
  const passwordField = document.querySelector("#password");
  
  //Get the value of "Full Name" field.
  console.log(fullNameField.value);
  
  //Get the value of "Email" field.
  console.log(emailField.value);
  
  //Get the value of "Age" field.
  console.log(ageField.value);
  
  //Get the value of "Country" field.
  console.log(countryField.value);
  
  //Get the value of "Password" field.
  console.log(passwordField.value);
});    

If you notice, we are selecting the individual form fields only inside the form submission's event handler.

This means we select the form fields every time the user submits the form.

There is a problem with this.

Whenever you select an HTML element using Javascript, a query is performed to find that element and then select it.

And this querying takes a certain amount of time.

For example, if you are selecting a single element, it could take 10 milliseconds (probably faster than that).

If you're selecting five elements, it could take five times longer than selecting a single element.

If we select all these elements only once, then there is no performance headache.

However, if we select all these elements every time an event is fired, then there could be a slight performance issue.

In our case, we make the same mistake of selecting form elements every time the form is submitted.

And we can easily avoid this mistake by selecting the form elements outside of the form submission event and then referencing them inside the form submission's event handler:

const accountForm = document.querySelector(".account-form");

//Select all the fields individually so that you can access their values after the form submission event is fired
const fullNameField = document.querySelector("#full-name");
const emailField = document.querySelector("#email");
const ageField = document.querySelector("#age");
const countryField = document.querySelector("#country");
const passwordField = document.querySelector("#password");
  
accountForm.addEventListener("submit", function (event) {
  // Prevents the default form submission behavior
  event.preventDefault();

  // So that you can validate and process the form data starting from here
  
  //Get the value of "Full Name" field.
  console.log(fullNameField.value);
  
  //Get the value of "Email" field.
  console.log(emailField.value);
  
  //Get the value of "Age" field.
  console.log(ageField.value);
  
  //Get the value of "Country" field.
  console.log(countryField.value);
  
  //Get the value of "Password" field.
  console.log(passwordField.value);
});    

Did you notice the difference?

In the above code, because we know beforehand that we should process the values of certain form fields, we select them well before the form submission event is fired.

And once the event is fired, we access the pre-selected form elements inside the event handler to get their values.

This way, we select the form fields once and can still access their values whenever the form is submitted.

Long story short, you have to try to minimize HTML queries within event handlers to avoid performance issues.

In our case, we only dealt with a few selections. So, "selecting them inside the event handler" or "selecting them outside the event handler" doesn't make much difference.

However, this definitely becomes a problem when dealing with many elements, and it is not an uncommon scenario.

When you're dealing with such a large set of data, inefficient HTML queries can noticeably impact performance.

Users may experience longer loading times, unresponsive interactions, or even browser crashes.

This can lead to frustration, lower engagement, and potentially hurt your website's overall performance.

So, as a best practice, perform HTML queries outside of the event handler, regardless of whether you're dealing with a smaller or larger set of elements.

This also applies to other HTML operations such as:

1. Creating HTML elements
2. Changing the content of HTML elements

Just be mindful of not making extra HTML queries when they are not needed.

In the next lesson, we will learn how to build an addition calculator in Javascript.