搜尋

首頁 >web前端 >js教程 >在HTML中使用JS方法總結

在HTML中使用JS方法總結

php中世界最好的语言
php中世界最好的语言原創
2018-05-25 11:38:282242瀏覽

這次帶給大家在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屬性，瀏覽器都會按照