準備完了状態の前にdomを操作しても大丈夫ですか？

StackOverflow https://stackoverflow.com/questions/1222849

質問

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

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

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

多くの場合、フレームワークを使用してdomreadyイベントを待機し、そこで変更を行う必要があると主張する場合があります。ただし、ドキュメントおよびCSSの終了前に「test」要素がすでにレンダリングされている場合は大幅な遅延があります準備が整い、ドメドリートリガーが発生します。したがって、「オリジナル」の顕著なフリッカーが発生します。

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

事前に感謝します。

役に立ちましたか？

解決

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

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

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

ユーザーに認識されるパフォーマンスを向上させようとしている場合（つまり、速さ）。このパスを避けて、ページの軽量化を検討することを強くお勧めします。 YahooのYSlow / GoogleのページパフォーマンスFirebugを使用して、開始を支援できます。

Googleのページ速度

YahooのYSlow

他のヒント

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

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

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

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>

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top