9

ユーザーがaddthisウィジェットを利用できるようにしたいのですが、ページができるだけ早く読み込まれるように遅延読み込みしたいと考えています。ただし、スクリプト タグを使用してから、遅延読み込みメソッドを使用して試してみたところ、スクリプト タグを介してのみ機能するように見えます。難読化されたコードでは、DOMContentLoaded イベント (少なくとも Firefox の場合) に依存しているように見えるものがあります。

DOMContentLoaded イベントがすでに発生しているため、ウィジェットは正しくレンダリングされません。何をすべきか？

スクリプト タグを使用することもできます (遅い)... または、(クロス ブラウザーの方法で) DOMContentLoaded (または同等の) イベントを発生させることはできますか? (jQuery のように) コンテンツ準備完了イベントの複数のテストがあり、複数のシミュレートされたイベントが発生する必要があると考えているため、これは不可能かもしれないと感じています。

とはいえ、これは興味深い問題です。いくつかのウィジェットが、静的なスクリプト タグを介してそれらのものをインクルードしていると想定しているのを目にしたからです。速度を気にする開発者にとってより便利なコードを書いてくれればいいのですが、それまでは回避策はありますか? および/または私の仮定のいずれかが間違っていますか?

編集： 質問に対する最初の回答は私の問題の要点を逃しているように見えたので、状況を明確にしたかった.

これは特定の問題についてです。さらに別の遅延読み込みスクリプトを探したり、依存関係が読み込まれたスクリプトであるかどうかを確認したりしません。具体的には、この問題は

  1. あなたが制御できず、難読化されている場合とされていない場合がある外部ウィジェット
  2. 外部ウィジェットが必要になるまで、または少なくとも、他の遅延要素を含む他のすべてがロードされた後まで、外部ウィジェットのロードを遅らせる
  3. ウィジェットの作成方法の b/c は、既存の典型的な遅延読み込みパラダイムを排除します

難解ですが、いくつかのウィジェットで発生するのを見てきました.ウィジェット開発者は、ページの下部に別のスクリプトタグを追加するだけでよいと想定しています. この 500 ～ 1000 ミリ秒** を節約したいと考えていますが、Yahoo、Google、および Amazon による多数の調査により、ユーザー エクスペリエンスにとって重要であることが示されています。

**ハンマーヘッドと個人的な経験による私のテストは、これがこの場合の私の節約になることを示しています。

4

4 に答える 4

12

最も簡単な解決策は、addthis スクリプトをページに埋め込むときに、パラメーターdomreadyを 1 に設定することです。次に例を示します。

<script type="text/javascript" 
src="http://s7.addthis.com/js/250/addthis_widget.js#username=addthis&domready=1">
</script>

IE、Firefox、Chrome、および Safari でテストしましたが、すべて問題なく動作しました。addthis 構成パラメーターの詳細については、こちらを参照してください。

于 2010-06-15T04:11:24.883 に答える
8

このコードは問題を解決し、探していた読み込み時間を節約します。

現在のほとんどの js ライブラリが dom ロード イベントのテストを実装する方法についてのこの投稿を読んだ後。難読化されたコードに時間を費やしたところ、addthis が前述の doscroll メソッド、タイマー、およびさまざまなブラウザーの DOMContentLoaded イベントの組み合わせを使用していることを確認できました。いずれにせよ、DOMContentloaded イベントに依存するブラウザーのみが次のコードを必要とするためです。

if( document.createEvent ) {
 var evt = document.createEvent("MutationEvents"); 
 evt.initMutationEvent("DOMContentLoaded", true, true, document, "", "", "", 0); 
 document.dispatchEvent(evt);
}

残りは特定のプロパティの存在をテストするタイマーに依存します。静的スクリプト タグを使用するのではなく、この外部 JS コンテンツを遅延読み込みできるようにするために、この 1 つのケースに対応するだけで済みました。したがって、期待していた時間を節約できました。:)

于 2009-06-03T06:19:02.383 に答える
1

編集：目標が単に他のコンテンツを最初にロードすることである場合は<script>、ページの下部近くにタグを配置してみてください。それでもDOMContentLoadedをキャッチすることができ、前に来るコンテンツはスクリプトの前にロードされます。

オリジナル：

DOMContentLoadedでのロードに加えて、特定の変数がtrueに設定されている場合にロードさせることができます。例えば

var isDOMContentLoaded = false;

document.addEventListener("DOMContentLoaded",function() { isDOMContentLoaded = true; }, false);

次に、他のスクリプトファイルに追加します

if (isDOMContentLoaded) loadThisScript();

コメントに応じて編集します。

スクリプトをロードし、DOMContentLoadedリスナーが起動する関数を実行します。（どの関数が呼び出されているかわからない場合は、スクリプトを読んでください）。

例えば

var timerID;
var iteration=0;

function checkAndLoad() {
    if (typeof loadThisScript != "undefined") {
        clearInterval(timerID);
        loadThisScript();
    }
    iteration++;
    if (iteration > 59) clearInterval(timerID);
}

var extScript = document.createElement("script");
extScript.setAttribute("src",scriptSrcHere);
document.head.appendChild(extScript);

timerID = setInterval(checkAndLoad,1000);

上記は、1秒に1回、60秒間試行して、必要な機能が使用可能かどうかを確認し、使用可能な場合は実行します。

于 2009-06-03T04:06:52.083 に答える