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

ここでは、KARTE Blocksで設定したブロックの更新がどのタイミングで実行されるのかについて、仕様を説明します。

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

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

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

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

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

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

null

同期処理によるリスク

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

ご利用の際のリスクと導入サイトへの影響について | KARTEサポートサイト

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

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

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

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

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

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

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

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

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