KARTE Blocksではいくつかの技術的な工夫によって、違和感を与えない自然なタイミングでのページコンテンツの更新を実現しています。

ここでは、KARTE Blocksで設定した「置き換えブロック」によるページコンテンツ更新がどのタイミングで実行されるのかについて、仕様をご説明します。

ページ読み込み時の同期的なコンテンツ更新

Blocksタグ（builder.js）では、同期的なタグの読み込み方式を採用しています。

これによって、既存のページコンテンツの描画とほぼ同じタイミングで「置き換えブロック」によるコンテンツ更新が実行されるようになります。

同期処理と非同期処理の違い

同期処理をするタグと非同期処理をするタグの違いは、次の通りです。

  • 「同期タグ」を利用したページコンテンツの更新
    • ページ読み込み完了前にタグ内の処理が実行されるため、画面のチラつきが発生しにくい
  • 「非同期タグ」を利用したページコンテンツの更新
    • ページ読み込み完了後にタグ内の処理が実行されるため、画面のチラつきが発生する

null

同期処理によるリスク

一方、同期的にタグを読み込むことにより、サイト自体のレンダリングに影響を与える可能性があります。
詳しくは、下記の記事をご覧ください。

KARTE Blocksをご利用の際のリスクと対応策 | KARTEサポートサイト

ページ読み込み後にDOMが変更された場合のコンテンツ更新

Blocksタグ（builder.js)では、ページ読み込み後のDOMの変更を監視し、DOM変更される度に「置き換えブロック」によるページコンテンツの更新が実行される、という仕様になっています。

これにより、SPAサイトなどページ読み込み後にDOMが変更されるようなサイトでも、「置き換えブロック」によるページコンテンツの更新がルール通りに実行されるようになっています。

DOM変更時に「置き換えブロック」で更新される対象の要素は？

ページ読み込み時と同様、ページ読み込み後のDOM更新によって新たに追加された要素についても、ブロックエリアで指定したCSSセレクタに合致する要素があれば「置き換えブロック」によって置き換えられます。

DOM変更の度にコンテンツが更新されることによるリスク

前述のように、ブロックエリアで指定したCSSセレクタに合致する要素については、ページ読み込み時だけではなく、ページ読み込み後のDOM変更時にも「置き換えブロック」により置き換えられます。

そのため、CSSセレクタの指定の仕方によっては、たまたまページ読み込み後のDOM変更によって追加された要素に合致してしまい、その部分が意図せず更新されてしまう可能性があります。

上記を踏まえ、本番配信前には「段階的な配信による検証」によって、十分に検証をしてください。