首頁 > web前端 > js教程 > 主體

在HTML中使用JS方法總結

php中世界最好的语言
發布: 2018-05-25 11:38:28
原創
2213 人瀏覽過

這次帶給大家在HTML中使用JS方法總結,在HTML中使用JS的注意事項有哪些,以下就是實戰案例,一起來看一下。

前言

JavaScript是瀏覽器的內建腳本語言。當網頁中嵌入了JavaScript腳本,瀏覽器載入網頁時,就會執行腳本,從而操作瀏覽器,實現各種動態效果

JavaScript程式碼嵌入網頁的方法

1、<script>元素直接嵌入程式碼

<script type="text/javascript">
    function sayHello() {
        alert("hello!");
    }
</script>
登入後複製

2、<script>元素載入外部腳本

<script type="text/javascript" src="example.js"></script>
登入後複製

<script> 標籤相關屬性

type屬性

  • #<script>標籤預設就是JavaScript程式碼,嵌入javascript腳本時,type屬性可以省略

  • 如果type屬性的值,瀏覽器不認識,就不會執行其中的程式碼,所以可以在<script>標籤中嵌入任意的文字內容,只要加上一個瀏覽器不認識的type屬性就行,瀏覽器不會執行也不會顯示它的內容,但是這個<script>節點仍然存在在DOM之中,可以使用<script>節點的text屬性來讀取它的內容

##defer屬性

<script src="a.js" defer></script>
<script src="b.js" defer></script>
登入後複製

defer屬性的運行流程:在

  1. 瀏覽器開始解析HTML網頁

  2. #分析過程中,發現帶有defer屬性的

    <script>元素

  3. 瀏覽器繼續往下解析HTML網頁,同時並行下載

    <script>元素載入的外部腳本

  4. 瀏覽器完成解析HTML網頁,此時再回過頭執行已經下載完成的腳本

需要注意:

  • 非同步載入資源

  • 依照順序執行腳本

  • 使用defer載入的外部腳本不應該使用

    document.write方法

async屬性

<script src="a.js" async></script>
<script src="b.js" async></script>
登入後複製

async屬性的運行流程:

  1. #瀏覽器開始解析HTML網頁

  2. 解析過程中,發現具有async屬性的

    <script>標籤

  3. 瀏覽器繼續往下解析HTML網頁,同時並行下載

    <script>標籤中的外部腳本

  4. ##腳本下載完成,瀏覽器暫停解析HTML網頁,開始執行下載的腳本
  5. 腳本執行完畢,瀏覽器恢復解析HTML網頁
  6. ##需要注意:

非同步載入資源
  • #並不會依照順序執行JS,誰先下載完,誰就先執行
  • 使用async載入的外部腳本不應該使用document.write方法
  • async和defer屬性歸納

#都能解決「阻塞效應」
  • 都是非同步載入資源,但執行順序不一樣
  • 如果腳本之間沒有依賴關係,就使用async屬性,如果腳本之間有依賴關係,就使用defer屬性
  • #動態產生腳本
['a.js', 'b.js'].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});
登入後複製

##不會阻塞頁面渲染

  • async設定為false可以保證b.js在a.js後面執行

  • 在這段程式碼後面載入的腳本文件,會等在b.ja執行完成後再執行

  • 相關知識點總結

包含在

標籤內部的JavaScript程式碼,將會從上到下一次解析
  • 無論以哪種方式嵌入程式碼,只要不存在defer和async屬性,瀏覽器都會按照

    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板