KARTE Blocksではいくつかの技術的な工夫によって、違和感を与えない自然なタイミングでのページコンテンツの更新を実現しています。
ここでは、KARTE Blocksで設定した「置き換えブロック」によるページコンテンツ更新がどのタイミングで実行されるのかについて、仕様をご説明します。
ページ読み込み時の同期的なコンテンツ更新
Blocksタグ(builder.js
)では、同期的なタグの読み込み方式を採用しています。
これによって、既存のページコンテンツの描画とほぼ同じタイミングで「置き換えブロック」によるコンテンツ更新が実行されるようになります。
同期処理と非同期処理の違い
同期処理をするタグと非同期処理をするタグの違いは、次の通りです。
- 「同期タグ」を利用したページコンテンツの更新
- ページ読み込み完了前にタグ内の処理が実行されるため、画面のチラつきが発生しにくい
- 「非同期タグ」を利用したページコンテンツの更新
- ページ読み込み完了後にタグ内の処理が実行されるため、画面のチラつきが発生する
同期処理によるリスク
一方、同期的にタグを読み込むことにより、サイト自体のレンダリングに影響を与える可能性があります。
詳しくは、下記の記事をご覧ください。
KARTE Blocksをご利用の際のリスクと対応策 | KARTEサポートサイト
ページ読み込み後にDOMが変更された場合のコンテンツ更新
Blocksタグ(builder.js
)では、ページ読み込み後のDOMの変更を監視し、DOM変更される度に「置き換えブロック」によるページコンテンツの更新が実行される、という仕様になっています。
これにより、SPAサイトなどページ読み込み後にDOMが変更されるようなサイトでも、「置き換えブロック」によるページコンテンツの更新がルール通りに実行されるようになっています。
DOM変更時に「置き換えブロック」で更新される対象の要素は?
ページ読み込み時と同様、ページ読み込み後のDOM更新によって新たに追加された要素についても、ブロックエリアで指定したCSSセレクタに合致する要素があれば「置き換えブロック」によって置き換えられます。
DOM変更の度にコンテンツが更新されることによるリスク
前述のように、ブロックエリアで指定したCSSセレクタに合致する要素については、ページ読み込み時だけではなく、ページ読み込み後のDOM変更時にも「置き換えブロック」により置き換えられます。
そのため、CSSセレクタの指定の仕方によっては、たまたまページ読み込み後のDOM変更によって追加された要素に合致してしまい、その部分が意図せず更新されてしまう可能性があります。
上記を踏まえ、本番配信前には「段階的な配信による検証」によって、十分に検証をしてください。