1. 程式人生 > >使用指令碼元素(執行順序,noscript)

使用指令碼元素(執行順序,noscript)

設定了src屬性的script元素不能含有任何內容。不能用同一個script元素既定義內嵌指令碼有引用外部指令碼。

<script src="simple.js"></script>

例子中的script元素儘管沒有任何內容,還是使用了結束標籤。如果用自閉和標籤引用外部指令碼,瀏覽器則將忽略這個元素,不會載入引用的檔案。

推遲指令碼的執行

預設情況下,瀏覽器一遇到script元素就會暫停處理HTML文件,轉而載入指令碼檔案並執行其中的指令碼。在指令碼執行完畢後瀏覽器才會繼續解析HTML。

例如:

simple.js

document.getElementById
("test").innerHTML = "This is test";

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試JavaScript的載入順序</title>
    <script src="simple.js"></script>
</head>
<body>
    <div id="test"></div>
</body> </html>

此例中不會顯示任何內容,因為,瀏覽器在載入和執行simple.js的時候,下面的HTML文件內容還沒有被解析。指令碼找不到id為test的元素,所以也就不起作用。

1.通過改變script元素的位置解決指令碼的時間安排。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試JavaScript的載入順序</title>
</head>
<body
>
<div id="test"></div> <script src="simple.js"></script> </body> </html>

2.使用帶defer屬性的script元素

瀏覽器在遇到帶有defer屬性的元素時,會將指令碼的載入和執行推遲到HTML文章中所有元素都已得到解析之後。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試JavaScript的載入順序</title>
    <script defer src="simple.js"></script>
</head>
<body>
    <div id="test"></div>
</body>
</html>

提示:defer屬性只能用於外部指令碼檔案,它對文件內嵌指令碼不起作用

非同步執行指令碼

當某一指令碼自成一體,不需要於HTML文件中的內容相互作用時,可以使用async屬性,
瀏覽器將在繼續解析HTML文件中的其他元素(包括其他script元素)的同時,非同步載入和執行指令碼。如果運用得當,這可以大大提高整體載入效能。

<script async src="simple.js"></script>

注:使用async屬性的一個重要後果就是頁面中的指令碼可能不再按定義它們的次序執行,因此指令碼使用了其他指令碼定義的函式或值,那就不宜使用async屬性。

noscript元素

noscript元素可以用來向禁用了JavaScript或瀏覽器不支援JavaScript的使用者顯示一些內容。與script元素類似,noscript元素所屬型別取決於它在文件中的內容。

例如:

<noscript>
    <h1>JavaScript is required!0</h1>
    <p>You cannot use this page without Javascript</p>
</noscript>

一個頁面中可以加入多個noscript元素

使用noscript元素重定向瀏覽器

<noscript>
    <meta http-equiv="refresh" content="0;http://www.baidu.com">
</noscript>

這段程式碼會在不支援JavaScript或者禁用了JavaScript的瀏覽器試圖載入頁面時將使用者引至www.baidu.com網站。