Is it good in term of page loading to load js files and create whole page using js on client side

user_14617296 0
Viewed 33

I have read that multiple http request for web resources(html, css, js) results in lazy loading of web page. What if we create whole html and css on client side using js. If i have index.html that contains following code:

<html>
<head></head>
<body>
<script src='main.js'></script>
</body>
</html>

and main.js contains something like:

var d = document.createDocumentFragment();
d.appendChild(para);
var para = document.createElement("P");
para.innerText = "This is a paragraph";
document.body.appendChild(d);

will it make page loading faster?

http html javascript performance
1 Answers

The short answer is perhaps not.

To illustrate:

The time it takes for a page to load depends on a combination of many factors:

  • Number of requests, which is what you're referring to.
  • Total bytes to load, which is determined by the size of the HTML file and its assets.
  • User's connection speed.
  • User's local resources (RAM and CPU).
  • And many more...

In your example, you've written about 170 characters of Javascript that practically creates a <p> element.

The same result could be achieved by writing <p>This is a paragraph</p> which adds only 26 characters to your HTML.

Having more characters in any of your HTML, CSS, and JS files means that the total size of your files is larger and it may take a user's browser more time to load them.

Having said that, there is more nuance to optimizing web performance. Reducing the number of requests CAN reduce load time, but it's important to be aware how your changes affect other factors that also influence the performance of your page.

user_53532860
Related