5 ms·

Using iframes and document.write to improve navigation performance

56 points by jaffathecake 10y ago

the8472 10y ago
transplanting a node into a different document while the document.write() merrily marches along. It feels like open heart surgery with a rusty knife. But I can't find anything in the specs saying that it is verboten.
- mmastrac 10y ago
  Technically you should be adopting the node, but I guess browsers don't care: https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptNode https://developer.mozilla.org/en-US/docs/Web/API/Document/ad...
  - the8472 10y ago
    That shouldn't affect the parser, because adoptNode "simply" (read: dark rituals involving goats) changes owner document and the prototype chain but not object identity, which means the node on the parser stack should still be valid. The trick here is that the the invoked behavior is spread over the HTML5 and DOM specs and maybe a little Ecmascript too. In isolation they appear sane, combined together they are loose enough that this hack does not run afoul of any rules.
  - jaffathecake 10y ago
    As far as I can tell, adopting happens automatically https://dom.spec.whatwg.org/#concept-node-pre-insert https://dom.spec.whatwg.org/#concept-node-pre-insert
iainmerrick 10y ago
This is great, what a nifty hack! Arguably a little bit clickbait-y, as the headline is accurate but doesn't mention the streaming JSON idea that's covered in the same article. That's a much more sensible approach than abusing iframes. And as the article also says, you'll get the benefit of progressive rendering for free if you just don't make your site into a single page app in the first place.
- jaffathecake 10y ago
  ND-JSON only works for aggregations of data where the chunks are small. If you're building a news site you can't really chunk a single article up into ND-JSON. If you want a transition between pages then you can't use full navigations, and if you want to keep streaming the iframe hack seems to be the only solution.
  - iainmerrick 10y ago
    If you're building a news site you can't really chunk a single article up into ND-JSON. One paragraph per chunk?
    - jaffathecake 10y ago
      Heh, right. And if you've got something nested like a quote, a list, an aside etc etc, how do you represent that as a flat stream of chunks? I suppose you could implement some kind of SAX-like thing expressed as ND-JSON… …orrrrrr avoid all that by streaming HTML.
      - RubyPinch 10y ago
        well, blockquote, ol, ul, aside, etc etc, are all flows, and as such are not permitted inside of p, which can only have phrasing content right?
        jaffathecake 10y ago
        Right, but they can all have paragraphs (and many other elements) as a descendant.
      - iainmerrick 10y ago
        Well, personally I'd say "keep the styling and scripting to a minimum, don't make it a single-page app at all, and just load the whole page when you need it." But if I were charge of a magazine and ran it that way, it would quickly die from lack of ad revenue, oh well. :/
Too 10y ago
Isn't it standard practice to split large ajax responses into many smaller requests to allow parallel download+render? I've done this since the very early days of ajax. You always had to tweak the frame size though and find a balance of download speed + request handshake time vs render speed, so having a client side streaming solution for this would be really cool.
- aikah 10y ago
  > Isn't it standard practice to split large ajax responses into many smaller requests to allow parallel download+render? It doesn't guarantee the payload will load faster, especially on mobile. Obviously, the solution is to avoid loading large ajax responses and only returning from the server what is absolutely needed.
andybak 10y ago
Isn't the problem that there's a performance 'enhancement' in wide usage that actually hurts performance? Devil's Advocate: maybe the real answer is to go back to proper full-page loads and figure out why your javascript and CSS parsing is taking so long.
- jaffathecake 10y ago
  In some cases, yeah. I touch on this at the end of the article. But if you can't avoid having that JavaScript on the page, avoiding a revaluation is beneficial. One technique I didn't cover (as the article was getting long) is using a service worker to speed up server renders. The test & code can be found at https://jakearchibald.github.io/streaming-html/ https://jakearchibald.github.io/streaming-html/

56 points by jaffathecake 10y ago

transplanting a node into a different document while the document.write() merrily marches along. It feels like open heart surgery with a rusty knife. But I can't find anything in the specs saying that it is verboten.

mmastrac 10y ago
Technically you should be adopting the node, but I guess browsers don't care: https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptNode https://developer.mozilla.org/en-US/docs/Web/API/Document/ad...
- the8472 10y ago
  That shouldn't affect the parser, because adoptNode "simply" (read: dark rituals involving goats) changes owner document and the prototype chain but not object identity, which means the node on the parser stack should still be valid. The trick here is that the the invoked behavior is spread over the HTML5 and DOM specs and maybe a little Ecmascript too. In isolation they appear sane, combined together they are loose enough that this hack does not run afoul of any rules.
- jaffathecake 10y ago
  As far as I can tell, adopting happens automatically https://dom.spec.whatwg.org/#concept-node-pre-insert https://dom.spec.whatwg.org/#concept-node-pre-insert

iainmerrick 10y ago

This is great, what a nifty hack! Arguably a little bit clickbait-y, as the headline is accurate but doesn't mention the streaming JSON idea that's covered in the same article. That's a much more sensible approach than abusing iframes. And as the article also says, you'll get the benefit of progressive rendering for free if you just don't make your site into a single page app in the first place.

jaffathecake 10y ago
ND-JSON only works for aggregations of data where the chunks are small. If you're building a news site you can't really chunk a single article up into ND-JSON. If you want a transition between pages then you can't use full navigations, and if you want to keep streaming the iframe hack seems to be the only solution.
- iainmerrick 10y ago
  If you're building a news site you can't really chunk a single article up into ND-JSON. One paragraph per chunk?
  - jaffathecake 10y ago
    Heh, right. And if you've got something nested like a quote, a list, an aside etc etc, how do you represent that as a flat stream of chunks? I suppose you could implement some kind of SAX-like thing expressed as ND-JSON… …orrrrrr avoid all that by streaming HTML.
    - RubyPinch 10y ago
      well, blockquote, ol, ul, aside, etc etc, are all flows, and as such are not permitted inside of p, which can only have phrasing content right?
      - jaffathecake 10y ago
        Right, but they can all have paragraphs (and many other elements) as a descendant.
    - iainmerrick 10y ago
      Well, personally I'd say "keep the styling and scripting to a minimum, don't make it a single-page app at all, and just load the whole page when you need it." But if I were charge of a magazine and ran it that way, it would quickly die from lack of ad revenue, oh well. :/

Too 10y ago

Isn't it standard practice to split large ajax responses into many smaller requests to allow parallel download+render? I've done this since the very early days of ajax. You always had to tweak the frame size though and find a balance of download speed + request handshake time vs render speed, so having a client side streaming solution for this would be really cool.

aikah 10y ago
> Isn't it standard practice to split large ajax responses into many smaller requests to allow parallel download+render? It doesn't guarantee the payload will load faster, especially on mobile. Obviously, the solution is to avoid loading large ajax responses and only returning from the server what is absolutely needed.

andybak 10y ago

Isn't the problem that there's a performance 'enhancement' in wide usage that actually hurts performance? Devil's Advocate: maybe the real answer is to go back to proper full-page loads and figure out why your javascript and CSS parsing is taking so long.

jaffathecake 10y ago
In some cases, yeah. I touch on this at the end of the article. But if you can't avoid having that JavaScript on the page, avoiding a revaluation is beneficial. One technique I didn't cover (as the article was getting long) is using a service worker to speed up server renders. The test & code can be found at https://jakearchibald.github.io/streaming-html/ https://jakearchibald.github.io/streaming-html/