Building the DOM faster: speculative parsing, async, defer and preload | Hacker News Reader

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

hacks.mozilla.org

149 pointsnachtigall20 comments

"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?

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...

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

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

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.

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

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

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.

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.

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

Edited to say "old-fashioned" rather than "old".

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%.

I understand build systems cannot solve every problem, and the mechanism described in the article is certainly useful. I was merely responding to the concern about third-party scripts with links copied-and-pasted mindlessly, and which would be better handled using a build system.

Sure, but adding GA to a page is what I meant by copy/paste, this still happens everywhere outside of the build process. Then of course marketing needs to add 10 other things and they can't figure out whatever hip new build tool someone set up and then suddenly things get really messy.

Yes this happened even at whatever company you think is a paragon of engineering best practices and modern development.

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.

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)

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.

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.

It was meant as humor :)

Strangely enough people usually can't infer sarcasm without body language.

This is the same reason the Secret Service put a large bounty on software that can accurately identify sarcasm from legit intent to do harm to political figures.

Reply on news.ycombinator.com