Building the DOM faster: speculative parsing, async, defer and preload

https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/

by nachtigall • 9 years ago

149 20 9 years ago

hacks.mozilla.org

outoftacos2• 9 years ago

This seems like a very promising idea, especially since every site nowadays loads 12 scripts that were copy/pasted from eight different sources by six different developers all over the page, and each one just blocks everything no matter how fast your network or client is.

I mean, that's if you're lucky and the development team was relatively competent.

ralmidani3• 9 years ago

Build systems really help reduce the number of scripts (and stylesheets) loaded. I currently use Ember-CLI, and it's just a "vendor" script containing all your third-party scripts and another with your app-specific code.

The old-fashioned way of embedding scripts directly is really wasteful, I agree.

jerf• 9 years ago

You need to spend some time browsing the web with your debugger opened to the "net" tab. It is, alas, not the "old" way.

thephyber3• 9 years ago

I think you vastly underestimate how wasteful 3rd party JS API implementations work. Especially for advertising, analytics, and other injected widgets.

Build systems exist, but that doesn't mean they are used everywhere or that all features can be integrated into them. The same goes for static analysis tools, dynamic analysis tools, perf optimization tools, security vulnerability testing tools, unit testing, automated integration testing, etc. -- they exist, but their coverage is far less than 100%.

seanwilson2• 9 years ago

HTTP2 greatly reduces the cost of requests though so what you really want is tree shaking to get rid of code you don't use and minification to reduce its size.

antigirl• 9 years ago

Its not different developers but different services. Developers are competent. Its the product owners that are to blame. For example a hotel website, will have one minified concatenated script file, but then on top there might be other services, for example client side A/B testing. Which cant even be defer loaded and usually comes first! Sometimes analytics would come separate etc Other services show things like 'x number of people viewing the booking' etc etc

(BTW i don't see how you can have separate files, using modules or require etc would prove difficult to have split files, rather than one)

finchisko• 9 years ago

Wondering if async attribute is actually a thing in 2017. Last time I observed chrome dev tools it seems that async is default behaviour at least for Chrome.

acdha• 9 years ago

Depends on how you create it: in HTML, it matters but JS created script elements are async by default.

module00002• 9 years ago

Signs your "profession" has been changing... When I click a story with "DOM" in it, expecting to read about a new Depth of Market interface.

thephyber3• 9 years ago

Document Object Model (in the browser) has been a topic of heavy discussion on HN since I found it half a decade ago.

perhaps you just misjudged the composition of topics frequently posted to this site.

module00002• 9 years ago

It was meant as humor :)

matmo• 9 years ago

"One thing to pay attention to when preloading fonts is that you also have to set the crossorigin attribute even if the font is on the same domain: <link rel="preload" href="font.woff" as="font" crossorigin>"

But why?

the8472• 9 years ago

Because the spec says font-loads from stylesheets must always be anonymous CORS. Thus the preload needs to match that.

https://drafts.csswg.org/css-fonts/#font-fetching-requiremen...

mihajlija• 9 years ago

what @the8472 said, here's some more context on the implementation details: https://github.com/w3c/preload/issues/32

seanwilson2• 9 years ago

Great article. I can't think of another one that explains the complexity of how JavaScript and CSS block rendering. The diagrams really help.

TwelveNights• 9 years ago

Wow, that was a very interesting read. I had never even thought about the interaction between the different parts of the DOM before.

Building the DOM faster: speculative parsing, async, defer and preload

Related Stories