Optimizely & Visual Website Optimizer 如何处理可视化 DOM 编辑？答案

【问题标题】：How does Optimizely & Visual Website Optimizer handle visual DOM editing?Optimizely & Visual Website Optimizer 如何处理可视化 DOM 编辑？
【发布时间】：2011-03-07 20:16:46
【问题描述】：

Optimizely 和 Visual Website Optimizer 是两个很酷的网站，允许用户执行简单的 A/B 测试。

他们做的最酷的事情之一是可视化 DOM 编辑。您可以直观地操作网页并离线保存更改。然后通过 JS 加载在随机访问者页面查看期间应用更改。

可视化编辑器是如何工作的？

【问题讨论】：

标签： javascript dom wysiwyg optimizely

【解决方案1】：

我的名字是 Pete Koomen，我是 Optimizely 的联合创始人之一，所以我可以谈谈我们这边的工作方式。假设您想在 http://www.mypage.com 上创建一个实验。

您可以（这是可选的）首先将您的 Optimizely 帐户 sn-p 添加到该页面，该页面看起来像这样并且永远不会更改：

<script src="//cdn.optimizely.com/js/XXXXXX.js"></script>
Optimizely 编辑器在 iframe 中加载 http://www.mypage.com 并使用 window.postMessage 与页面通信。这只有在该页面已经有一个像上面那样的sn-p时才有效。如果不是这种情况，编辑器将在等待来自 iframe 页面的消息时超时，并将通过实际将 sn-p 插入页面的代理再次加载它。此加载过程允许编辑器使用 a.包含一个帐户 sn-p b。不包含帐户 sn-p，或 c。位于防火墙后面（c. 需要 sn-p。）
此时我们的用户可以对页面进行更改，例如修改文本、替换图像或移动元素。使用编辑器进行的每个更改都被编码为一行 JavaScript，如下所示：

$j("img#hplogo").css({"width":254, "height":112});
|__IDENTIFIER__||____________ACTION______________|
因此，您可以将页面的“变体”视为一组 JavaScript 语句，当在该页面上执行时，会导致出现所需的变体。如果您好奇，您实际上可以通过单击 Optimizely 编辑器右下角的“编辑代码”直接查看和编辑此代码。
现在，当您将账户 sn-p 添加到此页面并开始实验后，您的账户 sn-p 指向的 JS 文件将自动存储每个传入的访问者，然后执行相应的 JavaScript在页面加载时。

在页面加载期间对访问者进行分桶并尽快执行这些更改还有很多逻辑，但这应该作为一个基本概述！

皮特

【讨论】：

那么 Optimizely 如何处理页面上已经存在的脚本呢？添加一个 sn-p 代码并添加修改 DOM 元素的 jQuery 语句，并不意味着该页面上没有其他代码没有修改，没有修改，将来也不会修改， A/B 测试用户现在正在修改的相同元素。那么 Optimizely 代码是如何处理这些竞争条件的呢？另外，如何从“编辑模式”切换到“交互模式”？换句话说，Optimizely 的“sn-p”代码如何知道哪些事件要“关闭”，哪些要“打开”，反之亦然？
他们可能正在使用像 (function ($, ...) { ... })(customjQuery, ...); 这样的闭包来确保它不会干扰。然后美元符号也只能工作，他们创建了自己的“jQuery”，它更轻，因此页面加载时间不会像使用 jQuery 那样长。