Javascript和HTML哪个加载时间更长？

Question

我应该选择更长的JavaScript还是更长的HTML呢？ 以下几点需要注意： 1. 我不关心SEO评分。 2. 我关心网站速度。 3. 我关心网站功能。

基本上，我问核心代码编写者的问题是： 什么更好？

<div> Blah blah blah blah </div>

或者

document.getElementById("blah").innerHTML = "Blah blah blah blah"

抱歉，我不能翻译没有给出的文本。请提供需要翻译的内容。

- Susagittikasusa

---

4个空格表示代码行。使用“ctrl-k”选择。 - Peter Ajtai

Answer 1

让浏览器渲染纯HTML始终比加载JavaScript，等待DOM就绪，然后使用JavaScript操作DOM要快。

即使您忽略浏览器通过JavaScript操作DOM时需要做更多的工作这一事实，也请考虑哪种下载速度更慢：

30个字符：

<div>Blah Blah Blah Blah</div>

or 50+ Characters (too lazy to count):

<script>
    document.getElementById("blah").innerHTML = "Blah Blah Blah Blah";
</script>

所以选择JavaScript方法会从服务器下载更多内容并要求浏览器执行更多工作来渲染页面。

- Justin Niessner

---

我想要添加一个（嗯...让我们称之为）弹出菜单，但不是通过AJAX，也不是我想从数据库中获取的东西。但我希望它只在有人点击div或其他东西时出现。如果已经编写了HTML，如何实现这一点？ - Susagittikasusa

@Susagittikasusa - 根据您对弹出菜单的定义，如果您希望它在鼠标悬停时显示（而不是点击），则几乎可以完全使用CSS进行编码。否则需要一些JavaScript。请记住，并非所有JavaScript都是AJAX。 - Justin Niessner

好的，我会用 CSS 尝试一下。谢谢。 - Susagittikasusa

@Susagittikasusa，这不会太难，因为您已经了解内容。您只需在页面中的某个位置具有“弹出菜单”的HTML，并设置CSS display: none，然后在希望其可见时更改display属性（为inline、block或inline-block）（使用:hover CSS伪类或使用JavaScript事件将CSS类添加到元素，然后再删除该类；或者反过来，首先有一个导致元素消失的类，然后在用户完成菜单后再添加回来）。 - Nate Bundy

Answer 2

正如其他人所说，纯HTML加载速度更快。然而，根据您实际想要完成的任务，决策/答案可能会有些棘手。

例如，您可以只使用基本的HTML框架和内容占位符，然后通过ajax调用加载实际数据。由于初始渲染将非常快速，用户感知将是网站加载非常快速。实际/总时间将更长，但由于最佳站点渲染速度快，权衡可能是值得的。

- jsuggs

Answer 3

HTML 的速度会更快，因为 JavaScript 需要下载额外的字节才能将文本添加到元素中。此外，JavaScript 需要额外的脚本和函数开销，虽然对于大型网站来说影响不大，但速度会变慢。

- Joel

Answer 4

显然，对于给定的示例，HTML会更快。 HTML部分没有涉及逻辑，而JavaScript需要执行操作才能产生相同的结果。此外，HTML字符更少，带宽也更小。

您将使用JavaScript的原因将使问题无意义。您将使用JavaScript来完成无法在初始HTML输出中完成的任务。

- Fosco

Answer 5

虽然Justin Niessner的回答基本上是正确的，但我想补充一点：实际加载网站的速度以及用户对网站速度的感知可能会受到很多因素的影响。考虑以下问题：

• 从服务器传输到浏览器的数据量。
• 加载单个页面所需的HTTP请求数量。
• 由空格、未压缩的JavaScript、未压缩的CSS样式引起的开销。
• 未经优化的图像。
• 页面的动态构建与静态构建。
• 将呈现逻辑放入服务器还是放入浏览器。

等等。

- Ondrej Tucny

Answer 6

<div> Blah blah blah blah </div>

由于其他代码不完整，因此这个更快：

$(document).ready(function() {   // Using jQuery here, since creating a pure
                                 // JS DOM ready is a pain.
                                 // window.onload is fired later.
    document.getElementById("blah").innerHTML = "Blah blah blah blah";
}

因此，当JS开始工作时，DOM已经准备就绪，这基本上意味着文本已经呈现。

当然，如果您使用以下内容，则绝对没有竞争：

window.onload = function() { ...

看到在SVG中绘制图标比从服务器加载图像更快的情况会很有趣...不过这是完全不同的问题，涉及到许多变量。

- Peter Ajtai

Answer 7

HTML会更快，即使没有其他原因，也是因为您仍然必须发送要显示的字符的确切字节数，以及用于将其转换回页面的JavaScript的额外字符。现在，如果您计划使用JavaScript通过AJAX稍后向页面添加元素，则最好将数据作为JSON发送并将其分配给HTML元素。

- FatherStorm

Answer 8

HTML 总是能更快地进行渲染。

使用 JavaScript 可能会出现的问题：

1. JavaScript 需要一定的执行时间。
2. 必须等待元素创建完成后才能通过 JavaScript 访问它们。
3. 如果 JavaScript 位于单独的文件中，则需要多次 HTTP 传输到服务器。
4. 如果用户关闭了 JavaScript，则根本看不到它。
5. JavaScript 代码也稍微大一些，因此传输所需的时间更长。
6. 还存在可访问性问题（屏幕阅读器可能无法正常工作）。
7. innerHTML 不是标准的 JavaScript，因此某些浏览器可能无法正确执行它。

- Adam

---

他提到他关心功能性。 - ajsie

@weng - 这在第4点中已经解决了，否则没有任何功能上的区别。 - Adam