商店HTML代码中变量（浏览器更快？）

这

<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中速度更快，但浏览器速度怎么样？浏览器在正文标签中使用较小的HTML代码更快（例如，拖动div）吗？

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

来源

2011-08-13 Peter

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

在这种方法的HTML是“静态” HTML;它存在于对浏览器的响应中，并且不需要通过JavaScript进行分析或解释以添加到页面中。
解析和呈现HTML时，浏览器会注意到display: none，并且不会显示该元素或其中的任何内容。这加快了页面的初始渲染速度，因为它实际上并没有渲染大量的HTML。

来源

2011-08-13 14:18:52 Chris

这是正确的答案。 –

我会用第二个，因为它是更快地执行。（1调用jQuery的，而不是2）

来源

2011-08-13 13:40:26 genesis

它也会在您的客户端浏览器中存储更少的内存。纠正我，如果我错了，但如果你将所有的HTML存储在一个变量中，并将它附加到DOM，那么你将有一个大JS字符串存储（变量）和结果HTML附加到DOM，而另一种方式您只有存储在DOM中的HTML。这可能不是一个问题..只是说.. – rlemon

@ rlemon：是的，它会存储更少的内存:) - 我认为第二个不使用内存 – genesis

如果你有太多的DOM项目，那么我建议去与第一个。假设你想遍历DOM并寻找一个元素，如果你有更少的元素，那么遍历将花费更少的时间。

我的建议是基准你的代码。并使用最适合你的那个。

您可以使用以下工具

http://jsperf.com/

来源

2011-08-13 14:01:07

取决于究竟你想达到的。是的，第二个显然会更快，因为HTML已经存在于jQuery取消隐藏的Document中。在第一种方法中，jQuery正在实时写入内容。

同样可能有不同的方法来达到你正在尝试，比如你可以写的div u必须使用AJAX等等等等，编辑成一个文件..并从当前文档中删除它。从而减少文档中的html数量。

我只是给你一个在这里..想法的事情为u还没有明确的解释，你正在努力实现给你最合适的解决方案

来源

2011-08-13 14:12:27 ShalomSam

有什么之间的区别.. 。

这取决于 “是” 的意思。

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

但那又如何？用户将无法区分差异;用户的计算机通常没有做其他任何事情，所以保存CPU周期毫无意义。

我建议所有的程序员 - 但尤其是程序员写的浏览器 - 就是直到你看到一个问题，忽略时间和空间效率并专注于

正确性 - 代码执行的即使面对意想不到的投入，基础平台的变化以及类似的挑战，
可维护性 - 编写的代码可以根据需求的变化进行更改;和
可用性 - 代码提供了一个接口（在最终用户代码的情况下为UI，在库代码的情况下为接口），允许缺乏对代码完整赞赏的用户仍然使用它正确。

效率，b。

来源

2011-08-13 14:15:37 Malvolio

+1“这取决于'是'的含义”并让我发笑。 -1，因为这个问题是可以回答的，而且这里有一个明显的“更快”的方法。在Javascript中使用字符串构建所有DOM树的脚步是_poor_，并且暗示它不能或不应该被改进是_dangerous_。 –

商店HTML代码中变量（浏览器更快？）

回答

相关问题