Question

......之间是否存在差异？

此

<html>
   ...
    <div id="myDiv">  </div>';
   ...
</html>
var manyHtmlCode = '  ... many Html Code ... ';
// onclick -> write it in to the DIV -> $('myDiv').append(manyHtmlCode);

和这个

<html>
   ...
    <div id="myDiv" style="display:none;"> ... many Html Code ... </div>';
   ...
</html>
// onclick -> show content $('myDiv').show();

对我来说很明显第二种解决方案在javascript中速度更快，但是浏览器的速度呢？浏览器是否更快（例如，拖动div），在主体标签中使用较小的HTML代码？

如果是这样，最好将不需要的HTML代码存储在JS var中。我的问题是我有一个包含许多可拖动div的页面。当html代码较小时，Imho更好。

Answer 1

第二种解决方案更快，原因有两个：

此方法中的HTML是“静态”HTML;它存在于对浏览器的响应中，并且不需要由JavaScript解析或解释以添加到页面中。
在解析和呈现HTML时，浏览器会注意到display: none并且不会在该内容中呈现该元素或任何内容。这样可以加快页面的初始渲染速度，因为它实际上并不会渲染很多HTML。

Answer 2

我会使用第二个，因为执行速度更快。（1次调用jQuery而不是2次）

Answer 3

如果你有太多的DOM项目，那么我建议先选择第一项。假设您想要遍历DOM并查找元素，如果元素较少，则遍历将花费更少的时间。

我的建议是对代码进行基准测试。并使用最适合你的那个。

您可以使用以下工具

http://jsperf.com/

Answer 4

取决于你想要达到的目标。是的，第二个显然会更快，因为HTML已经存在于文档中，jQuery没有隐藏。在第一种方法中，jquery实时编写内容。

同样可能有不同的方法来实现你正在尝试的东西，比如你可以使用ajax等编写你已经编辑成文件的div。并从当前文档中删除它。从而减少了文档中的html数量。

我只是在这里给你一个想法..事情是你没有清楚地解释你想要达到的目标，为你提供最合适的解决方案

Answer 5

......之间是否存在差异？

这取决于“是”的含义。

在特定浏览器的特定版本上，一个或另一个将运行得更快。如果您愿意，您可以在五个或十个不同的浏览器版本上对它们进行基准测试，并找出通常会获胜的版本。

但是那又怎样？用户无法区分;用户的计算机通常没有做任何其他事情，所以没有必要保留CPU周期。

我对所有程序员的建议 - 特别是对于为浏览器编写的程序员 - 是在你看到问题并专注于

之前忽略时间和空间效率

正确性 - 代码按设计执行，即使面对意外的输入，底层平台的变化以及类似的挑战;
可维护性 - 编写代码，以便随着需求的变化进行更改;和
可用性 - 代码提供了一个界面（在最终用户代码的情况下是UI，或者在库代码的情况下是API），允许缺乏对代码仍然正确使用它。

效率，呸。

将HTML代码存储在变量中（浏览器速度更快？）

5 个答案: