高性能JavaScript之DOM编程_把dom和javascript(这里指ecmscript)各自想象为一个岛屿(1)

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• stabery

• console.log(lis.length); // 4
  

  
  而这正是低效之源！很简单，跟数组的优化操作一样，缓存个length变量就ok了（读取一个集合的length比读取一个普通数组的lengh要慢很多，因为每次都要查询）：
  
  
  
  

  console.time(0);
  var lis0 = document.getElementsByTagName(‘li’);
  var str0 = ‘’;
  for(var i = 0; i < lis0.length; i++) {
  str0 += lis0[i].innerHTML;
  }
  console.timeEnd(0);

  console.time(1);
  var lis1 = document.getElementsByTagName(‘li’);
  var str1 = ‘’;
  for(var i = 0, len = lis1.length; i < len; i++) {
  str1 += lis1[i].innerHTML;
  }
  console.timeEnd(1);

  
  我们看看性能提升能有多少？
  
  
  
  

  0: 0.974ms
  1: 0.664ms

  
  当集合的长度大的时候（demo是1000），性能提升还是很明显的。   
   而《高性能JavaScript》提出了另一个优化策略，它指出，“由于遍历数组比遍历集合快，因此如果先将集合元素拷贝到数组中，那么访问它的属性会更快”，经过测试，并没有很好地发现这个规律，所以还是不要多此一举了，测试代码如下：（有疑义欢迎与我交流探讨）
  
  
  
  

  console.time(1);
  var lis1 = document.getElementsByTagName(‘li’);
  var str1 = ‘’;
  for(var i = 0, len = lis1.length; i < len; i++) {
  str1 += lis1[i].innerHTML;
  }
  console.timeEnd(1);

  console.time(2);
  var lis2 = document.getElementsByTagName(‘li’);
  var a = [];
  for(var i = 0, len = lis2.length; i < len; i++)
  a[i] = lis2[i];

  var str2 = ‘’;
  for(var i = 0, len = a.length; i < len; i++) {
  str2 += a[i].innerHTML;
  }
  console.timeEnd(2);

  
  后来反思了一下，意思大概是这样：
  
  
  
  

  console.time(2);
  var lis2 = document.getElementsByTagName(‘li’);
  var a = [];
  for(var i = 0, len = lis2.length; i < len; i++)
  a[i] = lis2[i];
  str2 += a[i].innerHTML;
  console.timeEnd(2);

  
  这样确实有很显著的差别哦：
  
  
  
  

  1: 2.615ms
  2: 0.164ms

  
  ### 3、querySelector()和querySelectorAll()
  
  
  本节的最后介绍两个原生DOM方法，querySelector()和querySelectorAll()，相信大家都不陌生，前者返回一个数组（注意，它们的返回值不像HTML集合一样会动态变化），后者返回匹配的第一个元素。好吧，其实并不是所有时候它的性能都优于前者的HTML集合遍历。
  
  
  
  

  console.time(1);
  var lis1 = document.getElementsByTagName(‘li’);
  console.timeEnd(1);

  console.time(2);
  var lis2 = document.querySelectorAll(‘li’);
  console.timeEnd(2);

  // 1: 0.038ms
  // 2: 3.957ms

  
  #### 算法刷题
  
  大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。
  
  **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
  
  ![](https://img-blog.csdnimg.cn/img_convert/c582a01373152bb4cd38bc6ad5cc8027.png)
  
  
  
  **写在最后**
  
  **最后，对所以做Java的朋友提几点建议，也是我的个人心得：**
  
  1.  疯狂编程
  
  2.  学习效果可视化
  
  3.  写博客
  4.  阅读优秀代码
  5.  心态调整
  
  
  
  ert/c582a01373152bb4cd38bc6ad5cc8027.png)
  
  
  
  **写在最后**
  
  **最后，对所以做Java的朋友提几点建议，也是我的个人心得：**
  
  1.  疯狂编程
  
  2.  学习效果可视化
  
  3.  写博客
  4.  阅读优秀代码
  5.  心态调整