jquery dataメソッドの値とjs attrの値の違い

jquery dataメソッドの実行メカニズム:domを初めて検索し、attributesを使用してdomノード値を取得し、その値をキャッシュに保存します.2回目の操作の場合、domを先に見つけますが、今回の値はキャッシュから直接読み取り、domに対する操作が少なくなりました.
 
attr()メソッドは毎回domを操作するので,性能的にはもう少しで
 
$('a').Data('v')が取得した値は、ページが初めてロードされたキャッシュ値であり、その後どのように変更するかは、ページ上では変更されませんが、キャッシュ値が変化し、i/oリクエストに渡すことができます.
 
document.getElementsByTagName('a').attr('data-v')では、ページ応答イベントainがこの値を変更すると、常に動作しているdomなので、パフォーマンスが前者より低いため、ページ表示値も変更されます.
 
 
以下は盗図の原文です
コード展示地https://github.com/jquery/jquery/blob/master/src/data.js#L77-L165
 

      ，              $("#id").data("test"); (      ) 
   : jQuery      $("#id")   ，  、 
   :     data      ，     attributes         。 
   :        ，   jQuery            
       ，        undefined，   ，        json。 
 
         attr       ？ 
         $("#id").data("test");    ： 
   : jQuery      $("#id")   ，     。 
   :     data      ，  jQuery        
   :         
 
        ，  ，       attributes   ，        ？ 
     js   ，       var cache = {}; jQuery                     ，                、 
           dom    ，         dom       。 
 
  ，       attr       ，   <div id="id" data-test="hehe"></div> 
$("#id").data("test", "123");        data-test="hehe"
$("#id").attr("data-test", "123");       data-test="123"
 
             ，               ？   <div id="id" data-test="hehe"></div> 
$("#id").data("test", {str: "hehe"});    {str: "hehe"}       ，         data-test="hehe"
$("#id").attr("data-test", {str: "hehe"});       data-test="[object Object]"
           ，              。