在HTML中使用JS方法總結

這次帶給大家在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屬性來讀取它的內容

<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方法

<script src="a.js" async></script>
<script src="b.js" async></script>

登入後複製

async屬性的運行流程：

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

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

   <script>標籤

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

   <script>標籤中的外部腳本

##腳本下載完成，瀏覽器暫停解析HTML網頁，開始執行下載的腳本
腳本執行完畢，瀏覽器恢復解析HTML網頁
##需要注意：

• #並不會依照順序執行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執行完成後再執行

• 相關知識點總結

包含在