Less.js: Synchronous XMLHttpRequest on the main thread is deprecated

[nitriques]

When running less.js in Chrome Canary (39.0.2171.95) I get a warning in the console

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

We are running into the same problem in Firefox and IE: there is a big FOUC while less is downloading files.

Is there a way to prevent this ? I understand the rationale of the deprecation, but for devs, it's still needed...

[lukeapage]

set the async option to true - it will mean the page is not blocked for the css to be created

We will have to consider whether we change our default options.

[nitriques]

set the async option to true -

I think this is the only choice... :(

But for me, the bad thing about this is the FOUC. I was wondering if there was a browser flag to re-enable it because both Firefox and IE are switching to async=true and it's terrible for developing...

[lukeapage]

I don't know.

I personally never use less in the browser - I use grunt-contrib-less, grunt-contrib-watch and grunt-contrib-livereload - that way it compiles serverside but you can get live updating.

[nitriques]

That's sad since I can't.

[rocker252]

I am also getting the same error. To change async is true, I am using ajax in javascript. Could you please suggest anything to avoid this error?

[lukeapage]

@rocker252

To change async is true, I am using ajax in javascript

The aysnc option we are talking about is the one in less

see http://lesscss.org/usage/#using-less-in-the-browser-options

[matthew-dean]

There should be no reason Less needs to block the thread from loading additional assets. If it's done to prevent FOUS (flash of unstyled content), the less.js file can immediately inject a style declaration of body { display: none !important; } until the styles are rendered / injected. There's no benefit to pausing the browser from doing anything else. Async should be the default.

[nitriques]

@matthew-dean Good point. If we could avoid it and get a "Styles ready" event it would be ok.

[matthew-dean]

I've fixed this issue pretty much exactly the way I suggested. Just needs code review for merging.

Btw, for me, changing the sync XHR to a "fake sync" (preventing FOUC) changed the render time for my stylesheets from 7-10 seconds to somewhere around a second. So, quite an improvement.

[nitriques]

Thanks!

[SarasArya]

Where do you make async=true ? I am not using less.

[nitriques]

@matthew-dean any ETA for the release ? Thanks.

[matthew-dean]

@nitriques This is already released. "async" is no longer applied to the XHR request. Instead, it controls whether the page displays before or after the style sheet is created.