CSS加載性能優化
阿新 • • 發佈：2017-12-26
his this 頭部 cool 寫法 reload footer 代碼 osc
將首屏頁面要用到的CSS文件，放在頁面頭部加載，其他模塊的CSS可以使用異步加載：loadCSS 和 Preload。
關於preload,推進2篇文章給大家看下：
1、通過rel="preload"進行內容預加載： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
2、preload 的w3文檔： https://www.w3.org/TR/preload/
對於一些不是首屏加載的css，我們可以如下寫法：
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel=‘stylesheet‘">
防止瀏覽器禁止js，保險起見，也可以如下
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel=‘stylesheet‘"> <noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>
為了避免有些瀏覽器會重新調用處理程序rel=‘stylesheet‘這個屬性，我們一般推薦如下寫法：
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.onload=null;this.rel=‘stylesheet‘"> <noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>
為了更好的兼容rel=preload，可以使用loadCSS ，github地址： https://github.com/filamentgroup/loadCSS
因此， 不考慮瀏覽器兼容問題的情況下 （考慮兼容問題，可以使用loadCss，這裏不多演示），我們對上面代碼再次進行優化：
<head> <link rel="stylesheet" href="/首屏加載css.css"> <link rel="preload" href="/不是首屏加載的css.css" as="style" onload="this.onload=null;this.rel=‘stylesheet‘"> </head> <body> <header>…</header> <main>…</main> <section class="comments">…</section> <section class="about-me">…</section> <footer>…</footer> </body>
轉自：https://www.tuicool.com/articles/Yfeeu2J
CSS加載性能優化