script async + grabbing self script

[WebReflection]

You are suggesting to use async to load stretchy and it's like "you" are assuming that will act like a single blocking script in the page through the $$('script').pop() logic.

You know that's not how async really work, that might work only if you have only stretchy in the page as async, otherwise that popped script can be pretty much any other script, even some after ;-)

Indeed you have to fallback later on within the init looking for properties and re-searching for the script with the data-stretchy-filter

It feels like there's some unnecessary search when you address the script property and you could just search once the right thing on the init?

Moreover, but it could be a minor (or more rare) issue, some quite modern Firefox is known to have an issue with DOMContentLoaded and async / defer scripts so that it might never fire 'cause the loading state won't be loading but DOMContentLoaded won't execute neither ( the Web is always fun, isn't it? )

This is how I ended up solving it, putting an inline script on my templates that brings document.ready in ... it grants on every device on earth the thing will be executed via document.ready(callback) :D

Of course just dropping that async would work as well.

For others who might read this bug, curious to know more about why async is not really a holy grail for the web: http://webreflection.blogspot.co.uk/2014/02/the-underestimated-problem-about-script.html

Cheers

[LeaVerou]

Hi Andrea,

Thanks for the feedback! In the future, could you please open a separate issue per thing you want to comment on? Otherwise this can quickly become a mess with multiple single-threaded discussions.

Yeah, @karger also privately pointed out the issue with async and grabbing self script. I could either just search for script[data-filter] and hope no other script uses the same property name for config (flimsy), or update the docs to point out this only works with non-async, non-defer scripts (awkward). Both solutions are suboptimal, so suggestions are welcome!

Re:DOMContentLoaded, sounds like in those versions of FF, the readyState conditional will still execute, since it's not loading? If I misunderstood, what is document.readyState there?

[WebReflection]

never went too deep there, knowing that DOMContentLoaded can fail on FF when defer is used ( and in some case async ) was already enough for me to change direction and use an inline script that weights like a meta tag but always works ( even on IE8 eventually )

Apologies for talking about two things differently ... about the $$ thought, you can simply not use script property, since you don't need/use it anywhere else if not inside the init call, or just use $$('script[data-stretchy-filter]').pop() that will unlikely have name conflicts since you prefixed already the data entry name for the filter