HTML的script標籤

在 HTML 頁面中插入一段 JavaScript:

這句話可能大家一開始根本不瞭解JavaScript,是什麼?

在我的瞭解中JavaScript並不是用java語言開發的,人家用的是c語言和另外一種語言的結合體,就像印度和印度尼西亞根本不是同一個地方。

在頁面中插入腳本,意味着頁面可以實現更多的和用戶交互的內容,更高級

<script type="text/javascript">
document.write("Hello World!")
</script>

這段代碼在HTML中可以插入到你想要的指定位置,意味着頁面執行時一行一行掃描下來的時候,到底是先執行腳本語句還是先執行html語句是由代碼編寫者來決定的。

<script></script> 標籤用於定義客戶端腳本,比如:上面的是這段代碼,寫在html 內部發揮作用,也可以通過 src 屬性插入外部腳本文件(xxx.js)

延遲執行腳本

HTML的操作是單線操作的,當一行一行掃描代碼的時候一旦觸碰到腳本語句就會先去執行腳本語句的內容,執行結束後再解析下一行HTML內容。但是有時候,我們可能需要讓HTML文檔先完成解析,最後再執行腳本…,也就是說將整個網頁的DOM對象執行一遍後,再執行中間嵌入的腳本,因此我們只需要在<script type="text/javascript" src="xxx.js" defer ></script> 屬性中引入defer屬性對其延遲執行即可,不過需要注意的一點是,defer屬性只能用於外部腳本文件,對文檔直接內嵌根本不起作用
在這裏插入圖片描述

異步執行腳本

上面說到HTML的操作是單線操作的,如果說爲了執行腳本就暫停加載對用戶的體驗無疑使非常差的,因此可以<script type="text/javascript" src="xxx.js" async ></script> 引入async屬性,用於告訴瀏覽器該腳本可以異步執行,因此HTML的解析就不會停下來等待,因爲HTML解析的過程是怎麼的呢?先是獲取腳本,CPU再執行腳本,但是獲取腳本的時候CPU並沒有執行,相當於空閒出來了。同樣async屬性只能用於外部腳本文件,對文檔直接內嵌根本不起作用
在這裏插入圖片描述

當瀏覽器不支持JavaScript的時候

HTML <noscript></noscript> 標籤,因爲有些老老老版本的確不支持JavaScript,或者不小心在瀏覽器設置中關閉了

<body>
  ...
  ...

  <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script>
  
  <noscript>Your browser does not support JavaScript!</noscript>
  ...
  ...
</body>

在谷歌瀏覽器的 高級–>內容設置/網站設置–>JavaScript–>屏蔽

在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章