9

私は自分のサイトで A/B テストを行っていますが、ほとんどの作業はページの上部に読み込まれる JS ファイルで行います。このファイルは他のものがレンダリングされる前に読み込まれますが、jQuery が読み込まれた後は便利な場合があります。

H1 タグを変更する非常に単純な例を挙げると、通常はヘッドにスタイルを挿入して H1 の不透明度を 0 に設定し、次に DOMContentLoaded で H1 コンテンツを操作してから不透明度を 1 に設定します。この理由変更が行われる前に古いコンテンツのフラッシュを避けることです。オブジェクト全体を非表示にすると、見た目がより優雅になります。

MutationObserver API を調べ始めました。ユーザーが開くことができるオーバーレイダイアログボックスのコンテンツを変更するときにこれを使用したことがありますが、これは非常にクールなアプローチであると思われます。最初のレンダリングの前とDOMContentLoadedの前にドキュメントを解析して変更しますか?

このアプローチにより、H1 コンテンツを非表示にしてから変更してから表示することなく変更できます。

私は試みましたが、これまでのところ失敗しており、時代遅れになる突然変異イベントについて読んで、不可能なことをしようとしているのだろうかと思っています. しかし、私たち（私ではありません）が火星にロボットを置くことに成功したので、これを解決できることを願っています.

ページがロード/解析されているときに、MutationObservers を使用してオンザフライで HTML コンテンツを変更することは可能ですか?

助けてくれてありがとう。

よろしく、ニック

4

2 に答える 2

3

私は生計を立てるために A/B テストを行っており、MutationObservers をかなり頻繁に使用して良い結果を得ていますが、実際にはほとんどのサードパーティ プラットフォームが WYSIWYG (または場合によっては彼らのコード エディターでさえ)。50 ミリ秒のループでページの速度が低下したり、FOUC が発生したりすることはありません。

私は通常、次のような単純なパターンを使用します。

var poller = setInterval(function(){
  if(document.querySelector('#question-header') !== null) {
    clearInterval(poller);

    //Do something
  }
}, 50);

jQuery で document.querySelector を使用する場合と同様に、シズル セレクターを使用して任意の DOM 要素を取得できます。

実際、私の仕事ではこれを頻繁に行っているため、ビルド プロセスと、探しているものを正確に実行する Whenという関数を含むモジュール ライブラリがあります。その特定の関数は要素だけでなく jQuery もチェックしますが、jQuery に依存しないようにライブラリを変更するのは簡単です (クライアントのサイトのほとんどに jQuery があり、多くのものに使用しているため、jQuery に依存しています)。

サードパーティのテスト プラットフォームと JavaScript ライブラリについて言えば、実装に応じて、そこにある多くのプラットフォーム (Optimizely、Qubit、および Monetate など) には、コードを実行するとすぐに利用できる jQuery のバージョンがバンドルされています (場合によっては縮小されます)。 、サードパーティのプラットフォームを使用している場合は、これを調べる必要があります。

于 2016-09-07T00:14:03.780 に答える