javascript - ページ読み込みイベントにおける自己呼び出し関数の順序 - javascript/html

Question

ページ読み込みのイベントの順序に関して、自己呼び出し js 関数が発生する順序を調べています。私はこれに対する答えを求めてグーグルで検索してきましたが、決定的なものは見つかりませんでした。

これが実際に適用されるものについては、内側の要素の 1 つの高さに基づいて外側の要素の高さを調整しています (テキストの長さと画面の幅によって異なります)。

    var text_elem = document.getElementById('text_elem');
    var textElemHeight = text_elem.offsetHeight;
    var newBkgdHeight = 96 + textElemHeight;
    document.getElementById('background').style.height = newBkgdHeight + "px";

現在、このブロックは、onload イベントではなく、自己呼び出し関数で実行されています。これは、onload イベントを使用すると、ページが読み込まれてから 1 秒または 2 秒後に高さが調整されるという奇妙な効果があるためですが、それを確認したかっただけです。自己呼び出し関数の使用は安全であり、HTML DOM が読み込まれる前にその関数内のコードが実行される可能性はありません。

編集：

注記として、これは自己呼び出し関数または IIFE を使用して適切に機能しています。安全であり、一貫して機能することを確認し、同僚にこれをより適切に説明できるようにしたいだけです。

この状況に関連するコードは次のとおりです。

<style type="text/css">
    #background {
        height: 150px;
    }
</style>
......
......
<div id="background">
   <div id="text_elem">
      ${text loaded from somewhere else}
   </div>
</div>
......
......
<script>
(function() {
    var text_elem = document.getElementById('text_elem');
    var textElemHeight = text_elem.offsetHeight;
    var newBkgdHeight = 96 + textElemHeight;
    document.getElementById('background').style.height = newBkgdHeight + "px";
})();
</script>