CSS性能優化
相信在大家平常開發頁面的時候，UI給你的PSD總是各種奇葩字體，PM的特殊需求，2M的背景圖片，懶加載窗口抖動，以及煩心的代理網速來加載CSS。
有種拿刀先去砍UI再砍PM的沖動（開個小玩笑）。
網速快的人可能感覺不出來，但是有些網速慢的就不一樣了。CSS可能托管的網站有問題，請求半分鐘也是有可能的。
眾所周知，CSS的加載會阻塞瀏覽器渲染或是引起瀏覽器重繪，目前業界普遍推薦把CSS放到<head>中，防止在CSS還沒加載完，DOM就已經繪制出來了，造成CSS加載完成後的重繪。那在現代瀏覽器中我們有沒有辦法提高首屏渲染速度那？
字體文件沒加載出來，無法進行渲染；
1 <html> 2 <head> 3 <!-- headStyle.css中存在字體文件webfont.woff2 --> 4 <link rel="stylesheet" type="text/css" href="/Style.css"> 5 </head> 6 <body> 7 <p>Text</p> 8 <link rel="stylesheet" type="text/css" href="/bodyStyle.css"> 9 </body> 10 </html>
瀏覽器是從上往下解析HTML文檔，當發現Style.css的時候，停止解析HTML，下載Style.css，Style.css發現webfont.woff2後進行下載，並繼續解析CSS StyleSheet，解析完畢後繼續解析HTML，發現P標簽後進行渲染，當瀏覽器發現bodyStyle.css時，就會下載Style.css，解析CSS，然後更新CSSStyleSheet，這時會引起一次重繪。當字體下載完畢的時候也會引起一次重繪。
這個過程中，有兩個非常嚴重的問題。一、如果Style.css文件很大，瀏覽器需要解析很多行CSS後才能還有個字體文件需要下載，其實此時已經很晚了，字體下載時間稍長一點，就會出現我前面截圖提到的問題。二、bodyStyle.css中如果存在p標簽對應的樣式，那p標簽的樣式會在bodyStyle.css解析完成後，改變一次樣式，很影響體驗。 第一個方法：減少CSS下載時間；<link rel="preload" href="/webfont.woff2" as="font">
Preload
因為CSS已經在head裏了，不需要再加Preload了；但是css中用到的字體文件，一定要在所有css之前preload上;
主頁的CSS內聯，非必要CSS異步加載；
function LoadStyle(url) {
try {
document.createStyleSheet(url)
} catch(e) {
var cssLink = document.createElement(‘link‘);
cssLink.rel = ‘stylesheet‘;
cssLink.type = ‘text/css‘;
cssLink.href = url;
var head = document.getElementsByTagName(‘head‘)[0];
head.appendChild(cssLink)
}
}
如果你使用webpack，使用import函數,官網教程在這裏：https://doc.webpack-china.org
// 在index.js模塊中直接引入css import ‘style.css‘
// 在需要index.js模塊的地方
improt(‘path-of-index.js‘).then(module => {})
webpack打包後，其實是把style.css打包進了index.js，在異步加載a.js的時候，會將style.css中的代碼插入haed標簽中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Faster</title>
<link rel="dns-prefetch" href="//cdn.cn/">
<link rel="preload" href="//cdn.cn/webfont.woff2" as="font">
<link rel="preload" href="//cdn.cn/Page1-A.js" as="script">
<link rel="preload" href="//cdn.cn/Page1-B.js" as="script">
<link rel="prefetch" href="//cdn.cn/Page2.js">
<link rel="prefetch" href="//cdn.cn/Page3.js">
<link rel="prefetch" href="//cdn.cn/Page4.js">
<style type="text/css">
/* 首頁用到的CSS內聯 */
</style>
</head>
<body>
<script type="text/javascript" src="//cdn.cn/Page1-A.js" defer></script>
<script type="text/javascript" src="//cdn.cn/Page1-B.js" defer></script>
</body>
</html>
本篇只是加入了CSS和字體,我心中終極完美的頁面HTML結構就是這樣了
CSS性能優化