默認情況下javaScript是同步加載的,同步加載js文件時會阻塞後續程序的執行,影響頁面渲染效率。解決問題兩個方法:
方法一:將js文件在html頁面最後引入,同步加載時會先渲染頁面,最後執行js
<body>
<div>...</div>
<script src="index.js"></script>
</body>
方法二:採用異步加載js文件
常見解決方法有四種:
1.使用jQuery中的$(document).ready方法(必須引入jQuery)
<head>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("加載完成!");
});
</script>
</head>
無兼容性問題
2.設置<script>標籤的defer屬性
defer 屬性規定是否對腳本執行進行延遲,直到頁面加載爲止。
可將 defer 屬性加入到 <script> 標籤中,以便加快處理文檔的速度。因爲瀏覽器知道它將能夠安全地讀取文檔的剩餘部分而不用執行腳本,它將推遲對 腳本的解釋,直到文檔已經顯示給用戶爲止。
<script type="text/javascript" defer="defer" src="index.js"> </script>
無兼容性問題,js腳本可按順序執行
3.設置<script>標籤的async屬性
async是html5的屬性,async 屬性規定一旦腳本可用,則會異步執行。
<script type="text/javascript" async="async" src="index.js"></script>
1、HTML5中新增的屬性,Chrome、FF、IE9&IE9+均支持(IE6~8不支持)。此外,這種方法不能保證腳本按順序執行。2、async 屬性僅適用於外部腳本(只有在使用 src 屬性時)。
4.動態創建<script>標籤
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
var tmp = document.getElementsByTagName('script')[0];
tmp.parentNode.insertBefore(s, tmp);
})();
</script>
</head>
<body>
<img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
</body>
</html>
兼容所有瀏覽器