Javascript 如何从技术角度优化A/B测试？

我试图使用谷歌分析和内容实验在我的网站上设置A/B测试，但我很难让它看起来天衣无缝

为了使用GoogleAPI，需要做一些事情。首先，我添加了一个脚本标记，以从Google加载cxApi，并指定一个实验id。在它加载Google文档后，建议在“加载”事件的窗口上放置一个侦听器，在此之后，您应该向Google请求希望显示的内容的变体，并给它一个回调。一旦选择了变体，您就可以使用javascript显示/隐藏相关内容

但问题是我在页面加载时得到了内容flash；例如，如果我正在A/B测试H2，我不想先看到原来的一个，然后再看到它很快被替换。有人有什么建议吗

到目前为止，我提出的最佳解决方案是添加一个样式标记来隐藏相关内容（例如，通过将文本颜色设置为透明，这样内容在屏幕上仍然占据相同的空间，并且不会导致回流）但我正在寻找一个更好的解决方案，如果有人能深入了解如何优化这一点，我会很感兴趣

---

Cheers

优化了CDN中的静态脚本，该脚本使用jQuery更改页面上的元素

Optimizely解决方案与Google内容实验的不同之处在于，Optimizely会指导用户在中设置代码片段，而通常Google Analytics JS是异步加载的。这意味着将在页面呈现之前下载并执行Optimizely脚本，特别是如果按照他们的建议，将代码段放在

的较高位置。如果遵循典型的方法，GA脚本将异步加载，并在加载页面的其余部分之后加载

Optmizely的文档进一步解释了：

我们鼓励这种特定放置的原因是，在加载网页时对其进行更改，从而优化工作。如果代码段添加到块的顶部，则脚本在加载页面所需的时间内可用，并且可以实时进行更改

如果将代码段添加到页面上的任何其他位置，它仍然可以工作。问题是，如果页面在执行Optimizely脚本之前已经加载了很多用户看到的内容，那么您可能会遇到这样的情况：页面的原始版本被加载，然后被脚本转换为预期的变体。在大多数情况下，代码执行得太快，无法看到，但为了避免任何潜在问题，我们鼓励您尽早在执行路径中添加代码段

from:

下面的文章（截图）解释了如何优化与DOM的交互：

---

对不起，这个答案很模糊；我正在寻找一个关于DOM和DOMReady的更技术性的答案。“我已经试着把我的脚本放在标签的高位置，但仍然得到了内容flash，但他们似乎没有在他们的解决方案上。”DominicSantos从他们的文档中添加了另一段引语。如果您遵循他们的示例，那么Optimizely脚本将同步加载，并阻止DOM解析和呈现，因此不应出现内容闪烁。你能发布一些HTML吗？这个答案有一个很好的起点（及其技术）：