使用静态HTML或静态DOM Javascript设计页面?

时间:2016-02-06 12:06:38

标签: javascript html dom createelement

今天我提出了一个问题。加载从静态html示例设计的网页更快:

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

或者使用DOM的静态Javascript? document.createElement(&#34; ...&#34;)

的示例

4 个答案:

答案 0 :(得分:2)

直接提供HTML将是更快的方法,因为您的浏览器只需渲染元素,而不是操纵dom:)

答案 1 :(得分:2)

统计填充HTML比填充javascript要快得多。

  1. 下载HTML文档

  2. 解析HTML文档

  3. HTML解析达到<script src="jquery.js" ...

  4. 下载并解析jquery.js

  5. HTML解析到达<script src="xyz.js" ...

  6. 下载,解析并运行xyz.js

  7. HTML解析到达<link href="abc.css" ...

  8. 下载并解析abc.css

  9. HTML解析到达<style>...</style>

  10. 解析和定义内部CSS规则

  11. HTML解析到达<script>...</script>

  12. 解析并运行内部Javascript

  13. HTML解析达到<img src="abc.jpg" ...

  14. 下载并显示xyz.jpg

  15. HTML文档的解析结束

  16. 所以,如果你有静态html加载javascript将是页面渲染的开销。

答案 2 :(得分:1)

发送静态html的速度更快,因为客户端不必执行js。发送完整的HTML对于搜索引擎也更好,即使谷歌现在可以执行js。

一旦页面加载,您仍然可以使用js在DOM中添加元素

答案 3 :(得分:-1)

与其他人一样,输出静态HTML总是更快,而不是使用Javascript / JQuery动态生成它。但是,有时无法直接提供内容,动态生成HTML是唯一的选择。我曾经在一些应用程序中工作过。通常,只要有可能就生成静态HTML。