管理闪烁

在尝试呈现个性化内容时,SDK必须确保不会出现闪烁。 闪烁,也称为FOOC(原始内容的Flash),是指在测试/个性化期间短暂显示原始内容之前出现替代内容时。 SDK会尝试将CSS样式应用于页面的元素,以确保这些元素在成功呈现个性化内容之前处于隐藏状态。

管理闪烁的方式取决于您是同步还是异步部署Web SDK。 检查部署alloy.js或标记加载器的<head>标记。 <script>标记中存在async属性可确定Web SDK是否异步加载。

<!-- This tag loads synchronously -->
<script src="https://assets.adobedtm.com/[...]/launch-example.min.js"></script>

<!-- This tag loads asynchronously -->
<script src="https://assets.adobedtm.com/[...]/launch-example.min.js" async></script>

<!-- This library loads synchronously -->
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js"></script>

<!-- This library loads asynchronously -->
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js" async></script>

管理同步部署的闪烁

同步闪烁管理分为三个阶段:

  1. 预隐藏
  2. 预处理
  3. 渲染

在​ 预隐藏阶段 ​期间,SDK使用prehidingStyle配置属性创建HTML样式标记并将其附加到DOM以确保隐藏页面的所需部分。 如果您不确定页面的哪些部分将个性化,建议将prehidingStyle设置为body { opacity: 0 !important }。 这可确保隐藏整个页面。 但是,这有一个缺点,即会导致Lighthouse、Web页面测试等工具报告的页面渲染性能不佳。 要获得最佳的页面渲染性能,建议将prehidingStyle设置为包含将个性化的页面部分的容器元素列表。

假设您有一个类似于下面的HTML页面,并且您知道只有barbazz容器元素永远是个性化的:

<html>
  <head>
  </head>
  <body>
    <div id="foo">
      Foo foo foo
    </div>

    <div id="bar">
      Bar bar bar
    </div>

    <div id="bazz">
      Bazz bazz bazz
    </div>
  </body>
</html>

prehidingStyle应设置为#bar, #bazz { opacity: 0 !important }之类的内容。

一旦SDK收到来自服务器的个性化内容,预处理阶段 ​即会启动。 在此阶段中,将预处理响应,确保隐藏必须包含个性化内容的元素。 隐藏这些元素后,将删除根据prehidingStyle配置选项创建的HTML样式标记,并显示HTML正文或隐藏的容器元素。

成功呈现所有个性化内容后,或者如果发生任何错误,呈现阶段 ​开始。 将显示所有以前隐藏的元素,以确保页面上没有被SDK隐藏的隐藏元素。

管理异步部署的闪烁

建议始终异步加载SDK以获取最佳页面渲染性能。 但是,这对个性化内容的呈现有一些影响。 异步加载SDK时,需要使用预隐藏代码片段。 必须在HTML页面中的SDK之前添加预隐藏代码片段。 以下是隐藏整个主体的示例代码片段:

<script>
  !function(e,a,n,t){
    if (a) return;
    var i=e.head;if(i){
    var o=e.createElement("style");
    o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),
    setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
    (document, document.location.href.indexOf("adobe_authoring_enabled") !== -1, "body { opacity: 0 !important }", 3000);
</script>

为了确保HTML正文或容器元素不会长时间隐藏,预隐藏代码片段使用计时器,默认情况下,该计时器会在3000毫秒后删除代码片段。 3000毫秒是最长等待时间。 如果更快地收到并处理了来自服务器的响应,则会尽快删除预隐藏HTML样式标记。

recommendation-more-help
ad108910-6329-42f1-aa1d-5920a2b13636