基本上,我问核心代码编写者的问题是: 什么更好?
<div> Blah blah blah blah </div>
或者
document.getElementById("blah").innerHTML = "Blah blah blah blah"
抱歉,我不能翻译没有给出的文本。请提供需要翻译的内容。
<div> Blah blah blah blah </div>
或者
document.getElementById("blah").innerHTML = "Blah blah blah blah"
让浏览器渲染纯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>
HTML 的速度会更快,因为 JavaScript 需要下载额外的字节才能将文本添加到元素中。此外,JavaScript 需要额外的脚本和函数开销,虽然对于大型网站来说影响不大,但速度会变慢。
显然,对于给定的示例,HTML会更快。 HTML部分没有涉及逻辑,而JavaScript需要执行操作才能产生相同的结果。此外,HTML字符更少,带宽也更小。
您将使用JavaScript的原因将使问题无意义。您将使用JavaScript来完成无法在初始HTML输出中完成的任务。
虽然Justin Niessner的回答基本上是正确的,但我想补充一点:实际加载网站的速度以及用户对网站速度的感知可能会受到很多因素的影响。考虑以下问题:
等等。
<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中绘制图标比从服务器加载图像更快的情况会很有趣...不过这是完全不同的问题,涉及到许多变量。
HTML会更快,即使没有其他原因,也是因为您仍然必须发送要显示的字符的确切字节数,以及用于将其转换回页面的JavaScript的额外字符。现在,如果您计划使用JavaScript通过AJAX稍后向页面添加元素,则最好将数据作为JSON发送并将其分配给HTML元素。
HTML 总是能更快地进行渲染。
使用 JavaScript 可能会出现的问题: