前端提升頁面載入速度
效能黃金法則：
只有10%~20%的終端使用者響應時間花在了下載HTML文件上。其餘的80%~90%時間花在了下載頁面中的所有元件上。
提升載入速度的方式：
一、減少HTTP請求
(1).合併指令碼 和樣式表
將多個樣式表或者指令碼檔案合併到一個檔案中，可以減少HTTP請求的數量從而縮短效應時間。 不過：合併所有的樣式檔案或者指令碼檔案可能會導致在一個頁面載入時載入了多於自己所需要的樣式或者指令碼，對於只訪問該網站一個頁面的人來說反而增加了下載量，所以大家應該自己權衡利弊。
(2).字型圖示
(3).雪碧圖
(4).圖片地圖
知識點連結：http://www.w3school.com.cn/tags/att_img_usemap.asp，將所有點選提交到同一個url，同時提交使用者點選的x、y座標，伺服器端根據座標對映響應
二、使用CDN
CDN（內容釋出網路）是一組分佈在多個不同地理位置的Web伺服器，如果應用程式web伺服器離使用者更近，那麼HTTP請求的響應時間將縮短。
三、使用快取Expires和Cache-Control
瀏覽器在第一次訪問頁面時載入的資源會快取起來，第二次訪問判斷在快取中是否已有該資源並且有沒有更新過，如果已有該資源且沒有更新過，則去快取去取，這樣減少了下載資源的時間。原理上是通過HTTP Rquest Header中的 if-modified-since 和Response Headers中的last-modified來實現，HTTP請求把if-modified-sincede 時間傳給服務端，服務端把last-modified時間與之對比，如果相同，則意味著檔案沒有改動，則返回304，瀏覽器則從快取中獲取資源，無需下載。雖然這種方法減少了已快取資源的下載時間，但是仍然發起了一次http請求。expires在服務端配置，新增的是該資源過期的日期，瀏覽器會根據該過期日期與客戶端時間對比，到期 了再重新讀取，expires時間可能存在客戶端時間跟服務端時間不一致的問題，最好與Cache-Control結合使用。更多詳細請參考：https://www.jianshu.com/p/f331d5f0b979
四、對HTTP傳輸進行壓縮
在HTTP請求中，accept-encoding: gzip, deflate, sdch, br是指客戶端瀏覽器（這裡是我的chrome瀏覽器）支援的壓縮方式。
Accept-Encoding: gzip,deflate...如果Web伺服器看到請求中有這個頭，就會使用客戶端列出來的方法中的一種來進行壓縮。
更多詳情請參考：https://www.jianshu.com/p/74c10af7707d
代理快取
五、樣式表放頭部
放在頭部對於實際頁面載入的時間並不能造成太大影響，但可以減少頁面首屏出現的時間，使頁面內容逐步呈現，改善使用者體驗，防止“白屏”。
我們總是希望頁面能夠儘快顯示內容，為使用者提供視覺化的回饋，這對網速慢的使用者來說是很重要的。
將樣式表放在文件底部會阻止瀏覽器中的內容逐步出現。為了避免當樣式變化時重繪頁面元素，瀏覽器會阻塞內容逐步呈現，造成“白屏”。這源自瀏覽器的行為：如果樣式表仍在載入，構建呈現樹就是一種浪費，因為所有樣式表載入解析完畢之前不需繪製任何東西
六、指令碼放底部
與樣式表相同，指令碼放在底部對於實際頁面載入的時間並不能造成太大影響，但是這會減少頁面首屏出現的時間，使頁面內容逐步呈現。
js的下載和執行會阻塞Dom樹的構建（嚴謹地說是中斷了Dom樹的更新），所以script標籤放在首屏範圍內的HTML程式碼段裡會截斷首屏的內容。
因為指令碼可能修改頁面內容，因此瀏覽器會等待；另外，也是為了保證指令碼能夠按照正確的順序執行，因為後面的指令碼可能與前面的指令碼存在依賴關係，不按照順序執行可能會產生錯誤。
七、合理使用外部js/css
內聯指令碼或者樣式可以減少HTTP請求，按理來說可以提高頁面載入的速度。然而在實際情況中，當指令碼或者樣式是從外部引入的檔案，瀏覽器就有可能快取它們，從而在以後載入的時候能夠直接使用快取，而HTML文件的大小減小，從而提高載入速度。
這時候就要分情況來看，如果一個使用者每個月只訪問你的網站一兩次，那麼這種情況下內聯將會更好。而如果該使用者能夠產生很多頁面瀏覽量，那麼快取的樣式和指令碼將會極大減少下載的時間，提交頁面載入速度。
八、減少DNS查詢
當我們在瀏覽器的位址列輸入網址（譬如： www.linux178.com） ，然後回車，回車這一瞬間到看到頁面到底發生了什麼呢？
域名解析 --> 發起TCP的3次握手 --> 建立TCP連線後發起http請求 --> 伺服器響應http請求，瀏覽器得到html程式碼 --> 瀏覽器解析html程式碼，並請求html程式碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進行渲染呈現給使用者
域名解析是頁面載入的第一步，那麼域名是如何解析的呢？見文章：（後面補上，or自行百度）
DNS也是開銷，通常瀏覽器查詢一個給定域名的IP地址要花費20~120毫秒，在完成域名解析之前，瀏覽器不能從伺服器載入到任何東西。那麼如何減少域名解析時間，加快頁面載入速度呢？
當客戶端DNS快取（瀏覽器和作業系統）快取為空時，DNS查詢的數量與要載入的Web頁面中唯一主機名的數量相同，包括頁面URL、指令碼、樣式表、圖片、Flash物件等的主機名。減少主機名的 數量就可以減少DNS查詢的數量。
而減少唯一主機名的數量會潛在減少頁面中並行下載的數量，這樣減少主機名和並行下載的方案會產生矛盾，需要大家自己權衡。建議將元件放到至少兩個但不多於4個主機名下，減少DNS查詢的同時也允許高度並行下載。
九、懶載入
對於一些圖片，費首屏的，後面scroll到的時候再載入
十、按需載入
模組化開發，只需載入用到的資源
十一、預載入
預載入是在瀏覽器空閒時請求將來可能會用到的頁面內容（如影象、樣式表和指令碼）。使用這種方法，當用戶要訪問下一個頁面時，頁面中的內容大部分已經載入到快取中了，因此可以大大改善訪問速度。