10

これは一般的に、エクスペリエンスをクリーンに保ちながらプログレッシブ エンハンスメントを管理する方法ですが、どのくらい安全ですか? 競合状態の可能性はありますか?これは機能しませんか?

単純な抽象的なシナリオを想像してみてください。JavaScript をサポートしている場合は、別の方法で何かを表示したいと考えています。

<div id="test">original</div>
<script type="text/javascript">
    var t = document.getElementById('test');
    t.innerHTML = 'changed';
</script>

多くの人は、フレームワークを使用して domready イベントを待ち、そこで変更を行うべきだと主張するかもしれません..しかし、ドキュメントの終了前に 'test' 要素が既にレンダリングされ、css の準備が整い、 domready トリガー.. したがって、「オリジナル」の顕著なちらつきを引き起こします。

このコードは、競合状態の障害を起こしやすいですか? または、要素がスクリプトの前に存在する場合、要素が検出可能で変更可能であることを保証できますか?

前もって感謝します。

4

5 に答える 5

5

できますが、それを行うには問題があります。

まず、IE で閉じられていないノード (たとえば、JS の下にあるはずのクローズ タグの前の BODY) を操作しようとすると、IE の "OPERATION ABORTED" エラーが発生し、空白のページが表示されます。ノードの操作には、ノードの追加、ノードの移動などが含まれます。

他のブラウザでは動作は定義されていませんが、通常は期待どおりに動作します。主な問題は、ページが進化するにつれて、ページの読み込み/解析/実行が異なる可能性があることです。これにより、参照される要素が実際に作成されて DOM 操作に使用できるようになるとブラウザーが定義する前に、一部のスクリプトが実行される場合があります。

ユーザーが知覚するパフォーマンス (つまり、機敏さ) を向上させようとしている場合。この方法を避けて、ページの軽量化を検討することを強くお勧めします。開始するには、Yahoo の YSlow/Google の Page Performance Firebug を使用できます。

Google のページ速度

ヤフーのYSlow

于 2009-08-03T15:22:15.407 に答える
3

完全に読み込まれる前に DOM を操作することはできますが、危険を伴う可能性があります。明らかに、操作しようとしている DOM の一部がまだ実際に存在することを保証できないため、コードが断続的に失敗する可能性があります。

于 2009-08-03T15:06:30.340 に答える
1

スクリプト ブロックの前にあるノード (つまり、ノードの終了タグがスクリプトの開始タグの前にある) のみを変更する限り、問題は発生しません。

操作が成功することを確認したい場合は、コードをtry...catchブロックでラップしsetTimeout()、失敗時に再度呼び出します。

于 2009-08-03T15:29:20.683 に答える
0

Viajeros.com では、8 ～ 9 か月前からローディング インジケーターが機能しており、今のところ問題はありません。次のようになります。

<body>

<script type="text/javascript">
    try {
        document.write('<div id="cargando"><p>Cargando...<\/p><\/div>');
        document.getElementById("cargando").style.display = "block";
    } catch(E) {};
</script>
于 2009-08-03T16:27:04.223 に答える
-1

DOM にアクセスすると、IE 5 および Navigator 4 で時期尚早に例外がスローされます。

于 2012-06-22T07:33:51.657 に答える