Re: Picture Element Explanation.

On Thu, 05 Mar 2015 15:32:29 +0100, Paul Deschamps <pdescham49@gmail.com>  
wrote:

> First of all thank you for your reply My comments are below:
>
> On Thu, Mar 5, 2015 at 7:39 AM, Yoav Weiss <yoav@yoav.ws> wrote:
>
>> The problems with a CSS based solution such as this are:
>> * It incurs a non-trivial performance regression, since the browser now
>> has to wait for all CSS to come in and for layout (or style calc at the
>> very least) to take place before it can start downloading the required
>> images.
>>
>
> What does "non-trivial performance regression" mean to you?  To say that
> the latency for a browser for it load the css is the main issue could  
> also
> be applied to the HTML itself when were talking about milliseconds here
> right?

No. Let's walk through an example to examine the effects.

Consider the following document:

<!doctype html>
<link rel=stylesheet href=style.css>
<img src=image.png>

Also consider that the RTT time is 500ms.

Now, if CSS can change which resource the <img> element should download,  
and we don't want to start two downloads, the browser needs to wait for  
style.css to be downloaded before starting the image.png load.

T=0
page load starts

T=500ms
HTML is loaded, style.css load starts. (image.png is seen but is deferred,  
waiting for layout.)

T=1000ms
CSS is loaded. First paint happens without any images. Image loads can now  
start.

T=1500ms
Images are loaded. Page load complete.


Compare this with the current situation:

T=0
page load starts

T=500ms
HTML is loaded, style.css and image load starts.

T=1000ms
CSS and images are loaded. First paint happens *with images*. Page load  
complete.


Now, this is not a real-world example, but being able to show images in  
the first paint is something that browser vendors have optimized for (even  
when there are external scripts that block the HTML parser) and it was a  
hard requirement for responsive images to not regress this optimization.

-- 
Simon Pieters
Opera Software

Received on Friday, 6 March 2015 08:51:43 UTC