1) 避免head標籤js堵塞：

所有放在head標籤裡面的js和css都會堵塞渲染；如果這些css和js需要載入很久的話，那麼頁面就空白了；

用google的cdn載入一個jQuery檔案是訪問不了的，所以標籤一直在轉圈，頁面沒有任何顯示；

有兩種解決辦法，第一種是把script放到body後面，這也是很多網站採取的方法。第二種是給script加defer或者async的屬性，一旦script是defer或者async延遲的，那麼這個script將會非同步載入，但不會馬上執行，會在readystatechange變為Interactive後按順序依次執行；

兩者相同點：

• 載入檔案時不阻塞頁面渲染
• 對於inline的script無效
• 使用這兩個屬性的指令碼中不能呼叫document.write方法
• 有指令碼的onload的事件回撥

兩者不同點：

• async下，js一旦下載好了就會執行，所以很有可能不是按照原本的順序來執行的。如果js前後有依賴性，用async，就很有可能出錯。
• 如果一個script加了defer屬性，即使放在head裡面，它也會在html頁面解析完畢之後再去執行，也就是類似於把這個script放在了頁面底部。

(2) 減少head裡面的css資源：

css必須放在head標籤裡面，如果放在body裡面會造成對layout好的dom進行重排造成頁面閃爍；但是一旦

放在head標籤裡面又會堵塞頁面渲染；所以要儘可能的減小css體積；

例：不要放太多base64在css裡面，webpack構建工具常常會配置圖片體積小於多少的直接轉換成base64載入，這

裡是挺影響效能的，一個是不能用到快取機制，另一個就是加大了css的體積；個人建議上線專案直接把圖片用cdn託

管；

(3)延遲載入圖片：

對於很多網站來說，圖片往往是佔用最多流量和頻寬的資源；

(4) DNS解析優化：

DNS查詢需要花費大量時間來返回一個主機名的IP地址；

在我們的網站中，可能會載入到很多個域的東西，比如引入了百度地圖啊之類的sdk和一些自己的子域名服務；第一次開啟網站時要做很多次DNS查詢；DNS預讀取能夠加快網頁開啟時間；

1. 優化影象

　　影象對於吸引訪客的關注是很重要的。但是你新增到頁面上的每一張圖片都需要使用者從你的伺服器下載到他們的電腦上。這無疑增加了頁面的載入時間，因此很可能讓使用者離開你的網站。所以，優化影象是非常必要的。

　　過大的影象需要的下載時間更多，因此要確保影象儘可能的小。可以使用影象處理工具如PS來減小顏色深度、剪下影象到合適的尺寸等。

　2. 去掉不必要的外掛

　　一個非常值得關注但經常被忽略的因素是你網站安裝的外掛。如今，大量免費的外掛誘導網站開發者新增很多不必要的功能。您安裝的每個外掛都需要伺服器處理，從而增加了頁面載入時間。所以禁用和刪除不必要的外掛。

　　然而，有些外掛是必須的，如社交分享外掛，你可以選擇CMS內建的社交分享功能來代替安裝外掛。

　3. 減少DNS查詢(DNS lookups)

　　減少DNS查詢是一個WEB開發人員可以用了頁面載入時間快速有效的方法。DNS查詢需要話費很長的時間來返回一個主機名的IP地址。而瀏覽器在查詢結束前不會進行任何操作。對於不同的元素可以使用不同的主機名，如URL、影象、指令碼檔案、樣式檔案、FLASH元素等。具有多種網路元素的頁面經常需要進行多個DNS查詢，因而花費的時間更長。

　　減少不同域名的數量將減少並行下載的數量，加速你的網站

　4. 最小化重定向

　　重定向增加了額外的HTTP請求，因此也增加了頁面載入時間。然而有時重定向卻是不可避免的，如連結網站的不同部分、儲存多個域名、或者從不存在的頁面跳轉到新頁面。

　　重定向增加了延遲時間，因此要儘量避免使用它。檢查是否有損壞的連結，並立即修復。

　5. 使用內容分發網路（Content Delivery Network CDN）

　　伺服器處理大流量是很困難的，這最終會導致頁面載入速度變慢。而使用CDN就可以解決這一問題，提升頁面載入速度。

　　CDN是位於全球不同地方的高效能網路服務，複製你網站的靜態資源，並以最有效的方式來為訪客服務。

　6. 把CSS檔案放在頁面頂部，而JS檔案放在底部

　　把CSS檔案在頁面底部引入可以禁止逐步渲染，節省瀏覽器載入和重繪頁面元素的資源。

　　JavaScript是用於功能和驗證。把JS檔案放在頁面底部可以避免程式碼執行前的等待時間，從而提升頁面載入速度。

　　這些都是一些減少頁面載入時間和提高轉換率的方法。在某些情況下，需要JavaScript在頁面的頂部載入（如某些第三方跟蹤指令碼）。

　7. 利用瀏覽器快取

　　瀏覽器快取是允許訪客的瀏覽器快取你網站頁面副本的一個功能。這有助於訪客再次訪問時，直接從快取中讀取內容而不必重新載入。這節省了向伺服器傳送HTTP請求的時間。此外，通過優化您的網站的快取系統往往也會降低您的網站的頻寬和託管費用。

　8. 使用 CSS Sprites 整合影象

　　多影象的網站載入時間比較久。其中一個解決方法就是把多個影象整合到少數幾個輸出檔案中。你可以使用 CSS Sprites 來整合影象檔案。這樣就減少了在下載其他資源時的往返次數和延遲，從而提高了站點的速度。

　9. 壓縮CSS和JavaScript

　　壓縮是通過移除不必要的字元（如TAB、空格、回車、程式碼註釋等），以幫助減少其大小和網頁的後續載入時間的過程。這是非常重要的，但是，你還需要儲存JS和CSS的原檔案，以便更新和修改程式碼。

其他頁面優化技巧，html別巢狀太多層，加重頁面layout的壓力；css選擇器的合理運用，減少匹配的計算量；js中別濫用閉包，會加深作用域鏈，增加變數查詢時間；減少http請求之類的等等；

1. <link rel="dns-prefection" href="https://www.baidu.com">  

在head中寫上幾個link標籤，對標籤中的地址提前解析DNS，這個解析是並行發生的，不會堵塞頁面渲染；