Javascriptブラウザは順番にコードを実行します

Question

非常に大きなオブジェクトがあり、非常に大きなJSON文字列になります。

私は、クリックリスナー

randomElement.addEventListener("click", function(){ 
    console.log("should log immediately"); 
    var content = encodeURIComponent(JSON.stringify(veryLargeJson)); 
}); 

にveryLargeJsonは、イベントリスナーのスコープ外で更新/宣言されています。

要素をクリックしたときの理由は何ですか？ブラウザのスピナーは、veryLargeJsonを文字列化してエンコードしようとしますが、コンソールにログインする前に発生します。

ここでは何が起こっていますか？なぜブラウザはJSON.stringifyを順不同で実行しているのですか？

私が最初に考えたのは、イベントリスナのクロージャやクロージャの一般的な使い方は、変数宣言が最初に実行されるか、他のものが発生する前にすべての変数が解決されるということです。たとえば、非常に大きなjsonがクリックを生成した範囲外のスコープで宣言された場合、すぐにブラウザは非常に大きなjsonが何であるかを解決しようとしますが、jsonが非常に大きいのでフリーズします私のコンソールログを出力します。それ以降は、それをリスナーで宣言されたローカル変数iに割り当てます。

これは何が起こっているのですか？

更新--------------------------------------------- ----------------------

私は文脈のために上記の質問を残しました。

この問題は、イベントリスナクロージャにformDataオブジェクトがあり、非常に大きなjson文字列をformDataオブジェクトに追加してajax要求が行われている場合に特に発生します。

私の質問は今では、クロージャがxhttp.sendパラメータを順不同で評価するのはなぜですか？

randomElement.addEventListener("click", function(){ 
    console.log("should log immediately"); 
    var content = encodeURIComponent(JSON.stringify(veryLargeJson)); 
    var formData = new FormData(); 
    formData.append("whatever", content); 
    var xhttp = new XMLHttpRequest(); 
    xhttp.open("POST", "https://randomEndpoint", true); 
    xhttp.setRequestHeader("cache-control", "no-cache"); 
    xhttp.send(formData); 
}); 

Answer 1

ブラウザは「順不同」の処理を行いません。 Webワーカーがゲームに参加していない限り、すべての処理はイベントハンドラとシングルスレッドで行われます。

が表示され、が表示され、stringifyコールの後にコンソールログが表示されますが、それでも前に実行されたことがあります。

ブラウザのGUIイベントループに依存し、通常はGUIの更新はキューに入れられたイベントであるため、クリックイベントが処理を完了するまで待つ必要があります（ネストされたイベントループを開始しない限りJavascriptではalertと友だちのみが発生します）。

console.log(+ new Date())をstringifyの前後に追加すると、操作に長時間かかることがわかります。