简体   繁体   English

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

[英]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示例设计的网页更快:

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

Or by static Javascript with DOM? 还是通过带有DOM的静态Javascript? Example with document.createElement("...") 带有document.createElement(“ ...”)的示例

直接提供HTML将会是一种更快的方法,因为您的浏览器只需要呈现元素,而不需要操纵dom :)

Populating HTML statistically is much faster than populating through javascript. 统计地填充HTML比通过javascript填充要快得多。

  1. The HTML document gets downloaded HTML文档已下载

  2. The parsing of the HTML document starts HTML文档的解析开始

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

  4. jquery.js is downloaded and parsed jquery.js已下载并解析

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

  6. xyz.js is downloaded, parsed and run xyz.js已下载,解析并运行

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

  8. abc.css is downloaded and parsed 下载并解析了abc.css

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

  10. Internal CSS rules are parsed and defined 内部CSS规则被解析和定义

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

  12. Internal Javascript is parsed and run 内部Javascript被解析并运行

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

  14. xyz.jpg is downloaded and displayed xyz.jpg已下载并显示

  15. Parsing of HTML document ends HTML文档解析结束

So, if you have static html loading with javascript will be overhead for page rendering. 因此,如果您具有使用javascript进行静态html加载的功能,则页面呈现将是开销。

It's faster to send a static html, because the client doesn't have to execute js. 发送静态html的速度更快,因为客户端不必执行js。 Sending complete HTML is also better for search engines, even if google can now execute js. 即使谷歌现在可以执行js,发送完整的HTML对搜索引擎也更好。

You can still use js to add elements in your DOM once the page is loaded 页面加载后,您仍然可以使用js在DOM中添加元素

Like others said, it is always faster to output static HTML rather than generating it dynamically using Javascript/JQuery. 就像其他人所说的那样,输出静态HTML总是比使用Javascript / JQuery动态生成HTML更快。 However, sometimes the content cannot be served directly and generating the HTML dynamically is the only choice. 但是,有时无法直接提供内容,并且动态生成HTML是唯一的选择。 I have worked on a few applications where this was the case. 在这种情况下,我已经处理了一些应用程序。 In general, generate static HTML whenever you can. 通常,请尽可能生成静态HTML。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM