CODEWITHSUNDEEP
javascripthtmldomcreateelement
Davide
Davide

Reputation: 2124

Design page with static HTML or static DOM Javascript?

today I've a question. Is faster to load a web page designed from static html example:

<html>
   <head>
      <title>Web page</title>
   </head>
   <body>
      <p>Hi community</p>
   </body>
</html>

Or by static Javascript with DOM? Example with document.createElement("...")

Upvotes: 2

Views: 1404

Answers (4)

Suhail Mehta
Suhail Mehta

Reputation: 5542

Populating HTML statistically is much faster than populating through javascript.

  1. The HTML document gets downloaded

  2. The parsing of the HTML document starts

  3. HTML Parsing reaches <script src="jquery.js" ...

  4. jquery.js is downloaded and parsed

  5. HTML parsing reaches <script src="xyz.js" ...

  6. xyz.js is downloaded, parsed and run

  7. HTML parsing reaches <link href="abc.css" ...

  8. abc.css is downloaded and parsed

  9. HTML parsing reaches <style>...</style>

  10. Internal CSS rules are parsed and defined

  11. HTML parsing reaches <script>...</script>

  12. Internal Javascript is parsed and run

  13. HTML Parsing reaches <img src="abc.jpg" ...

  14. xyz.jpg is downloaded and displayed

  15. Parsing of HTML document ends

So, if you have static html loading with javascript will be overhead for page rendering.

Upvotes: 3

Sammy Jaafar
Sammy Jaafar

Reputation: 523

Like others said, it is always faster to output static HTML rather than generating it dynamically using Javascript/JQuery. However, sometimes the content cannot be served directly and generating the HTML dynamically is the only choice. I have worked on a few applications where this was the case. In general, generate static HTML whenever you can.

Upvotes: -1

Gwendal
Gwendal

Reputation: 1273

It's faster to send a static html, because the client doesn't have to execute js. Sending complete HTML is also better for search engines, even if google can now execute js.

You can still use js to add elements in your DOM once the page is loaded

Upvotes: 1

Jannik Rasmussen
Jannik Rasmussen

Reputation: 397

Serving the HTML directly would be the faster approach, as your browser only have to render the elements, and not manipulate the dom :)

Upvotes: 3

Related Questions