On Sat, 04 Jan 2014 06:36:27 -0000, Adam Barth <w...@adambarth.com> wrote:

In order for the HTMLPreloadScanner to issue preload requests for
<picture> elements, the HTMLPreloadScanner would need to be able to
evaluate arbitrary media requests.  That's difficult to do without
joining the main thread because the media query engine works only on
the main thread.

Solution I've suggested originally was that when the selection algorithm encounters a media query it cannot evaluate yet, it aborts selection, waits until conditions change and retries selection form the beginning.

This means that:

* all images that can be selected by the preloader will be selected, and they'll be selected as soon as it is possible,
 * browser will never load any irrelevant image,
* browsers can optimize when and which MQs match without affecting correctness.


For example:

   <picture>
       <source media="resolution:2dppx" src=first>
       <source media="max-width:9999px" src=second>
<source media="super-complex-media-query-to-evaluate: on-main-thread-only" src=third>
   </picture>

in an <iframe> without layout.

1. If you know resolution and the first MQ matches, then load src=first immediately. Done! 2. If you don't know viewport size then wait until any conditions change (i.e. either viewport size becomes known OR resolution changes) and go to step 1. 3. If the second MQ matches then load src=second immediately (might still happen in the preloader). Done! 4. If you can't evaluate complex MQ in the preloader, then wait until control goes back to the main thread and go to step 1.

By "wait" here I mean the selection algorithm is deferred for the given picture only, and nothing else is blocked.


Equivalent of it in the current spec would be something like this:

Before step 7 in http://picture.responsiveimages.org/#update-source-sets add:

6b. If child has a media attribute, and its value is a valid media query which UA temporarily cannot evaluate then exit this sub-algorithm and /select an image source/ again after a UA-specific delay.


"temporarily cannot evaluate" is completely up to UA. It may mean unknown sizes in iframes, it may mean non-trivial queries in the preloader, etc.

"UA-specific delay" could be waiting for any media query in the <picture> to change, or it could simply mean ignoring the picture in the preloader and doing evaluation properly on the main thread/when layout is calculated, etc.

"exit this sub-algorithm" will either cause an earlier source that has unambiguously matched to be loaded or empty source set will cause selection algorithm to do nothing.

--
regards, Kornel

Reply via email to