1、標籤的位置
按照慣例,所有<script>元素都應該放在頁面的<head>元素中,例如:
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!--這裏放內容-->
</body>
</html>
這種做法的目的是把所有外部文件(包含CSS文件和javascript文件)的引用都放在相同的地方。可是,在文檔<head>元素中包含所有的js文件,意味着必須等到全部javascript代碼都被下載、解析和執行完成之後,才能開始呈現頁面的內容(瀏覽器在遇到<body>標籤時纔開始呈現內容)。對於那些需要很多javascript代碼的頁面來說,這無疑會導致瀏覽器在呈現頁面時出現明顯的延遲,而延遲期間的瀏覽器窗口中將是一片空白。爲了避免這個問題,現代web應用程序一般都把全部javascript引用放在<body>元素中,放在頁面的內容後面,如下例所示:
<html>
<head>
<title> New Document </title>
</head>
<body>
<!--這裏放內容-->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
這樣,在解析包含的javascript代碼之前,頁面的內容將完全呈現在瀏覽器中。而用戶也會因爲瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了。
2、延遲腳本
HTML4.0爲<script>標籤定義了defer的屬性。這個屬性的用途是表明腳本在執行時不會影響頁面的構造。也就是說,腳本會延遲到整個頁面都解析完畢後在執行。因此,在<script>元素中設置defer屬性(如下面的例子),實際上與上面介紹的把<script>元素放在頁面底部的效果是一樣的。
<html>
<head>
<title> New Document </title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!--這裏放內容-->
</body>
</html>
這個例子中,雖然我們把<script>元素放在了文檔的<head>元素中,但其中包含的腳本將延遲到瀏覽器遇到</html>標籤後在執行。
不過,問題是並非所有瀏覽器都支持defer屬性,IE和firefox3.0是目前唯一支持defer屬性的主流瀏覽器。其他瀏覽器則會忽略這個屬性,不延遲腳本的執行
<script>標籤的位置/和延遲腳本
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
解18位身份證正則表達式
雪杉飞狐
2018-08-27 19:58:48
JavaScript basic code
雪杉飞狐
2018-08-27 19:58:48
javascript 身份證驗證及自動設置性別和年齡
雪杉飞狐
2018-08-27 19:58:47
js 日期格式化
iteye_20286
2018-08-27 19:25:26
javascript 幫助
iteye_20286
2018-08-27 19:25:26
cookie 的應用
iteye_20286
2018-08-27 19:25:26
fusion chart 報表製作
iteye_20286
2018-08-27 19:25:26
無刷新上傳文件
iteye_20286
2018-08-27 19:25:25
JS 鍵盤操作
iteye_20286
2018-08-27 19:25:25
javascript 獲取鼠標(光標)的座標位置 兼容IE/Firefox等瀏覽器
iteye_20286
2018-08-27 19:25:25
cookie示例:登陸頁面中的記住密碼功能
iteye_20286
2018-08-27 19:25:24
Jquery插件開發
cdqliweiwei
2018-08-27 19:16:46
DWR javascript調用java
jsj334811464
2018-08-27 19:11:03
Javascript事件簡介+取消默認動作
阿拉啦
2018-08-27 18:54:31
JavaScript執行多個window.onload產生too much recursion錯誤
阿拉啦
2018-08-27 18:54:30