我認為一個前端工程師是否優秀，很大程度上取決於對前端性能上優化的功力。所以性能優化對前端真的很重要！！！
本文介紹了什么是阻塞、為什么會阻塞？阻塞優化常用的5種方式以及他們的注意事項。
瀏覽器渲染阻塞與優化
什么是阻塞？在頁面中我們通常會引用外部文件，而瀏覽器在解析HTML頁面是從上到下依次解析、渲染，如果<head>中引用了一個a.js文件，而這個文件很大或者有問題，需要2秒加載，那么瀏覽器會停止渲染頁面（此時是白屏顯示，就是頁面啥都沒有），2秒后加載完成才會繼續渲染，這個就是阻塞。
為什么會阻塞？
因為瀏覽器不知道a.js中執行了哪些腳本，會對頁面造成什么影響，所以瀏覽器會等js文件下載並執行完成后才繼續渲染，如果這個時間過長，會白屏。
CSS文件也一樣，因為CSS文件會對DOM的樣式，布局，色彩，效果產生影響，所以瀏覽器會等CSS文件下載並執行完成后繼續。
為了頁面的性能，要避免阻塞。
阻塞優化-推遲加載、異步加載。
推遲加載(延遲加載)
如果頁面初始的渲染並不依賴於js或者CSS可以用推遲加載，就是最后在加載js和css，把引用外部文件的代碼寫在最后。比如一些按鈕的點擊事件，比如輪播圖動畫的腳本也可以放在最后。
原理：因為瀏覽器默認是同步加載（這是為了避免重復觸發“回流”和“重繪”），此時瀏覽器會從上到下逐條代碼的加載、解析、渲染、執行。
1 <html> 2 <head> 3 </head> 4 <body> 5 xxxxxxxxxxxxxxx 6 <h1>推遲加載</h1> 7 <script type="text/javascript" src="a.js"></script> 8 <link href="a.css" rel="stylesheet" /> 9 </body> 10 </html>
defer延遲加載：
在文檔解析完成開始執行，並且在DOMContentLoaded事件之前執行完成，會按照他們在文檔出現的順序去下載解析。效果和把script放在文檔最后</body>之前是一樣的。
注：defer最好用在
引用
外部文件中使用，用了defer不要使用document.write()方法;使用defer時最好不要請求樣式信息，因為樣式表可能尚未加載，瀏覽器會禁止該腳本等待樣式表加載完成，相當於樣式表阻塞腳本執行。
異步加載(非阻塞加載)
注：a.js文件中的代碼如下，這樣就會造成阻塞，因為如果我不點擊確定，就無法繼續渲染。
1 alert("已暫停加載")
2 alert("開始加載")
1）async異步加載：就是告訴瀏覽器不必等到加載完外部文件，可以邊渲染邊下載，什么時候下載完成什么時候執行。用法就是“async“
1 <script type="text/javascript" src="a.js" async></script>
注：實際測試中IE10+才支持，
火狐，谷歌，Microsoft支持；
用了async不要使用document.write()方法;使用async時最好不要請求樣式信息，原因和defer一樣。
注2：async 在w3school中介紹是IE9就能支持，而IE9也是號稱能支持，但是實際是不能完全支持的。
2）script dom element法：這個方法是用js動態創建一個script元素添加在document中。
注:
支持全部瀏覽器(因為IE低版本IE10- 是單線程，所以要修改a.js才能顯示正確的效果)
1 setTimeout("alert('異步加載成功')",2000) //測試IE時候a.js文件要修改
1 <script type="text/javascript">
2 (function() {
3 var s = document.createElement('script');
4 s.type = 'text/javascript';
5 s.async = true; //這句可以刪除，但是效果不變。
6 s.src = 'js/a.js';
7 var x = document.getElementsByTagName('script')[0];
8 x.parentNode.insertBefore(s, x);
9 })();
10 </script>
注意：
這種方法會阻止onload事件，比如下面的代碼，會等到a.js中的彈出框彈出后再執行。
1 <script type="text/javascript">
2 window.onload=function(){
3 document.getElementById('div').innerHTML="onload完成"
4 }
5 </script>
6 //寫在html中
3）onload時異步加載：這個和
script dom element法差不多但是他不是同時執行js和html，他是等html的文件，圖片之類的、頁面所有的資源全部加載完成后再下載執行js，這樣的方法可以避免阻塞onload事件的觸發。（兼容所有瀏覽器）
1 (function() {
2 function async_load(){
3 var s = document.createElement('script');
4 s.type = 'text/javascript';
5 s.async = true;
6 s.src = 'js/yibujiaz.js';
7 var x = document.getElementsByTagName('script')[0];
8 x.parentNode.insertBefore(s, x);
9 }
10 if (window.attachEvent)
11 window.attachEvent('onload', async_load);
12 else
13 window.addEventListener('load', async_load, false);
14 })();
注：DOMContentLoaded與onload事件不同，
DOMContentLoaded是頁面解析完成，頁面的dom元素可以使用，但是頁面的圖片、視頻等資源可能還沒加載完成
我上面介紹的優化方式是常用的，除此之外還有其他的，比如異步加載還有AJAX異步加載，body onload異步加載等，這些用的比較少，有興趣的工程師可以去查查相關資料。（如果你在博客園查基本上只要看一篇文章就好了，其他的基本上都說一樣的，改都不會改；其實全網都差不多，都說互相轉載復制的）。
a.js全部代碼
1 // setTimeout("alert('異步加載成功')",2000)
2 // alert("已暫停加載")
3 // alert("開始加載")
HTML全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>異步加載</title>
<!-- <script type="text/javascript" src="js/yibujiaz.js" async></script> -->
<script type="text/javascript">
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'js/yibujiaz.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>
<!-- <script type="text/javascript">
(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'js/yibujiaz.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();
</script>
<script type="text/javascript">
window.onload=function(){
document.getElementById('div').innerHTML="onload完成"
}
</script> -->
<style type="text/css">
div{
width:200px;
height:200px;
background-color: blue;
margin:0 auto;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>