網頁中引用的外部文件： 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文件也可以采用異步加載。