Question

如果有更长的Javascript或更长的HTML，我会更好。一些事情- 我不关心搜索引擎优化评级。我确实关心网站的速度。 3.我确实关心网站的功能。

基本上我的问题是核心编码员 - 什么更好 -

<div> Blah blah blah blah </div>

或

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

？任何额外的知识总是受欢迎:)。谢谢。

Answer 1

让浏览器呈现纯HTML总是比加载JavaScript更快，等待DOM准备就绪，然后使用JavaScript来操作DOM。

即使您忽略了浏览器在通过Javascript操作DOM时需要做更多工作的事实，只需考虑下载哪个内容需要更长的时间：

30个字符：

<div>Blah Blah Blah Blah</div>

或50+个字符（懒得算）：

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

因此，通过使用JavaScript路由，您将从服务器下载更多内容，并要求浏览器执行更多工作来呈现页面。

Answer 2

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

例如，你可能只有一个带有内容占位符的基本html骨架，然后通过ajax调用加载实际数据。由于初始渲染将非常快速地发生，因此用户可以非常快速地加载网站。实际/总体时间会更长，但由于韧皮网站很快就会产生折衷，因此可能值得一试。

Answer 3

HTML会更快，因为javascript需要额外的字节才能下载到浏览器以将文本添加到元素中。此外，Javascript需要额外的脚本和功能开销，这不会太多，但对于大型网站，它会更慢。

Answer 4

对于给定的示例，HTML显然会更快。 HTML部分没有涉及逻辑，Javascript必须执行操作才能产生相同的结果。它也是更多的角色，然后是更多的带宽。

您希望使用Javascript的原因会使问题无法解决。您将使用Javascript来处理初始HTML输出中无法完成的事情。

Answer 5

如果没有其他原因，HTML会更快，你仍然需要发送你想要显示的字符的确切字节数PLUS javascript的额外字符转向并将其渲染回页面。现在，如果您计划使用javascript以后通过AJAX向页面添加元素，那么最好将数据作为JSON发送并将其分配给html元素。

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中绘制图标的时间比从服务器上加载图像要快得多......尽管有很多变量，这是一个完全不同的问题。

Answer 7

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

从服务器传输到浏览器的数据量。
要加载的单个页面的HTTP请求数。
由空格，非缩小的JavaScripts，非缩小的CSS样式引起的开销。
未经优化的图片。
页面的动态与静态构造。
将演示逻辑放入服务器而不是浏览器。

等

Answer 8

HTML将始终呈现得更快。

如您所述使用JavaScript的潜在问题：

JavaScript需要时间来执行。
您必须等待元素被创建，然后才能使用JavaScript访问它。
如果JavaScript位于单独的文件中，则它将是一个来回服务器的额外HTTP传输。
如果用户关闭了JavaScript，则根本不会看到它。
JavaScript代码也略大，所以再次转移需要更多时间。
还有可访问性问题（屏幕阅读器可能有问题）。
innerHTML不是标准JavaScript，因此某些浏览器可能无法正确执行它。

Javascript与HTML（需要更多时间加载）

8 个答案: