在「Simpler way to load CSS asynchronously」這邊看到的技巧,利用了 onload
與 <noscript>
的方式,達成延遲載入 CSS 的效果:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript>
對於非必要的 CSS 可以用這樣的方式加強,看起來頗不賴... 這邊提到的方式,作者是引用「Smashing Newsletter: Issue #234」,不過查了一下發現 2015 的時候有人在 StackOverflow 上回答過:「How to load CSS Asynchronously」,不確定有沒有更早的資料...
另外一個比較新的語法是使用 rel="preload"
,但支援度就不太好了,需要靠 polyfill 之類的方式補上 (於是又多了一些東西要 load),反而不如前面提到的方式來的簡單。