記載のJSで何をしているか教えていただきたいです

Question

当方Shopifyストアを運営しております。
ページ表示速度の向上を外注に依頼しました。

コードレビューを行なっているのですが、
下記のコード（JS）の処理内容が理解できず困っております。

【該当コード】

const observer = new MutationObserver(e => {
    e.forEach(({
        addedNodes: e
    }) => {
        e.forEach(e => {
            1 === e.nodeType && "SCRIPT" === e.tagName && (e.innerHTML.includes("asyncLoad") && 
            (e.innerHTML = e.innerHTML.replace("if(window.attachEvent)", "document.addEventListener('asyncLazyLoad',function(event){asyncLoad();});if(window.attachEvent)").replaceAll(", asyncLoad", ", function(){}")), e.innerHTML.includes("PreviewBarInjector") && (e.innerHTML = e.innerHTML.replace("DOMContentLoaded", "asyncLazyLoad")), (e.className == 'analytics') && (e.type = 'text/lazyload'), (e.src.includes("assets/storefront/features") || e.src.includes("assets/shopify_pay") || e.src.includes("connect.facebook.net")) && (e.setAttribute("data-src", e.src), e.removeAttribute("src")))
        })
    })
});
observer.observe(document.documentElement, {
    childList: !0,
    subtree: !0
})

JSへの理解が浅いのですが、HTMLタグ等を削除しているようには思っています。
小細工のような悪さをしていないかだけでも構いませんので処理の概要をご教示いただけませんでしょうか？

Comments

[CHERRY]

外注先にコードの内容を説明してもらうことはできないのでしょうか。

[gorizawa1129]

コメント有難うございます。
そうしたいのですが海外のランサーズのようなマッチングを使用しておりまして、日本の常識が通用せず処理内容を教示いただけない状況です。
ラチがあかないので有識者様からのご意見をいただきたく質問させていただきました。

[yambejp]

むしろ何がわからないのでしょうか？
MutationObserverはDOMの監視ですし、子要素の追加・削除・編集時にチェックをしているだけで一つ一つの項目は単純な作業ですね。
ご自身の解釈をあげて、それに対する助言をもとめるなら回答も付きやすいでしょう

[miyabi_pudding]

HTMLのソースコードも記載いただいたほうがよいかと。

Answer 1

見やすいように整形するとこんな感じでしょうか。
小細工のような悪さはしていないようには見えますが、だいぶhackyな事はやってるのであまり良くなさそうですね。

const observer = new MutationObserver(event => {
  event.forEach(({ addedNodes }) => {
    addedNodes.forEach(node => {
      // Node.ELEMENT_NODE以外の場合は何もせずreturn
      if (node.nodeType !== 1) return;
      // scriptタグ以外の場合は何もせずreturn
      if (node.tagName !== 'SCRIPT') return;

      // scriptタグ内にasyncLoadが含まれいるか判定する
      if (node.innerHTML.includes('asyncLoad')) {
        // scriptタグ内の処理を書き換える
        node.innerHTML = node.innerHTML
          .replace("if(window.attachEvent)", "document.addEventListener('asyncLazyLoad',function(event){asyncLoad();});if(window.attachEvent)")
          .replaceAll(", asyncLoad", ", function(){}")
      }

      // scriptタグ内にPreviewBarInjectorが含まれいるか判定する
      if (node.innerHTML.includes('PreviewBarInjector')) {
        // scriptタグ内の処理を書き換える
        node.innerHTML = node.innerHTML.replace("DOMContentLoaded", "asyncLazyLoad")
      }

      // classNameがanalyticsかどうか判定する
      if (node.className === 'analytics') {
        // scriptタグのtypeを書き換える
        node.type = 'text/lazyload';
      }

      // 特定のsrcかどうか判定する
      if (node.src.includes('assets/storefront/features') || node.src.includes('assets/shopify_pay') || node.src.includes('connect.facebook.net')) {
        // srcを削除し、data-srcに置き換える
        node.setAttribute('data-src', node.src);
        node.removeAttribute('src');
      }
    })
  })
});

observer.observe(document.documentElement, {
  childList: true, // document.documentElementの子要素の変更を検知
  subtree: true, // document.documentElementのすべての子孫要素の変更を検知
});