怎樣從你的網站移除JavaScript渲染阻塞

veryszhang發表於2015-11-23
網站JavaScript

怎樣從你的網站移除JavaScript渲染阻塞

你有沒有建立完成一個網站後喜歡它的不得了？ 然後又因為它載入的很緩慢而抓狂？導致這個問題或許有各種各樣的原因，但是最常見的一個卻是——JavaScript渲染阻塞（render-blocking JavaScript）。

那麼也許你會想問：什麼是JavaScript渲染阻塞？如果我們拆看來看，它就是渲染（載入）和阻塞，意思顯而易見，它就是說Javascript阻塞了頁面的渲染。Javascript這玩意很可怕，它可以強有力的改善視覺體驗，卻也可以變成一個時間漩渦。

這個“時間漩渦”不僅僅不招你的使用者喜歡；它也損害了Google們展示你的機會。2010年起，載入速度已經被納入Google演算法從而影響排名。話不多說，今天我們將重點放在如何幫你的網站排除JavaScript渲染阻塞。

識別

第一步當然是識別那些“禍害”JavaScript。一個最簡單的方法就是使用Google提供的 PageSpeed Insights。這個Google工具會為你提供的頁面快速的展示一個精確的阻塞檔案列表。它的準則就是快速的讓使用者第一眼看到該看到的。這就意味著如果一個JavaScript功能如果和使用者第一眼看到的東西無關，它就不應該被列在這個頁面前面，特別是列在<head>裡面。 enter image description here

單擊“顯示怎樣修復”連結將會為我們展開一個需要評估的JavaScript列表。我們最常用到的JavaScript是JQuery,所以你可能會看到這個畫面。 enter image description here

選擇最好的方法

一旦你知道了哪些指令碼需要被移動，那麼就想需要決定該怎樣修復它們了。一般情況下有兩種主要的方法可供選擇，第一種方式就是“內聯”JavaScript了，也就是把JavaScript和你的HTML寫到一塊。如果這個指令碼很小，而且這是一個簡單的頁面的話，這當然是最好的選項。

另一個方法是延遲（defer )這些指令碼。也就是說你可以延遲一個指令碼的載入，直到頁面載入完成時再開始載入。當這個指令碼不是重要的，不是第一畫面所需要的時候，這個方法無疑是最好的。

決定把它移動到什麼地方

（這篇文章前面部分全部來自HubSpot網站部落格http://blog.hubspot.com/marketing/remove-javascript-rendering-block 的翻譯, 讀到這段時發現後面是HubSpot自己的廣告，呵呵）到這個地方顯然本文沒有完結，只能我自己來做個狗尾續貂了。其實，我們在一個頁面中的什麼地方寫下一個合適的<script src="..." >標籤很重要。在建設一個網站的最開始，我們最長做的事就是為一個網站目錄中建立一個可以重用的header檔案和一個footer檔案。而往往我們就喜歡講很多JavaScript指令碼新增在header中，因為這樣很方便我們在其他網頁中隨時使用。但是其實我們大多數網頁的第一畫面的佈局和風格都只是來自CSS，JavaScript都是在等響應的DOM載入完成的時候才執行的。

所以，與其修復JavaScript阻塞，不如我們在建立這個網站的時候多做一些考慮：到底這個JavaScript指令碼應該新增在header還是footer中，或者是一個特定的頁面上，甚至是一個div的後面……

最後，還有W3C，W3C這個組織為前端開發提供了很多標準，但是很多時候只是提出建議型的一個指導，前端開發中將W3C標準刻板的應用到網站建設中其實常常也會為我們帶來不少苦惱。W3C的學習更多的時候是需要我們領會它的精神，而不是把它死搬硬套。

相關文章