Re: [HTML Imports]: Sync, async, -ish?

On Wed, Nov 20, 2013 at 9:51 AM, John J Barton
<johnjbarton@johnjbarton.com>wrote:

> Another alternative:
>
> First let's agree that Souder's example must block:
>
> <link rel="import" href="import.php">
>
>  ...
>
> <div id=import-container></div>
> <script>
> var link = document.querySelector('link[rel=import]');
> var content = link.import.querySelector('#imported-content');
> document.getElementById('import-container').appendChild(content.cloneNode(true));
> </script>
>
> If we don't block on the script tag then we have a race between the
> querySelector and the import, fail.
>
> To me the async solution is on the script, just like it is today load
> events:
>
> <div id=import-container></div>
> <script>
> var link = document.querySelector('link[rel=import]');
>
>
> link.addEventListener('load', function() {
>   var content = link.import.querySelector('#imported-content');
>   document.getElementById('import-container').appendChild(content.cloneNode(true));
>
>
> }
> </script>
>
> Now the script still blocks but it is short and just registers a handler.
> When the link loads it is executed. Here the dependency is correctly set by
> the script tag.
>
> But I don't see a 'load' event in the Import spec,
> http://www.w3.org/TR/html-imports/
>

The link element already has a generic "load" event in the HTML spec:
http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#attr-link-crossorigin(I
tried to get as close as possible to the actual line without
overshooting).


> jjb
>
>
> On Mon, Nov 18, 2013 at 1:40 PM, Dimitri Glazkov <dglazkov@google.com>wrote:
>
>> 'Sup yo!
>>
>> There was a thought-provoking post by Steve Souders [1] this weekend that
>> involved HTML Imports (yay!) and document.write (boo!), which triggered a
>> Twitter conversation [2], which triggered some conversations with Arv and
>> Alex, which finally erupted in this email.
>>
>> Today, HTML Imports loading behavior is very simply defined: they act
>> like stylesheets. They load asynchronously, but block <script> from
>> executing. Some peeps seem to frown on that and demand moar async.
>>
>> I am going to claim that there are two distinct uses of <link rel=import>:
>>
>> 1) The import is the most important part of the document. Typically, this
>> is when the import is the underlying framework that powers the app, and the
>> app simply won't function without it. In this case, any more async will be
>> all burden and no benefit.
>>
>> 2) The import is the least important of the document. This is the "+1
>> button" case. The import is useful, but sure as hell doesn't need to take
>> rendering engine's attention from presenting this document to the user. In
>> this case, async is sorely needed.
>>
>> We should address both of these cases, and we don't right now -- which is
>> a problem.
>>
>> Shoot-from-the-hip Strawman:
>>
>> * The default behavior stays currently specified
>> * The "async" attribute on <link> makes import load asynchronously
>> * Also, consider not blocking rendering when blocking <script>
>>
>> This strawman is intentionally full of ... straw. Please provide a better
>> strawman below:
>> __________________
>> __________________
>> __________________
>>
>> :DG<
>>
>> [1]:
>> http://www.stevesouders.com/blog/2013/11/16/async-ads-with-html-imports/
>> [2]: https://twitter.com/codepo8/status/401752453944590336
>>
>
>