網頁效能最佳化：防止JavaScript、CSS阻塞瀏覽器渲染頁面

最後更新：2018-07-09 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：必須檔案 lin style 引入需要方案 class sync

　　網頁中引用的外部檔案： JavaScritp、CSS 等常常會阻塞瀏覽器渲染頁面。假設在 <head> 中引用的某個 JavaScript 檔案由於各種不給力需要2秒來載入，那麼瀏覽器渲染頁面的過程就會被阻塞2秒，直到該JS檔案下載並執行完後才繼續。

　　前端效能調優時必須排除任何潛在的渲染阻塞點，讓瀏覽器在最短時間內渲染出整體頁面。

1、JavaScript為何會阻塞？

<!doctype html><html>  <head>    <script type="text/javascript" src="page.js"></script>  </head>  <body>    <h1>Hello World</h1>  </body></html>

　　上述代碼中，當瀏覽器解析 script 標籤時，由於瀏覽器並不知道 page.js 將會對頁面做什麼改變，所以瀏覽器需要停止渲染，下載並執行 page.js 後再繼續渲染後面的內容。如果 page.js 的下載過程中出現任何延遲，也將影響整個頁面的渲染。

2、最佳化方案：

（1）Inline JavaScript：

　　如果頁面的初始渲染的確依賴於page.js，我們可以考慮使用內聯JavaScript。

<!doctype html><html>  <head>    <script type="text/javascript">    /* page.js的內容 */    </script>  </head>  <body>    <h1>Hello World</h1>  </body></html>

（2）延後載入：

　　如果頁面的初始渲染並不依賴於page.js，我們可以考慮延後載入page.js，讓其在頁面初始內容渲染完成後再載入。

<!doctype html><html>  <head>  </head>  <body>    <h1>Hello World</h1>    <script type="text/javascript" src="page.js"></script>  </body></html>

（3）非同步載入

　　HTML5允許我們給 script 標籤添加屬性： "async" 來告訴瀏覽器不必停下來等待該指令碼執行，什麼時候下載完什麼時候執行該指令碼就可以了。這樣的話瀏覽器會邊下載page.js邊渲染後面的內容。

<!doctype html><html>  <head>    <script type="text/javascript" src="page.js" async></script>  </head>  <body>    <h1>Hello World</h1>  </body></html>

　　然而如果某個JS被其他JS所依賴，那麼就不能使用非同步載入了。

<!doctype html><html>  <head>    <script type="text/javascript" src="jquery-1.11.3.min.js" async></script>    <script type="text/javascript" src="jq-plugin.js" async></script>  </head>  <body>    <h1>Hello World</h1>  </body></html>

　　由於使用非同步載入後，JS不再順序執行。上例中 jq-plugin.js 依賴於jQuery，如果 jq-plugin.js 先下載完成，此時jQuery還沒下載完，那麼瀏覽器就會先執行 jq-plugin.js 導致出錯。當然這類問題可以通過引入依賴管理來解決，這是另外一個主題，就不展開討論了。

3、CSS為什麼會阻塞？

　　由於CSS決定了DOM元素的樣式、布局，所以瀏覽器遇到CSS檔案時會等待CSS檔案載入並解析完後才繼續渲染頁面。

4、最佳化方案：

（1）Inline CSS

　　我們可以將那些頁面首屏渲染需要用到的CSS代碼加入Inline CSS。

（2）延後載入CSS

　　對於那些首屏渲染不需要用到的CSS，我們可以依舊使用檔案形式並在頁面內容渲染完成後再載入。

<!doctype html><html>  <head>    <style tpe="text/css">    .blue {        color: blue;    }    </style>  </head>  <body>    <div class="blue">      Hello, world!    </div>    <link href="other.css" rel="stylesheet" />  </body></html>

5、結論

　　在頁面載入時我們需要讓頁面內容儘快呈現給使用者，頁面初始渲染所需要的JS和CSS可以直接在 <head> 標籤中以代碼形式插入。

　　所有的外部檔案引用可以放在頁面內容之後，對於JS檔案也可以採用非同步載入。

網頁效能最佳化：防止JavaScript、CSS阻塞瀏覽器渲染頁面

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More