1. #1
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default HTML5 Recommendation

    HTML5 Recommendation


    I don't think the spec is 100% finalized, so maybe it's not too late to get new ideas in and implemented.

    I've been doing a JS audit of several major consumer sites. What I'm seeing is a LOT of JavaScripts loaded from quite a few hosts. Consider a page with AdSense and Analytics on it. You are fetching JavaScripts from at least two hosts right there.

    Additionally, a way to greatly speed up WWW pages is to fetch your CSS and images from more than one hostname. What I see in IE 7 is that CSS fetched from the same server as the HTML document is loaded almost serially, while that same CSS fetched from the same server but with a different hostname is loaded in parallel with the HTML. Similarly, with images, if you load 20 from one host, they get loaded 2 at a time in parallel, but if you loaded 10 from one hostname and the other 10 from another hostname, you get 4 loaded at a time in parallel.

    The cost, in terms of page load speed, of all these hostnames is in the DNS lookups by the browser (first visit).

    Already we're seeing JavaScript is evolving to work like Java was meant to. That is, you load some scripts from your origin server and then load plugins or libraries from trusted servers. I mean, you can load ExtJS from a CDN, Google Maps from their servers, etc., and mash up to make a fairly complex application. Albeit there are security restrictions (that's another topic).

    So I propose an additional tag to HTML 5. It obviously won't be supported by current browsers, but it could be implemented in all future ones.

    I don't care what the actual tag name is, but for discussion I'll call it <hostname>. It's usage is fairly obvious:

    Code:
    <hostname name="http://cdn.sencha.com" ip="127.0.0.1" />
    When the browser sees this, it tells its DNS helper that for the rest of the document, http://cdn.sencha.com is at IP 127.0.0.1, so it doesn't have to do the DNS lookup to open a socket to that host.

    This would be perfectly valid:
    Code:
    <hostname name="http://cdn.sencha.com" ip="10.0.0.1" />
    <img src="http://cdn.sencha.com/a.png" />
    <hostname name="http://cdn.sencha.com" ip="10.0.0.2" />
    <img src="http://cdn.sencha.com/b.png" />
    The benefit is obvious. The server can do one DNS lookup for a host and provide that service to every client. If your page gets hit by 10,000 people in a day, the server has done the DNS lookup for 10,000 people in one swoop.

    cdn.sencha.com doesn't do the idea justice. Imagine this scenario:
    Code:
    <script type="text/javascript" src="http://extjs.eu/scripts/3.2.0/FileTree.js"></script>
    where a page might load ExtJS plugins from all over the place.

    It gets even more interesting when you include a script that injects script tags directly into the DOM. As webmaster, I know what hosts those script tags reference, so I can assist the browser by telling it the DNS lookup.

    Again, the DNS lookups kill performance on the browser side.

    Thoughts?

  2. #2
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    555
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    First of all, you need to post this to the W3C mailing list for HTML5.

    Secondly, why not just make an apache module that dynamically rewrites host names by their corresponding ip addresses? Gets the job done just as well, without extending HTML.

    Finally, I don't see how you can do a geo-optimized implementation. Currently CDN pools resolve to different ip's depending on your location / DNS server. This means that to do this well you would need to detect the user's location, find the corresponding DNS server, contact that server, and fetch the appropriate IP. Or, alternatively, the web server has to become a geo-optimized DNS server. Neither of those solutions seem very attractive.

  3. #3
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    I pointed out that the CDN URL doesn't do the idea justice.

    I am fully aware of the DNS tricks that some CDNs use, but they are actually quite faulty. Relying on DNS to choose a CDN server location is unreliable. For instance, I was in Hawaii and loaded a page that uses Akamai's CDN service. I found the "whatver.akamai.net" URL in the view source of the page. I then did a DNS lookup of that name and got a server in Washington D.C. Why? Because the DNS server of the ISP I was using is in Texas. A proper cache server location would have been in Hawaii somewhere, eh? And why the heck didn't it give me a server in Texas somewhere?

    The origin server does see the browser's IP (REMOTE_ADDR) and can at least do a better job of figuring out the user's topographical location (geographical isn't so meaningful). It could set the IP appropriately.

    I didn't mention that where hostname tags are not supplied the browser does its normal thing and does the DNS lookup, so you can exclude CDNs from your list of hostnames in such tags.

    Sencha is heavily invested in HTML 5 technology from now on. Who's going to listen to some guy who never posted on the W3C mailing list?

    Finally, I don't see any reason this should be an Apache module, though it may be a good idea in addition to my proposal.

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2009
    Posts
    315
    Vote Rating
    3
    azuroff will become famous soon enough

      0  

    Default


    My first thought was that browser caching could present a problem if the IP address changes, but if the HTML document containing the IP address is cached, presumably any resources loaded from that server would be cached as well.

    I don't think you'd need a new tag for this, though. The <meta> tag seems like a natural fit for something like this - just add a new optional attribute called "hostname".

    <meta hostname="http://cdn.sencha.com" content="127.0.0.1">

  5. #5
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    Quote Originally Posted by azuroff View Post
    My first thought was that browser caching could present a problem if the IP address changes, but if the HTML document containing the IP address is cached, presumably any resources loaded from that server would be cached as well.

    I don't think you'd need a new tag for this, though. The <meta> tag seems like a natural fit for something like this - just add a new optional attribute called "hostname".

    <meta hostname="http://cdn.sencha.com" content="127.0.0.1">
    PER HTML 4 spec, meta tags are not allowed in the body, and I do see placing these hostname tags in the body.

  6. #6
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Question


    A quick test[hack] with this and my DNS server indicate this MAY help. FF and IE only resolve the IP once (even after reloading the page):

    <link rel="stylesheet" href="http://some.host.com" />

    But, how about a meta where the [ip] is optional (for those sensitive about DNS changes and Round Robin algos), but the URI is resolved early:

    <meta resolve="http://some.host.com" ip="10.1.1.1" />
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    Quote Originally Posted by hendricd View Post
    A quick test[hack] with this and my DNS server indicate this MAY help. FF and IE only resolve the IP once (even after reloading the page):

    <link rel="stylesheet" href="http://some.host.com" />

    But, how about a meta where the [ip] is optional (for those sensitive about DNS changes and Round Robin algos), but the URI is resolved early:

    <meta resolve="http://some.host.com" ip="10.1.1.1" />
    Consider the first time some user hits your page. It is going to do the DNS lookups

    meta tags cannot appear in the body of the document, which precludes this:
    Code:
    <hostname name="http://cdn.sencha.com" ip="10.0.0.1" />
    <img src="http://cdn.sencha.com/a.png" />
    <hostname name="http://cdn.sencha.com" ip="10.0.0.2" />
    <img src="http://cdn.sencha.com/b.png" />
    Where a.png is loaded from 10.0.0.1 and b.png is loaded frrom 10.0.0.2

    I got this idea from looking at firebug net tab and seeing pages with 70+ hosts on them.

    If you are going to use asset hosts to coerce the browser to load more than two images in parallel, there's a DNS lookup overhead for each host that could be avoided...

  8. #8
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    You have a tuff sell on your hands.

    You're basically defeating a variety of load-balancing/recovery strategies. The dynamic nature of DNS (or worse, your site assets layout) would require you to modify your markup in the event of an outage.

    Not very resilient IMO.

    But, if you feel the need (and enjoy editing markup when things change), why not:

    HTML Code:
    <img src="http://10.0.0.2/b.png" />
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  9. #9
    Sencha Premium Member
    Join Date
    Feb 2009
    Posts
    315
    Vote Rating
    3
    azuroff will become famous soon enough

      0  

    Default


    Quote Originally Posted by hendricd View Post
    HTML Code:
    <img src="http://10.0.0.2/b.png" />
    I was literally seconds away from posting the same thing...

  10. #10
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    Quote Originally Posted by hendricd View Post
    You have a tuff sell on your hands.

    You're basically defeating a variety of load-balancing/recovery strategies. The dynamic nature of DNS (or worse, your site assets layout) would require you to modify your markup in the event of an outage.

    Not very resilient IMO.

    But, if you feel the need (and enjoy editing markup when things change), why not:

    HTML Code:
    <img src="http://10.0.0.2/b.png" />
    That's not going to help in the case of CSS, as in:
    HTML Code:
    background-image: url(http://cdn.sencha.com/a.png)
    Consider http://www.nytimes.com:
    171 requests from 20 hosts. 46 JavaScripts from 8 hosts.

    http://abcnews.go.com:
    261 requests from 31 hosts. 73 JavaScripts from 16 hosts.

    I'm seeing anywhere from 10ms to 100ms+ per DNS lookup. 100ms x 20 makes the page 2 seconds slower to load.

Similar Threads

  1. Recommendation to enhance EditorGridPanel
    By mabra in forum Community Discussion
    Replies: 0
    Last Post: 14 Mar 2010, 1:29 PM
  2. Recommendation on what's the appropriate way to build this layout
    By robertoroberto in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 22 Jun 2009, 5:32 AM

Thread Participants: 3