DOMのロードは、その後、スクリプト

から遮断されている次のコードを考えてみましょう：それは（！■は矩形は10秒後に登場している）DOMは、10秒間その荷重を延期することを私には大きな驚きであるDOMのロードは、その後、スクリプト

<head> 
<style> 
.box{ 
    background-color:red; 
    height:150px;  
    width:150px; 
} 
</style> 
</head> 
<body> 
    <div class="box"></div> 

    <script> 
    var start = new Date(); 
    while(true) { 
    var now = new Date(); 
    if (now-start > 10000) 
    break; 
    } 
    console.log('main thread finished'); 
    </script> 
</body>

を。最初に(<div class="box"></div>)が来るので、次のスクリプトを待っているのはなぜですか？合理的な説明はありますか？

はJavaScriptがシングルスレッド、それはあなたの小さなスクリプトの世話をすると同時に、DOMモデルの世話をすることはできませんを意味している、あなたは

出典

2016-02-19 Unknown developer

すみません。@Rayon;しかし、あなたの編集の後、スクリプトがDOMの後に来ることは明らかではありません！その場合、私の質問に意味はありません... –

このスニペットを実行すると、同じ結果が表示されます。スクリプトの配置はこの場合に何の違いもありません... – Rayon

それはあなたが身体か頭部のどちらに入れても、何の違いもありません。とにかく実行は中止されます。 –

それを単純化するためにありがとうございました。それは次々に起こります。

本当に包括的なexmplatantionはhereを見つけることができます。

ブロックされたUIの問題を回避するには、Web Workersについて知りたい場合があります。

出典

2016-02-19 08:15:01 Anton

もしそれが次々に進んでいくならば、ループが実行される前に要素が塗りつぶされるはずです。 – Rayon

@RayonDabre、まあ、私はそれは同時にできないことを意味しましたが、DOM処理がいつ始まるかはわかりません（おそらく、閉じた ''の後で、ブラウザ固有のものであれば驚かないでしょう）スクリプトが処理された後に開始されます。 – Anton

@ RayonDabre、とにかく、私の更新された答えを見てください、バックグラウンドでいくつかのものを処理するWebワーカーを使用することがあります。 – Anton

このスクリプトは、ページが完全に読み込まれてから起動するまで待機しません。これが10秒待つ理由です。これは、そのようなコードが通常window.onloadまたは$（document）.ready（）でラップされる理由です。非同期なしのため、エンジンが作品（シングルスレッド）任意のスクリプト実行ブロック道の

出典

2016-02-19 08:16:42

スクリプト以下のページで任意のプログレッシブレンダリング

出典

2016-02-19 08:30:34 Sagi

これは間違いです。一部のブラウザは他のリソースを並行してダウンロードしますが、このスクリプトを実行するまではこれらのリソースを実行または表示することはできません。 – jfriend00

これは、スクリプトとブラウザの互換性をどのように設定するかによって異なります。 – Sagi

とにかく、この例では外部のJSファイルがないので、この答えは無関係です。 – Anton

「スクリプトまたは同様、属性を延期インラインスクリプトとしてが取得され、すぐに実行されてから、ブラウザでページが解析され続けます（）。 - MDNから。

したがって、スクリプトは10秒間解析を停止します。ページのレンダリングについては言及しません。基本的にこれは、実行中のスクリプト内からの即時のhtml変更をサポートするために行われました。たとえば、スクリプトがdocument.write('More html')を呼び出す場合、解析に影響します。

ところで、スクリプトを実行すると、がすでに解析されているDOM構造にアクセスする。次の例を考えてみましょう。

<div class="box">Affected</div> 
 
<script> 
 
\t [].forEach.call(document.querySelectorAll('.box'), function(box){ 
 
    \t  box.innerText += '... modified'; 
 
    }); 
 
</script> 
 
<div class="box">Not</div>

出典

2016-02-19 09:40:05

しかし、彼が求める要素は、スクリプトの前であり、後ではありません。 – Qwertiy

標準ブラウザによると、スクリプトの実行前に、その要素をレンダリングすることができます。しかし、それは必ずしも必要ではありません。私はあなたのコードを4つのブラウザでチェックし、そのうちの1人だけがスクリプトの実行前に.boxを描画しました。それはOpera 12でした。他のすべてのブラウザ - Chrome、FF、IE11はありませんでした。

私が覚えているように、いつかクロムは、彼らが何かを最適化できると言いました。そして、インターネットの速度は、フルロードまで待つのに十分な大きさになったと思いました。

出典

2016-02-20 20:39:43 Qwertiy

DOMのロードは、その後、スクリプト

答えて

関連する問題