配信前のプレビューと本番配信では、配信前プレビューの方が本番配信よりもブロック更新のタイミングが遅くなります。具体的なタイミングの違いは下記になります。
- 配信前プレビュー：
loadイベント後にブロック更新が行われる - 本番配信：
DOMContentLoadedイベント発生直後にブロック更新が行われるload：HTMLのレンダリングに必要なリソース（画像、jsファイルなど）がすべて読み込まれた時に発生するイベントDOMContentLoaded：HTMLのすべてのDOM要素が読み込まれた時に発生するイベント
配信前プレビューの方がブロック更新が遅くなる理由
本番配信時は<head>内に設置されたBlocksタグから設定情報を同期的に読み込むことで書き換えを実行します。しかし、配信前プレビューの場合はサイトへ配信前のため、設定情報はBlocksタグには書き込まれず、専用のjsファイル（pre-builder.js）が新たに読み込まれることによってブロックの更新が行われます。そのため、処理順番に差分が発生します。
本仕様による影響
Blocksでの設定内容によっては本番配信時と挙動が異なる、配信前プレビューが動かない、といったことが発生する場合がございます。
発生するケース例
- Blocksで更新後のブロックに対して、サイト側のJavaScriptを実行して何かを行いたい場合
- 本番配信時ではBlocksでのブロック更新→サイト側のJavaScript実行という順番で処理されますが、配信前プレビューの場合、サイト側のJavaScript実行タイミングにもよりますが、サイト側のJavaScript実行→Blocksでのブロック更新という順番で処理がされます。そのため、処理順番がずれることによって配信前プレビューした際に表示崩れが起きます。
上記を回避するために、実際にサイトにブロックを配信する場合は、テスト配信を行っていただくことを推奨しています。
#karte_blocks