Rich-text Reply

Code Editor - Multiline code evaluates only when the DOM is ready

Sri 04-29-15
Accepted Solution

Code Editor - Multiline code evaluates only when the DOM is ready

[ Edited ]

It appears that code that spans multiple lines evaluates only when the DOM is ready.  For example:

 

$(selector).action(function () {

 // code

});

 

However, when we write the above as a single line as follows, the code evaluates as early as possible, which is the expected behavior:

 

$(selector).action(function () { // code });

 

Could someone please confirm if safe code should always be written without any line breaks? Is this a limitation of the Code Editor?

Sri
Level 2

adzeds 04-29-15
 

Re: Code Editor - Line-wrapped code evaluates only when the DOM is ready

I have to be honest, this is not something I have ever come across before.

I generally always use line breaks in my code and have never encountered this issue
David Shaw
Level 11
tomfuertes 04-29-15
 

Re: Code Editor - Line-wrapped code evaluates only when the DOM is ready

This is true! Optimizely was built to be performant when using the editor and one of the optimizations they made was to assume things written to look like a single line jquery selector could

0) does the line match a complete jquery selector / action regex
1) poll for the selector every 50ms to exist with length > 0
2) run the line in question and repeat.

If you think of these lines as a queue, anything that breaks that pattern, you'll end up forcing the whole queue to wait till domReady. While this might not be noticeable in singular experiments and/or pages with cached assets, if you have any landing page and/or concurrently running experiments (even 100% ones) on the same page you'll end up seeing some flicker.

That said, there are ways to mediate this! We've found developing functions as global variables and then passing them via .each are very helpful. Read the 2x articles below and post again if you have further questions!

1) Optimizely's Loop Docs (good high level): https://help.optimizely.com/hc/en-us/articles/200040335-How-Optimizely-Works-Snippet-order-of-execut...

2) Clearhead.me Polling Pattern (see the first 2x images): http://clearhead.me/post/114048700560/polling-patterns-in-optimizely-vs-monetate

-Tom | Director of Engineering @ Clearhead.me
____
- Tom Fuertes | CTO @ CROmetrics / LinkedIn
"Most Impactful Use of Personalization" and "Experience of the Year" Optie award winner.


Sri 04-29-15
 

Re: Code Editor - Line-wrapped code evaluates only when the DOM is ready

Thanks Tom, I just wanted to check if this was some quirk with the Code Editor but it is indeed intended behaviour!
Sri
Level 2

Re: Code Editor - Line-wrapped code evaluates only when the DOM is ready

Thanks for the thorough response @tomfuertes!

 

@Sri to distill what @tomfuertes wrote, here's how Optimizely evaluates variation code:

  • Single line jQuery syntax of selector.action will be evaluated ASAP
  • Multi-line jQuery will be evaluated at DOM ready
  • Multi-line comments will hold subsequent code until DOM ready
  • Vanilla JavaScript (i.e. anything that doesn't follow selector.action syntax) on one or more lines will be held until DOM ready

Multiple lines and excess white space will add a few bytes here and there to your snippet size.  If you have lots of experiments with lots of variation code, this could make a difference.

 

If you do have JavaScript that needs to be evaluated ASAP, you can use our force evaluation tags.

 

Thanks for the good question!

Harrison Krat
Solutions Architect | Optimizely, Inc.
harrison@optimizely.com