減少渲染阻塞的js和css
為了產生最快的渲染速度，你需要減少關鍵資源的熟練，減少下載所有關鍵資源所需要的網絡往返的數量，減少關鍵資源大小總和的字節數！
異步執行js
js資源會默認進行解析阻塞，除非使用async關鍵字。
解析阻塞強迫瀏覽器等待CSSOM並且停止DOM的構造，這將會大大延遲頁面的渲染。
異步腳本解鎖了頁面的阻塞解析且不阻塞cssom提前於js腳本的執行。通常，js腳本被異步執行意味着js文件對頁面第一次渲染不重要。
Avoid synchronous server calls
使用 navigator.sendBeacon() 方法限制使用unload處理函數使用XMLHttpRequest來發送的數據，它們通常會趁你不注意來減慢頁面的傳輸。
下面的代碼展示了怎樣使用navigator.sendBeacon()來發送數據到服務器，在pagehide處理函數而不是unload處理函數。
<script> function() { window.addEventListener('pagehide', logData, false); function logData() { navigator.sendBeacon( 'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop', 'Sent by a beacon!'); } }(); </script>
最新的fetch()方法提供了一個簡單的方法來異步請求數據。
因為這個方法不是對所有瀏覽器兼容，所以你應該使用特征檢測來測試這個方法是否可以使用。
這個方法使用Promises來處理響應，而不是使用一大堆事件處理函數。
從Chrome43開始，一個fetch響應是一個流對象（a stream object），這意味着我們調用json()同樣返回一個Promise
<script> fetch('./api/some.json') .then( function(response) { if (response.status !== 200) { console.log('Looks like there was a problem. Status Code: ' + response.status); return; } // Examine the text in the response response.json().then(function(data) { console.log(data); }); } ) .catch(function(err) { console.log('Fetch Error :-S', err); }); </script>
fetch()方法同樣可以處理POST請求
<script> fetch(url, { method: 'post', headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" }, body: 'foo=bar&lorem=ipsum' }).then(function() { // Aditional code }); </script>
推遲js的解析
不重要的腳本可推遲執行解析。
避免長時間運行js
避免長時間運行js，因為長時間運行js將導致CSSOM，DOM和渲染頁面的阻塞。如果必須執行一系列的js文件，可以將其細分成更多的狀態來允許瀏覽器在不同的狀態中間執行其他操作。
優化css使用
css被要求用來構造render tree並且在頁面的最初渲染的時候頁面css阻塞js的執行。
你需要確保不必要的css文件被標記為不必要（例如 @media參數設置等），還要確保關鍵css文件最小化，以及關鍵css文件加載時間最小化。
將css放置在文檔頭部
所有的css資源應該被放在文檔頭部，這樣瀏覽器可以盡快的執行它們。
避免使用@import
CSS 導入 (@import) 可以檢測和導入其他的css文件，但是最好不要使用，因為被導入的文件只有在@import規則本身被接受和解析后才會執行，增加了網絡往返。
將css寫在文檔內部
為了最好的性能，你可能會考慮將css寫在文檔內部，因為這樣將會減少外部css文件下載時所耗費的網絡往返次數，且只有一個HTML文檔被當成關鍵資源。