デベロッパーツールでブレークポイントを張ると実行結果が異なる

質問失礼致します。

現在Chromeのデベロッパーツールを使って開発を行っているのですが、
実装しているjavascriptファイル内にブレークポイントを張って実行を止める→最後まで走らせた場合と、
ブレークポイントは張らずに実行した場合、実行結果が異なる場合があります。

javascriptで行っている処理は、抜粋すると以下の通りです。

javascript
1var table = document.getElementById('table');
2window.document.write('<html>' + table.innerHTML + '</html>');
3
4var height = window.document.getElementById('header').offsetHeight;
5var rowHeight = (window.document.getElementsByClassName('Row'))[1].offsetHeight;
6
7window.focus();

上記4、5行目の、テーブルのヘッダーと行の高さを取得している場所ですが、
ここがブレークポイントで実行を止めるか止めないかにより、数値が大幅に変わります。
（期待する数値が取得できるのは、ブレークポイントで実行を止めた場合です）

処理を変えているわけではないのに、ブレークポイントを張らないことで取得する場所が変わってしまうのか…正直見当がつきません。
ぜひお知恵をお借りしたく思います。何卒宜しくお願い致します。

x_x

2018/12/06 05:32 編集

本当にこのコードで動いていますか？　変数 table は取得した Element を指していると思われるので、文字列にしてしまっては意味がないように見えます。

turutontanchan

2018/12/06 05:38

コメントありがとうございます。申し訳ありません、質問用に抜粋して手打ちで所々変更したため、おかしなコードになっておりました。本当はelement(table）からinnerHTMLで文字列を取得しております。

x_x

2018/12/06 05:43

提示コードは一連(同一function内)の処理ですか？　再現しないので再現可能なコードにしてもらえればと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

このコードは何時走らせていますか？
画面上のDOMツリー構造はささっと組み上がるのですが、実際に描画されるそれぞれの要素はCSSの適用やら画像ファイルの読み込みやらで時間がかかります。

DOMContentLoadedイベントとloadイベントの違い[タイミング] - 思考の葉

もし質問文のコードがbodyの閉じタグの直前に書かれているのであれば、
ほぼdocument.addEventListener('DOMContentLoaded', fn)のタイミングとほぼ同様です。
しっかり遅延させたいならloadの方のイベントを使ってみてください。

投稿2018/12/06 05:19

miyabi-sun

総合スコア21158

turutontanchan

2018/12/14 05:22

ご回答ありがとうございます。 loadイベントでは結果が変わらなかったのですが、setTimeoutを使用したところ期待通りの結果が得られました。おっしゃる通り読み込みや描画の差により、結果がちぐはぐになっていたようです。

miyabi-sun

2018/12/14 09:26

うーん、困りましたね。そう言えばパフォーマンス関係の書籍で画像サイズが分かるなら `<img src="hoge.jpg" style="width: 500px; height: 250px;">`みたいに縦横幅を埋めておくとレイアウトがガチャガチャならないで済むよみたいな事が書いてありましたね。画像の大きさが予め分かるならそういった対策が出来ますし、もし無理ならload系のイベントではなく、scrollに仕込んで都度計算等を検討してみてください。

行動規範の内容に同意します