Javascript 优化ajax创建的div元素

Javascript 优化ajax创建的div元素,javascript,dom,optimization,Javascript,Dom,Optimization,在搜索建议可用时创建建议div,在搜索建议不可用时删除建议div。为此,还需要检查div是否在DOM中。这可以通过两种方式实现 案例一: 设置一个全局布尔变量isDivAvailable=false案例二 混乱: 哪一个更快 Javascript的全局范围变量查找 HTMLDOM解析和检索ajaxCreatedDiv 哪一个更快 JavaScript变量速度惊人(无论作用域如何)。所有涉及DOM的事情,尤其是对选择器的评估,都是缓慢的 然而,两者都不是必需的。布尔标志不需要是全局的,它只需要是静

在搜索建议可用时创建建议div,在搜索建议不可用时删除建议div。为此,还需要检查div是否在DOM中。这可以通过两种方式实现

案例一:

设置一个全局布尔变量
isDivAvailable=falseisDivAvailable=true并可设置
isDivAvailable=false当没有可用的建议时。因此,下次在创建div之前将检查此标志

案例二:

通过检查
isDivAvailable=document.getElementById(“ajaxCreatedDiv”)语句我们可以判断类似的情况,但这次我们不能创建全局布尔变量,因为它总是返回null,而且我们不需要设置
isDivAvailable

推断:

案例一:

  • 在全局范围内设置变量。(-1)
  • 要创建div,它需要查找全局布尔变量。(不知道)
  • 不需要DOM解析。(+1)
  • 它设置布尔变量的值。(-1)
  • 案例二:

  • 不在全局范围内设置。(+1)
  • 要创建div,它需要查找DOM。(不知道)
  • 对于DOM查找,需要进行解析。(-1)
  • 不需要设置变量。(+1)
  • 获胜者:

    案例一:-1,案例二:1=>案例二

    混乱:

    哪一个更快

  • Javascript的全局范围变量查找
  • HTMLDOM解析和检索ajaxCreatedDiv
  • 哪一个更快

    JavaScript变量速度惊人(无论作用域如何)。所有涉及DOM的事情,尤其是对选择器的评估,都是缓慢的


    然而,两者都不是必需的。布尔标志不需要是全局的,它只需要是静态的——在使用它的函数之外的范围内。而
    document.getElementById
    调用可以通过简单地持有对(
    id
    -less)
    的引用来避免,该引用被反复附加/删除到DOM中。您甚至不需要额外的布尔变量,只需测试
    myDiv.parentNode==null
    以查看它当前是否已分离。

    两者都很糟糕..但Javascript的全局范围变量会查找。快一点你能解释一下吗。。!遍历DOM确实是一项繁重的操作,使用全局范围变量对于解释器搜索所有范围链来说是一件令人头痛的事情。.用于测试性能问题是如何证明?@Bergi首先感谢您的时间。我看到了结果,并惊讶地看到它们,感到开悟了……)并且
    myDiv.parentNode==null
    语句将需要DOM解析,不是吗??解析?不,不涉及任何条件。它确实需要DOM访问,是的,但速度很快。说真的,这没什么关系。选择较短的代码:-)@Bergi我现在学到的是,它需要解析。但这次它会返回布尔值。因此,经验法则提倡使用JS变量而不是DOM解析。