網頁性能優化：防止JavaScript、CSS阻塞瀏覽器渲染頁面
網頁中引用的外部文件： 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">
/*
（2）推遲加載：
如果頁面的初始渲染並不依賴於page.js，我們可以考慮推遲加載page.js，讓其在頁面初始內容渲染完成後再加載。
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
<script type="
（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阻塞瀏覽器渲染頁面