删除未使用的DOM元素以获得性能

时间:2012-07-10 22:29:09

标签: javascript

我正在编写单页应用程序。当页面最初提供时,它包含许多DOM元素,这些元素包含我注入页面的json字符串。

当页面加载到客户端时,首先发生的是这些DOM元素从json解析为javascript对象,然后再也不会再使用。

从DOM中删除它们并减小它的大小会有性能优势吗?我没有找到关于这方面的任何结论性数据。有关信息,这些元素大小约为500K。

感谢您的建议。

2 个答案:

答案 0 :(得分:4)

  

从DOM中删除它们是否会带来性能优势   并减少其规模?

就DOM的性能而言,通常,与DOM交互的越少越好。

请记住,你的选择器遍历dom,所以如果你使用效率低的选择器,无论如何都会表现不佳,但如果你选择ID而不是类或属性的元素,你可以挤出好的表现无论您是否删除了那些无关的标记项,都会显示该页面。

  

最初提供页面时,它包含许多DOM元素   包含我注入页面的json字符串....有关信息,   这些元素的大小约为500K。

就页面加载而言,您的性能已经因必须传输所有数据而受到影响。如果你能找到一种只转移json的方法,它只会有所帮助。但是,事后删除不会解决这个特殊问题。

答案 1 :(得分:1)

无论您是从DOM中提取JSON,您都可以考虑使用此技术来包含JSON对象:

<script type='text/json' id='whatever'>
  { "some": "json" }
</script>

浏览器将完全忽略这些脚本的内容(当然,除了嵌入式字符串看起来像</script>之外,它发生在我身上,就像JSON序列化程序可能想要以某种方式处理的那样),所以你不要存在嵌入式&符号和事物的风险。这可能是一个性能上的胜利:浏览器可能更容易寻找<script>块的结束,而不是查看它认为是实际内容的东西。您可以使用.innerHTML逐字逐句获取内容。