[whatwg] More effective model for handling resources

Wed Mar 12 23:57:02 PDT 2014

Hi,

Almost all web developer I know use externally linked CSS resource in their
web projects. That means that the browser needs to (1) request the html
page (2) parse the html (3) request for the CSS resource that is linked
from the html document. The problem with externally linked resources is
point three. It needs to make another request for the CSS resource. There
is a solution to this problem and that is to inline the CSS. Though that
would yield another problem: all subsequent page request will become
bigger.

I don't know if this have been discussed before. And I couldn't find it in
the whatwg docs. So here is my suggested solution. (I guess also this is
the right email list to discuss solutions for html?)

*1*. The browser sends a page request with a HTTP request header telling
what kind of resources have been cached. E.g. in the first request it sends
the header, which is telling no resource have been cached.

  *Cached-Resources : *

*2*. The server reads the header and inline the resources needed for the
document. Because the browser send an empty *Cached-Resources* header the
server now knows that nothing have been cached. So the server now inline
the sources in the html document. Here is an example html document with
suggested html tags and inlined resource.

  <!DOCTYPE html>
  <html>
     <head>
     ...
     <script type="text/javascript" *resource="modernizr"*></script>
     <link rel="stylesheet" *resource="style.css"* type="text/css">
     ...
     </head>
     <body>
     ...
     </body>
     *<cache>*
        *<resource* *name="style.css"* *expires="109288419834"* *ttl="1000000s"
etag="**fenrnieghgruhreughgrkwe**">*
        .html { ... } ...
        *</resource>*
        *<resource* *name="modernizr.js"* *expires="109288419834"*
*ttl="1000000s"
etag="wfe82njkfewn892bbfhewef">*
        (function(){ ... })()
        *</resource>*
     *</cache>*
  </html>

The resource attribute above is pointing to a resource with that name. The
resource tag have *ttl, expires and etag* attributes for specifying cache
options.

*3.* The browser now parse the html and cache the resource.

*4.* The browser request the same page again. It nows sends the
*Cached-Resources* header with some additional values.

  *Cached-Resources : *
*  style.css **fenrnieghgruhreughgrkwe*
*  modernizr.js **wfe82njkfewn892bbfhewef*

The Cached resource header now send which named resources have been cached
in the browser along with the etag.

*5.* The server reads the *Cached-Resources* header. And validate etags and
resources. And if all cached resources is not invalid it will respond with
no *cache and resource tags.*

  <!DOCTYPE html>
  <html>
     <head>
     ...
     <script type="text/javascript" resource="modernizr"></script>
     <link rel="stylesheet" *resource="style.css"* type="text/css">
     ...
     </head>
     <body>
     ...
     </body>
  </html>

Let say that modernizr.js has a different etag now. It will just inline the
new *modernizr.js.*

  <!DOCTYPE html>
  <html>
     <head>
     ...
     <script type="text/javascript" resource="modernizr"></script>
     <link rel="stylesheet" *resource="style.css"* type="text/css">
     ...
     </head>
     <body>
     ...
     </body>
     *<cache>*
        *<resource* *name="modernizr.js"* *expires="109288419834"*
*ttl="1000000s"
etag="iowefjoifjifofrjorejireer">*
        (function(){ ... })()
        *</resource>*
     *</cache>*
  </html>

All cached resources is cached per domain. There can be some resources that
is async loaded and some resources is not shared between different pages in
the same domain. To invalidate resources just looking up resource
references in the html/js/css is impossible. The server needs to check if a
resource is invalid or not.

Let say that the client sends the following request header:

  *Cached-Resources : *
*  style.css **fenrnieghgruhreughgrkwe*
*  modernizr.js **wfe82njkfewn892bbfhewef*
*  remove-me.js jeojifjifwjweiojwijifjefwwe*

The server now know want to invalidate the resource *remove-me.js. *it just
adds an an resource tag with an expire date smaller than now. (a.la. cookie
style)

  <!DOCTYPE html>
  <html>
     <head>
     ...
     <script type="text/javascript" resource="modernizr"></script>
     <link rel="stylesheet" *resource="style.css"* type="text/css">
     ...
     </head>
     <body>
     ...
     </body>
     *<cache>*
        *<resource* *name="remove-me.js"* *expires="0"**>*
        *</resource>*
     *</cache>*
  </html>

With this model we get the power with inlined content(decreased number of
request) along with the power of external linked resources(resource
caching).

Thought and feedback is welcomed

-- 
Sincerely,

Tingan Ho