为什么 TreeWalker 和 innerText 给出不同的结果？

console.time('inner-text');
console.log('innerText length: ' + 
  document.querySelector('.content').innerText.length);
console.timeEnd('inner-text');

console.time('tree-walker');
console.log('TreeWalker length: ' + 
  textNodesTreeWalker(document.querySelector('.content')).text.length);
console.timeEnd('tree-walker');

console.time('recursion');
console.log('recursion length: ' + 
  textNodesRecursion(document.querySelector('.content')).text.length);
console.timeEnd('recursion');

function textNodesTreeWalker(el){
  let node, all = [], text = '', beg, end, 
      walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
  while(node = walk.nextNode()){
    beg = text.length;  
    text += node.textContent;
    end = text.length;
    all.push({node,beg,end});
  }
  return {all,text};
}

function textNodesRecursion(node){
  let all = [], text='', beg, end;
  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3){
      beg = text.length;  
      text += node.textContent;
      end = text.length;
      all.push({node,beg,end});
    }
    else {
       let child = textNodesRecursion(node);
       text+=child.text;
       all = all.concat(child.all);
    }
  }
  return {all,text};
}

<div class="content"><p><span>Lorem ipsum dolor sit amet</span>, <span>consectetur adipiscing elit</span>. <span>Suspendisse orci velit</span>, <span>sagittis non elit id</span>, <span>placerat blandit leo</span>. <span>Etiam eu erat at nunc aliquam</span> <span>eleifend non vel libero</span>. <span>In ac mauris sit amet velit</span> <span>luctus faucibus</span>. <span>In at vulputate libero</span>. <span>Vestibulum non orci velit</span>. <span>Sed aliquam ante eget odio commodo</span> <span>condimentum</span>. <span>Suspendisse blandit at ante at condimentum</span>. <span>Duis id iaculis nunc</span>, <span>et pretium tortor</span>. <span>Ut posuere tellus at est accumsan</span> <span>semper</span>. <span>Morbi vulputate dapibus nisl varius vestibulum</span>. <span>Suspendisse ipsum mi</span>, <span>venenatis at elit eu</span>, <span>porta faucibus lorem</span>. <span>Integer commodo maximus neque tristique tempor</span>. <span>In hac habitasse platea dictumst</span>. <span>Fusce tincidunt ut felis non pharetra</span>.</p><p><span>Donec dictum faucibus massa at accumsan</span>. <span>Aliquam erat volutpat</span>. <span>Donec et nibh fringilla nisl tempor</span> <span>pretium</span>. <span>Pellentesque justo ante</span>, <span>tincidunt non felis id</span>, <span>gravida interdum augue</span>. <span>Phasellus dictum tempus dolor et imperdiet</span>. <span>Maecenas at ornare erat</span>. <span>Integer pretium diam nisl</span>, <span>eget vestibulum orci pretium sit amet</span>. <span>Nunc consectetur interdum turpis eget tincidunt</span>. <span>Donec at facilisis arcu</span>. <span>Suspendisse tempus purus vel purus sollicitudin</span> <span>pellentesque nec in arcu</span>. <span>Morbi purus lectus</span>, <span>tempus non sem vitae</span>, <span>feugiat elementum est</span>. <span>Vivamus laoreet nulla ut urna dignissim</span>, <span>elementum dapibus sem gravida</span>. <span>Fusce pretium porttitor libero</span>, <span>sed convallis mi laoreet eget</span>. <span>Ut aliquet neque velit</span>, <span>ac ultricies ligula volutpat vitae</span>. <span>In hac habitasse platea dictumst</span>.</p><p><span>Donec dictum condimentum fermentum</span>. <span>Ut aliquet sed urna vel rhoncus</span>. <span>Proin pharetra consectetur vestibulum</span>. <span>Sed sed arcu velit</span>. <span>Praesent blandit nulla ac risus faucibus</span> <span>ultricies</span>. <span>Nunc nec lacus enim</span>. <span>Duis porta venenatis faucibus</span>. <span>Nunc a lacus enim</span>.</p><p><span>Fusce efficitur molestie arcu dignissim consectetur</span>. <span>Proin molestie metus at risus porttitor</span>, <span>ac varius ante gravida</span>. <span>Nulla facilisi</span>. <span>Aenean mollis dolor ac massa porta</span> <span>efficitur</span>. <span>Etiam tellus massa</span>, <span>maximus bibendum ipsum sed</span>, <span>consequat rhoncus est</span>. <span>Nullam accumsan massa eget sagittis molestie</span>. <span>Quisque sed felis vitae nisl ultrices</span> <span>luctus</span>. <span>Aenean sed ex lacus</span>. <span>Donec id mi massa</span>. <span>Phasellus ut scelerisque nisl</span>. <span>Morbi quis fringilla quam</span>. <span>Aenean sit amet dui vitae justo</span> <span>pulvinar rhoncus ut eu magna</span>. <span>Mauris id leo nibh</span>. <span>Donec eget commodo elit</span>, <span>ut pharetra elit</span>. <span>Mauris dapibus</span>, <span>ipsum quis feugiat tristique</span>, <span>ipsum lectus consectetur velit</span>, <span>eu ullamcorper turpis orci in enim</span>. <span>Donec nec tortor risus</span>.</p><p><span>Nullam nec quam aliquet</span>, <span>dapibus odio sed</span>, <span>blandit mauris</span>. <span>Vivamus vel mollis lorem</span>. <span>Mauris posuere sem tortor</span>, <span>et elementum nisi ultricies id</span>. <span>Proin molestie accumsan odio sed pretium</span>. <span>Suspendisse potenti</span>. <span>Vivamus elementum nisi felis</span>, <span>sit amet ultricies leo pretium et</span>. <span>Mauris neque risus</span>, <span>commodo at nibh suscipit</span>, <span>egestas egestas magna</span>. <span>Quisque finibus mi at leo mattis</span> <span>porttitor</span>. <span>Pellentesque volutpat diam ac tortor molestie</span> <span>semper</span>. <span>Nulla venenatis et eros sed consectetur</span>.</p><p><span>Fusce quis ornare nisi</span>, <span>sit amet gravida elit</span>. <span>Vivamus mollis sem ac nisi congue</span>, <span>ut lacinia nunc dignissim</span>. <span>Cras at leo nec quam placerat</span> <span>aliquet</span>. <span>Sed ac cursus sapien</span>, <span>ut consequat nunc</span>. <span>In hac habitasse platea dictumst</span>. <span>Nulla non nunc id purus tincidunt</span> <span>vulputate id id risus</span>. <span>Praesent ac tristique urna</span>. <span>In tristique orci dictum felis sollicitudin</span>, <span>ut porta dolor sagittis</span>. <span>Donec fringilla ullamcorper maximus</span>. <span>Ut at tortor nec diam congue</span> <span>finibus</span>. <span>Fusce consequat finibus efficitur</span>. <span>Nulla ac magna vel ex posuere</span> <span>sodales quis id lorem</span>. <span>Pellentesque a justo fringilla purus mollis</span> <span>scelerisque</span>.</p><p><span>Aliquam at turpis sagittis est faucibus</span> <span>sodales</span>. <span>Praesent semper tellus vel dolor volutpat</span> <span>ullamcorper</span>. <span>Vestibulum interdum sagittis varius</span>. <span>Duis vitae dolor nec metus porttitor</span> <span>volutpat</span>. <span>Praesent ante arcu</span>, <span>scelerisque nec mollis quis</span>, <span>volutpat iaculis odio</span>. <span>Vestibulum condimentum justo dui</span>, <span>sed pulvinar felis dignissim et</span>. <span>Praesent sit amet sodales nulla</span>. <span>Nam iaculis vel magna sed dignissim</span>. <span>Quisque sed velit nisi</span>. <span>Fusce sed metus tortor</span>. <span>Ut vitae lacus luctus</span>, <span>placerat mi at</span>, <span>feugiat sem</span>.</p><p><span>In a aliquam arcu</span>. <span>In ut nisl efficitur</span>, <span>porta urna ac</span>, <span>posuere mi</span>. <span>Sed eu orci sem</span>. <span>Vestibulum hendrerit lacinia accumsan</span>. <span>Curabitur ac lectus varius</span>, <span>lacinia dolor sed</span>, <span>lacinia magna</span>. <span>Duis nec nisl purus</span>. <span>Ut ut elit quis nisi consequat</span> <span>pellentesque</span>. <span>Praesent id rhoncus felis</span>. <span>In tincidunt aliquam odio id aliquam</span>. <span>Nunc aliquet nulla in neque facilisis</span>, <span>vel dignissim diam sollicitudin</span>. <span>Phasellus dignissim fermentum purus</span>, <span>a consectetur libero pretium id</span>. <span>Aliquam vulputate nec velit nec posuere</span>. <span>Vivamus varius eu nulla vel efficitur</span>. <span>Ut sed sem venenatis</span>, <span>dictum ante at</span>, <span>blandit ex</span>. <span>Pellentesque dapibus hendrerit dui eget eleifend</span>.</p><p><span>Nulla molestie nulla posuere</span>, <span>facilisis nibh sed</span>, <span>accumsan nulla</span>. <span>Maecenas ut vulputate nibh</span>. <span>Vestibulum vel dictum turpis</span>, <span>ultrices venenatis metus</span>. <span>Donec urna justo</span>, <span>volutpat ut ultrices ut</span>, <span>ultrices in turpis</span>. <span>Curabitur vel feugiat ex</span>. <span>Ut maximus</span>, <span>libero pellentesque aliquam scelerisque</span>, <span>augue ante eleifend felis</span>, <span>in finibus sem dui eu ipsum</span>. <span>Etiam lacus nunc</span>, <span>sagittis sit amet vehicula et</span>, <span>tincidunt sit amet augue</span>. <span>Morbi purus risus</span>, <span>efficitur eu accumsan non</span>, <span>tristique eu nulla</span>. <span>Donec a ultricies nunc</span>, <span>sit amet dictum nibh</span>. <span>Praesent tempor elit sed efficitur dignissim</span>. <span>Phasellus dignissim</span>, <span>tortor quis porta aliquam</span>, <span>ante nisi aliquet ex</span>, <span>et venenatis enim diam nec tellus</span>. <span>Vivamus eget enim odio</span>. <span>Sed in eleifend ligula</span>. <span>Donec faucibus ornare pulvinar</span>. <span>Aliquam eget odio eu felis faucibus</span> <span>imperdiet eget non mi</span>. <span>Donec justo tellus</span>, <span>feugiat vel porttitor nec</span>, <span>rutrum vitae mauris</span>.</p><p><span>Vestibulum id dui ultrices</span>, <span>suscipit ex quis</span>, <span>pharetra tortor</span>. <span>Sed ac porta neque</span>. <span>Maecenas rhoncus dui nisl</span>, <span>ut tincidunt lorem sodales nec</span>. <span>Quisque dictum urna non odio efficitur</span>, <span>sed gravida nisl consequat</span>. <span>Mauris porta ipsum ac sagittis egestas</span>. <span>Aenean sed quam tempor</span>, <span>molestie elit non</span>, <span>mattis enim</span>. <span>Maecenas posuere nibh sit amet turpis</span> <span>finibus ullamcorper</span>. <span>Duis diam mi</span>, <span>finibus non justo non</span>, <span>varius auctor erat</span>. <span>Sed dapibus nulla quam</span>, <span>sed auctor nisl cursus aliquet</span>. <span>Vivamus semper</span>, <span>magna id mattis bibendum</span>, <span>tortor nulla commodo leo</span>, <span>id tristique arcu dui non lacus</span>.</p><p><span>Mauris dignissim est et turpis fermentum</span>, <span>in tristique justo elementum</span>. <span>Mauris sit amet erat libero</span>. <span>Maecenas sed congue risus</span>, <span>ac cursus quam</span>. <span>Proin orci velit</span>, <span>venenatis sed felis ut</span>, <span>auctor feugiat nibh</span>. <span>Ut tincidunt id metus eu consectetur</span>. <span>Nullam suscipit elementum elit</span>, <span>sit amet luctus ante congue id</span>. <span>Suspendisse consectetur at orci in cursus</span>. <span>Phasellus blandit sagittis leo</span>, <span>vel vehicula nisi malesuada a</span>. <span>Mauris posuere ornare nulla</span>, <span>ut porttitor nisl interdum eget</span>. <span>Sed facilisis augue sed nulla lobortis</span>, <span>eu volutpat elit congue</span>. <span>Ut condimentum</span>, <span>felis sit amet blandit laoreet</span>, <span>lectus lorem consequat turpis</span>, <span>eu venenatis dui risus et augue</span>. <span>In egestas sed felis ut ultricies</span>. <span>Aliquam euismod purus in egestas pellentesque</span>.</p><p><span>Pellentesque et tristique felis</span>. <span>Nulla facilisi</span>. <span>Maecenas eu tincidunt quam</span>. <span>Vestibulum ante ipsum primis in faucibus</span> <span>orci luctus et ultrices posuere cubilia</span> curae; <span>Nam in est sed arcu auctor</span> <span>tincidunt non nec odio</span>. <span>Praesent suscipit commodo ipsum at dignissim</span>. <span>Cras id commodo mauris</span>. <span>Vestibulum placerat ornare rhoncus</span>. <span>Ut fringilla tristique justo ac eleifend</span>. <span>Donec tincidunt velit ligula</span>, <span>ut dignissim ex consequat quis</span>. <span>Donec eget efficitur justo</span>. <span>Proin consequat</span>, <span>neque vehicula ultricies ultricies</span>, <span>leo enim egestas sem</span>, <span>et consequat purus ex tristique nulla</span>. <span>Nulla nec magna diam</span>. <span>Nullam sollicitudin malesuada laoreet</span>. <span>Maecenas vel lorem metus</span>. <span>Aliquam id mauris ac magna gravida</span> <span>auctor eget sit amet ligula</span>.</p><p><span>Sed semper nunc diam</span>, <span>id ultrices velit dignissim sit amet</span>. <span>Nunc pellentesque orci sodales</span>, <span>porta libero at</span>, <span>sagittis elit</span>. <span>Proin fermentum</span>, <span>mauris vel suscipit placerat</span>, <span>arcu dui dapibus nibh</span>, <span>venenatis consectetur lectus est in tellus</span>. <span>Suspendisse quis nisi congue</span>, <span>eleifend lorem in</span>, <span>tincidunt mauris</span>. <span>Nunc aliquet sit amet mi condimentum</span> <span>rutrum</span>. <span>Nam tempor augue vel diam ornare</span>, <span>eu vulputate urna fermentum</span>. <span>Class aptent taciti sociosqu ad litora</span> <span>torquent per conubia nostra</span>, <span>per inceptos himenaeos</span>. <span>Integer sit amet felis facilisis</span>, <span>laoreet risus vel</span>, <span>tristique elit</span>. <span>Ut eleifend porttitor lorem</span>, <span>blandit placerat orci dignissim in</span>.</p><p><span>In pretium ultricies nisl in placerat</span>. <span>Etiam nibh urna</span>, <span>dignissim quis consectetur in</span>, <span>faucibus in est</span>. <span>Ut porttitor eros elit</span>, <span>a blandit velit convallis nec</span>. <span>Cras at cursus velit</span>. <span>Aenean id condimentum magna</span>. <span>Pellentesque et nisi vehicula</span>, <span>ornare turpis eget</span>, <span>mollis enim</span>. <span>Sed facilisis</span>, <span>diam eget dapibus fermentum</span>, <span>est erat luctus purus</span>, <span>vel dignissim nulla tellus id quam</span>. <span>Fusce sed venenatis tortor</span>. <span>Ut consectetur sed ante non sodales</span>. <span>Praesent hendrerit pellentesque dolor non dignissim</span>. <span>Ut dui lorem</span>, <span>dignissim sed rutrum efficitur</span>, <span>cursus non velit</span>.</p><p><span>Nulla cursus lorem nisi</span>, <span>et vehicula risus blandit at</span>. <span>Suspendisse eget enim quis justo pulvinar</span> <span>fringilla</span>. <span>Sed rutrum consequat diam a finibus</span>. <span>Quisque elementum quam eros</span>. <span>Mauris facilisis mi eget tortor commodo</span>, <span>in semper odio egestas</span>. <span>Mauris ipsum purus</span>, <span>facilisis sed justo eget</span>, <span>dictum euismod elit</span>. <span>Suspendisse in congue orci</span>. <span>Etiam libero augue</span>, <span>faucibus ut augue non</span>, <span>rhoncus congue lectus</span>. <span>Aliquam nec diam pulvinar</span>, <span>viverra nisi id</span>, <span>posuere diam</span>. <span>Nam lacinia augue laoreet sem interdum</span>, <span>sit amet vestibulum lacus vestibulum</span>. <span>Donec laoreet pretium pellentesque</span>. <span>Donec sed ultrices nisl</span>.</p></div>