細談在HTML中使用JavaScript

細談在HTML中使用JavaScript

前言

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屬性的運作流程：

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

   <script>

   标簽

3. <script>

   标簽中的外部腳本
4. 腳本下載下傳完成，浏覽器暫停解析HTML網頁，開始執行下載下傳的腳本
5. 腳本執行完畢，浏覽器恢複解析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執行完成後再執行

相關知識點總結

1. 包含在

   <script>

   标簽内部的JavaScript代碼，将被從上到下一次解析
2. 無論以哪種方式嵌入代碼，隻要不存在defer和async屬性，浏覽器都會按照

   <Script>

   标簽在頁面中出現的先後順序對它們進行解析
3. 加載外部腳本的優點：可維護性、可緩存、适應未來

4. <script>

   放在底部的原因1、避免“阻塞效應”。2、避免，在DOM結構生成之前調用DOM節點，而産生錯誤