zoukankan      html  css  js  c++  java
  • 面试回忆录(三)

    下面六个选择器,都是从父元素中选择子元素。你知道哪个速度最快,哪个速度最慢吗?

      $('.child', $parent)
      $parent.find('.child')
      $parent.children('.child')
      $('#parent > .child')
      $('#parent .child')
      $('.child', $('#parent'))

    我们一句句来看。
    (1) $('.child', $parent)
    这条语句的意思是,给定一个DOM对象,然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child'),这会导致一定的性能损失。它比最快的形式慢了5%-10%。
    (2) $parent.find('.child')
    这条是最快的语句。.find()方法会调用浏览器的原生方法(getElementById,getElementByName,getElementByTagName等等),所以速度较快。
    (3) $parent.children('.child')
    这条语句在jQuery内部,会使用$.sibling()和javascript的nextSibling()方法,一个个遍历节点。它比最快的形式大约慢50%。
    (4) $('#parent > .child')
    jQuery内部使用Sizzle引擎,处理各种选择器。Sizzle引擎的选择顺序是从右到左,所以这条语句是先选.child,然后再一个个过滤出父元素#parent,这导致它比最快的形式大约慢70%。
    (5) $('#parent .child')
    这条语句与上一条是同样的情况。但是,上一条只选择直接的子元素,这一条可以于选择多级子元素,所以它的速度更慢,大概比最快的形式慢了77%。
    (6) $('.child', $('#parent'))
    jQuery内部会将这条语句转成$('#parent').find('.child'),比最快的形式慢了23%。
    所以,最佳选择是$parent.find('.child')。而且,由于$parent往往在前面的操作已经生成,jQuery会进行缓存,所以进一步加快了执行速度。
    具体的例子和比较结果,请看这里

    这是在我电脑上的测试结果:

  • 相关阅读:
    java-logic====吃货联盟
    jsp---》》》新闻发布系统的项目跟踪+++++++文件上传
    jsp---tomcat===》》内置对象
    JS中两个节点的关系
    HTML第二本书学习后记
    JavaScript:编程改变文本样式
    JavaS:网页中的显示和隐藏
    第一次做网页设计遇到的问题总结
    HTML中添加背景音乐
    表格的结构标记
  • 原文地址:https://www.cnblogs.com/wolm/p/3488451.html
Copyright © 2011-2022 走看看