Effective前端2 加快頁面開啟速度

所有放在head標籤裡的js和css都會阻塞頁面渲染。如果這些css和js需要記在時間比較久，中間頁面會存在乙個空白期，嚴重影響到使用者體驗。

例如以下**：在head標籤內載入jquery的js檔案，

相比之下，html載入的時間只有2ms，所以這個js檔案至少頁面停留了1.2s的空白狀態。

2.使用html5的新增屬性defer，給script標籤價上defer屬性，一旦加上該屬性，script將會非同步載入，但不是馬上執行，而是等readystatechange變為interactive後按照順序執行。

（1）不要放太多base64放在css裡面

放太多base64在css裡面，會導致css急速膨脹，把一張3k的轉換為base64，體積將變為4k；如果你的css檔案中放了10張3k的base64，css檔案的體積將變為40k，可想而知，放的越多，越會增大css檔案大小，載入時間就會變長。

如下圖：

從上圖可以發現，轉base64後，體積增大了接近1/3，我們的目的是為了減小css、js載入時間的，而非增加時間（不考慮不同網速環境）。

（2）把css寫成內聯的

為什麼這樣說呢，我們寫css的時候，總是被告誡少些內聯樣式，易於維護。但是如果你的css只有10k或者30-40k,把它寫成內聯的未嘗不可，吧專案的css檔案gzip之後如果很小，完全可以把所有的css都寫成style標籤放到html裡面。

為了避免時間開銷，更好的使用者瀏覽速度，可以把css直接嵌到html裡面。

如果你的css檔案不是太大，加上gzip壓縮，放到html中會是乙個不錯的選擇。

（1）使用響應式

響應式的優點就是能夠根據瀏覽器的螢幕大小、裝置畫素比dpr、橫豎屏自動載入合適的

上述**實現如果螢幕的dpr=1的話載入1倍圖，而dpr=2則載入2倍圖。並且，如果瀏覽器不支援srcset屬性，會預設載入src裡面的。

網上說，在mac上的chorme會載入srcset裡面的2x的同時，還會去載入src裡面的那張，載入兩張。哈哈，由於本人比較窮，無mac，不能驗證了。有的小夥伴可以驗證下

另外html5新增的picture標籤，對實現響應式做了很多擴充套件。不想敲了，借用mdn說明

需要注意的是，使用picture標籤時必須使用img標籤，否則無法顯示。對picture的操作最後都是在img標籤上體現，例如onload事件是在img標籤出發的，picture和source是不會被瀏覽器layout的，他們的寬和高都是0.

在栗子2中，可以使用type=『image/webp』，從而使用webp格式的，webp在保持同等清晰度的情況下，體積可以減少一半，但是相容性不太好，目前只有chorme支援。但是如果檢查到不支援此格式，會預設選擇img標籤內的。

（2）延遲載入

這個是大眾常談的，基本上都很熟悉，簡單說一下

懶載入這時就排上用場了，初始載入的時候只載入首屏，不在視口內的，只有在使用者下滑至相應位置才去載入。

監聽scroll事件，**函式如下：
showimage(leftspace = 500)           
}          
}

使用ensureimgsrc函式把放出來

ensureimgsrc($container)  
var $img= $cotainer.find("img:not(.loading)");
if($img.length && !$img.attr('src').indexof('//')<0》)   
}

另外當被載入完畢後，要清楚監聽事件，否則會造成記憶體洩漏。

int（）
ensureimgsrc($container)
}

（3）壓縮和快取

gzip壓縮和伺服器設定快取。需要後台nginx配置。接觸不深，不做見解

（1）公升級到http/2

http2的有點在於對於乙個域只建立一次tcp連線，使用多路復用，傳輸多個資源，這樣就不用使用注入雪碧圖、合併js/css檔案等技術減少請求數，它可以同時載入多個資源，不用進行資源排隊。

（2）dns預讀取

提前解析dns，多個並行，不會堵塞頁面渲染，可以減少資源載入時間

（3）html優化

remove掉多餘注釋，刪除行前縮排，都會減少html的體積

（4）**優化