Javascript 如何优化&；可视化网站优化器处理可视化DOM编辑？

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

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

---

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

我的名字是皮特·库曼，我是Optimizely的联合创始人之一，因此我可以为我们的工作方式发言。假设您要在上创建一个实验

您可以（这是可选的）首先将您的Optimizely帐户片段添加到该页面，该页面如下所示，并且永不更改：

Optimizely编辑器在iframe中加载，并使用window.postMessage与页面通信。只有当页面上已经有类似上面的代码片段时，这才有效。如果不是这样，编辑器将在等待来自iframe页面的消息时超时，并将通过一个实际将代码段插入页面的代理再次加载该消息。此加载过程允许编辑器处理。包含帐户代码段b。不包含帐户代码段或c。坐在防火墙后面（c.需要代码段）

此时，我们的用户可以对页面进行更改，如修改文本、交换图像或移动元素。使用编辑器所做的每个更改都被编码为一行JavaScript，如下所示：

$j（“img#hplogo”）.css（{“宽度”：254，“高度”：112}）

|uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu124;

因此，您可以将页面的“变体”视为一组JavaScript语句，当在该页面上执行时，这些语句会导致出现所需的变体。如果您感到好奇，您可以通过单击Optimizely编辑器右下角的“edit code”（编辑代码）直接查看和编辑此代码

现在，当您将帐户代码段添加到此页面并开始实验时，帐户代码段指向的JS文件将自动阻止每个传入的访问者，然后在页面加载时执行相应的JavaScript

在页面加载过程中，有更多的逻辑用于阻止访问者并尽快执行这些更改，但这应该作为一个基本概述

---

Pete

那么如何优化处理页面上已经存在的脚本呢？添加一段代码并添加修改DOM元素的jQuery语句，并不意味着该页面上没有其他代码没有修改、没有修改，将来也不会修改，即a/B测试用户现在正在修改的元素。那么，代码如何优化处理这些竞争条件呢？此外，如何从“编辑模式”切换到“交互模式”工作？换句话说，Optimizely的“snippet”代码如何知道哪些事件要“关闭”，哪些事件要“打开”，反之亦然？它们可能使用了类似于

（函数（$，…）{…}）（customjQuery，…）的闭包

以确保它不会干扰。美元符号也只能起作用，他们已经创建了自己的“jQuery”，它要轻得多，因此页面加载时间不会像jQuery那样长。