問題タブ [labjs]

動的スクリプト読み込みを使用して、最初のページ読み込みの時間を短縮します。スクリプトで定義された関数とオブジェクトに確実にアクセスできるようにするには、スクリプトが完全に読み込まれていることを確認する必要があります。

私はこの目的のために独自の Javascript ライブラリを開発したため、さまざまなライブラリでどのように行われているかを調べて、このテーマについてかなり多くの調査を行いました。この問題に関する議論の中で、LABjsの作成者である Kyle Simpson 氏は次のように述べています。

LABjs (および他の多くのローダー) は、すべてのスクリプト要素に「onload」と「onreadystatechange」の両方を設定し、一部のブラウザーが一方を起動し、一部のブラウザーが他方を起動することを認識しています...

この例は、この記事の執筆時点での jQuery の現在のバージョンである v1.3.2 にあります。

これは最先端の技術ですが、Opera 9.64 の奇妙な動作を分析しているときに、この手法を使用すると、onload コールバックがあまりにも早く起動されたという結論に達しました。

この質問への回答として私自身の調査結果を投稿し、コミュニティからさらなる証拠とフィードバックを収集したいと思います.

次のタイプの JavaScript ファイルを非同期的にロードするクリーンな方法を探しています。読み込まれている「コア」js ファイルに依存するファイル、およびその他の無関係な js ファイルの数。どうすればよいか、いくつかのアイデアがありますが、最善の方法が何であるかはわかりません。ドキュメント本文にスクリプトをロードすることは避けたいです。

たとえば、次の 4 つの JavaScript ファイルを非同期でロードし、適切な名前を付けます。

しかし、カラープラグインの前に jQuery がロードされることが保証されていないため、これは機能しません...

jquery と color プラグインを非同期でロードすることはほとんど不可能ですか? (カラー プラグインでは、jQuery を最初にロードする必要があるためです。)

私が最初に検討した方法は、カラー プラグイン スクリプトと jQuery ソースを 1 つのファイルに結合することです。

それから私が持っていた別のアイデアは、次のようにカラープラグインをロードすることでした:

これについてどうするかについて考えている人はいますか？ありがとう！

プロジェクトにLABjsを組み込み始めたいのですが、条件付きでスクリプトをロードする方法があるかどうかを知りたいです。たとえば、次のようになります。

私はこれを試していませんが、うまくいかないと確信しています。これを行うためのよりエレガントな方法はありますか？

ありがとう

次に例を示します：http：//ci.elfster.com/core/login.aspx

Firebugのネットタブを見ると、スクリプトにはまだかなりのブロック期間があることがわかります。

LABjsを使用してブロックせずに10個のスクリプトを並行してダウンロードすることを示す実用的な例はありますか？

ありがとう！

labjsを使用してスクリプトをロードしています。ブログの最新の投稿をRSSフィードのHTMLで表示するfeedburnerのスクリプトを入手しました。feedburnerのコードは正常に機能し、すべての投稿をhtmlで表示します。

labjsを使用して同じスクリプトを読み込もうとしていますが、何も表示されません。これが私のコードです：

私が間違っているところに何か提案はありますか？

質問は、http://labjs.comに関するものです。これは、ノンブロッキング JavaScript の読み込みと依存関係の管理のための優れたライブラリです。

私はドキュメントを読みましたが、疲れすぎているか何かに違いありません.DOM Readyイベントに関するものは何も見つかりませんでした. スクリプトは DOM の準備が整った後に実行されますか?

おそらく私がそうするなら：

安全でしょうか？または、ある種の$(function() {})などを使用する必要がありますか？

すぐに使えるMagentoには、すでに面倒な読み込み時間に役立た​​ない5ダース以上のJavaScriptライブラリが付属しています。非同期でロードできるように、head.jsやlabjsなどのスクリプトローダーをMagentoで正常に使用できる人はいますか？私は試してきましたが、動作させることができません。

ライブラリがロードされる前に、ページ上のインラインスクリプトが起動しているように見えます。head.jsには、実行するスクリプトを指示するhead.readyのような関数があることは知っていますが、インラインスクリプトが非常に多いため、サイト全体のすべてのオカレンスにこれを追加するのは実用的ではありません。

新しいサイトに LABjs を実装しようとしています。スクリプトをまったくロードしていないように見えることを除いて、実装は非常に簡単です。Firebug でサイトを調べると、JS ファイルにアクセスできないというエラーが表示されます。

これらの JS ファイルのパスは正しいはずです。なぜなら、それらを LABjs の形式から通常のスクリプト タグにコピーするとすぐに正常に読み込まれるからです。

なぜこれが機能しないのか、かなり不思議です。助けてください！

コードの抜粋:

現在、さまざまな非同期リソースローダーをテストして、どれを使用したいかを確認しています。現在、Curlは「<strong>Promise は既に完了しています」というエラーをスローしており、ドキュメントには「これは決して起こらないはずです」と書かれています。

ロードされる各ファイル内で「define」を使用する必要があると「思います」（そうではないことを願っています）。さらに、彼らのドキュメントによると、Curl は AMD 以外の JavaScript ファイルで動作する可能性があります。しかし...私はAMDを初めて使用し、Curlは私がテストしている他のものよりもはるかに高速であるため...これをよりよく理解するために時間を割きたいと思います。

最後に...

FireBug はエラーを表示しますが、すべてのファイルはまだ非同期にロードされています! しかし、エラーがあるため...コードの ' then ' 部分が呼び出されることはありません。

だから私の質問は：

• 「定義」に含まれるすべての JavaScript ファイル オブジェクトを更新する必要がありますか? （...そうではないことを願っています）
• 構文的に他に問題はありますか?

ヘッドのコードは次のようになります。

繰り返しますが...AMDスタイルのコードの経験不足が原因だと確信していますが、それでも助けが必要です...だから、どんなことでも大歓迎です。