Rich-text Reply

Javascript Editing Freezes Browser

behe 03-24-15

Javascript Editing Freezes Browser

[ Edited ]

I have a project on which I am working, and every once in a while the browser decides to freeze and I get a "tabs not responding prompt" which lists any optimizely related tabs. 

 

Observations:

  • I have the editor open with the javascript "Variation Code" editor in view.
  • I make no deliberate interaction with the page other than moving my mouse over the window
  • The entire browser freezes and I continuously get prompts from my browser stating optimizely related tabs are not responding.  This locks the entire browser from interaction.  I am not able to switch tabs.  I am not able to use the browser.
  • It does not matter whether I'm using Chrome or Firefox, and this has persisted across many versions of both browsers.
  • If I have a variation preview window open on a browser in which I'm not editing, both browsers will freeze.  Ex I'm editing in Chrome, I see it has frozen. I then go to firefox, go to any optimizely related preview tab and that also browser freezes.
  • If I wait multiple minutes.  The browser unfreezes and I can continue work normally.
  • I have relatively complex javascript (450+ lines) in my variation.
  • This behavior happened on multiple different experiments with completely different code.
  • I have seen it freeze as I hover over text in the Variation Code editor and the editor looks as though it's chugging to highlight stuff, but I am unsure if this is related.  This is not the only case where a freeze happens.

I don't really have a hypothosis, and any of these observations may be coincidence and unrelated, but It is quite frusterating to have a perfectly productive editing session and have [seemingly] random multi-minute interruptions in the dev process.  Any thoughts?

 

Level 2

Re: Javascript Editing Freezes Browser

[ Edited ]

Hey behe,

Are you a developer? If so, are you able to post some examples of variation JS that seems to cause the freezing? My initial guess would be that you've got some kind of infinite loop running that is crashing the browser. I state this b/c you're saying this happens in *multiple* browsers. Chrome handles multi-threading pretty decently, and Firefox recently added in this capability as well, so sometimes you'll experience crashes, sometimes hangups, and sometimes intermittent periods of uninterrupted workflow with sporadic hangups. Also, not quite sure what it is you're doing in your variation, but 450+ lines of code is larger than usual for *variation JavaScript* and could definitely cause some FOUC (Flashing Of Unstyled Content) on the live page(s). I'd see if you can shrink this if possible, or move some of this to the Experiment JS if it's reusable. If you have a lot of JS that is not DOM-dependent, you could also wrap this in special comments to force it to run immediately and not wait until the DOM is ready (see here: https://help.optimizely.com/hc/en-us/articles/200040185-Force-variation-code-or-Experiment-JavaScrip... )

-- Sean
UI Developer @ Blue Acorn

optimizely developer certification
juliofarfan 04-01-15
 

Re: Javascript Editing Freezes Browser

It happened me couple of times before and resulted -as you said- in an infinity loop or just an uncaught exception.

 

Try this:
1. Open the target page of test in a browser windows (i prefer Chrome) 
2. Right click and Inspect Element
3. Go to Console (keep it open)
4. Append at the end of the url of the target page this code to force variation ?optimizely_xEXPERIMENTID=VARIATIONID (ex. http://yourtespage.com?optimizely_x123456789=1)

5. Your page will reload with the variation

6. Check out console log and verify if there is some exception message (something is wrong with the variation code) or if theres an script with numbers constanly adding (loop)

 

If that still not help you. Try to add us the variation code and the console log to identify which could be the issue.