[POST] <link rel="reload">

[Rplus]

Chrome 開始預設支援 <link rel="preload"> 的預載資源方式了~

ref: Turn on support by default https://codereview.chromium.org/1636303003

via: https://twitter.com/yoavweiss/status/692606414972391425

這邊倒是有一篇用一些小技巧在 onload 時調整 rel 類別而達到非同步載入 CSS 的方式 Async CSS w/ link[rel=preload] http://filamentgroup.github.io/loadCSS/test/preload.html

<link rel="preload" as="style" onload="this.rel='stylesheet'"
  href="http://scottjehl.com/css-temp/slow.php">

github repo: https://github.com/filamentgroup/loadCSS

跟 browser pre-xxx 不熟 找了篇文來補一補

Prefetching, preloading, prebrowsing by ROBIN RENDLE // SEPTEMBER 2, 2015 https://css-tricks.com/prefetching-preloading-prebrowsing/

預載相關 rel type 還有

• dns-prefetch
• preconnect
• prefetch
• subresource
• prerender
• preload

---

ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

[Rplus]

https://github.com/filamentgroup/loadCSS/blob/v1.0.0-0/src/loadCSS.js#L26 這個 load CSS async 的關鍵在於先設定為非作用的 media type， 以不阻斷 render