經典型與非阻斷型標籤用法實例詳解-js教程-PHP中文網

首頁

web前端

js教程

經典型與非阻斷型標籤用法實例詳解

伊谢尔伦

Jul 21, 2017 pm 03:41 PM

script標籤用法

現代瀏覽器中的<script>標籤分成了兩種新類型：經典型和非阻塞型。接下來討論如何運用這兩種標籤來盡快載入頁面。 </script>

1、阻塞型腳本何去何從？

標準版本的<script>標籤常被稱為阻塞型標籤。這個字必須放在上下文中理解：現代瀏覽器看到阻塞型<script>標籤時，會跳過阻塞點繼續讀取文件及下載其他資源（腳本和樣式表）。但直到腳本下載完畢並執行之後，瀏覽器才會評估阻塞點之後的那些資源。因此，如果網頁文件的<head>標籤裡有5 個阻塞型<script>標籤，則在所有這5 個腳本都下載完畢並運行之前，用戶除了頁面標題之外看不到任何東西。不僅如此，即便這些腳本運行了，它們也只能看到阻塞點之前的那部分文件。如果想看到<body>標籤中正等待載入的那些好東西，就必須給像document.onreadystatechange 這樣的事件綁定一個事件處理器。 </script>

基於上述原因，現在越來越流行把腳本放在頁面

標籤的尾部。這樣，一方面使用者可以更快地看到頁面，另一方面腳本也可以主動親密接觸DOM 而無需等待事件來觸發自己。對大多數腳本而言，這次「搬家」是個巨大的進步。

但並非所有腳本都一樣。在向下搬動腳本之前，請先問自己2 個問題。

該腳本是否有可能被

標籤裡的內嵌JavaScript 直接呼叫？答案可能一目了然，但仍值得核實一遍。

該腳本是否會影響已渲染頁面的外觀？ Typekit 宿主字體就是一個例子。如果把Typekit 腳本放在文件結尾，那麼頁面文字就會渲染兩次，也就是讀取文件時即時渲染，腳本執行時再渲染。

上述問題只要有一個答案是肯定的，那麼該腳本就應該放在

標籤中，否則就可以放在標籤中，文檔形如：

<html>
<head>
  <!--metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
</head>
<body>
  <!-- content goes here -->
  <script src="bodyScripts.js"></script>
</body>
</html>

這確實大大縮短了載入時間，但要注意一點，這可能會讓使用者有機會在載入bodyScripts.js 之前與頁面互動。

2、腳本的提前載入與延遲執行

上面建議將大多數腳本放在

中，因為這樣既能讓使用者更快看到網頁，又能避免操控DOM之前綁定「就緒」事件的開銷。但這種方式也有一個缺點，就是瀏覽器在載入完整個文件之前無法載入這些腳本，這對那些透過慢速連線傳送的大型文件來說會是一大瓶頸。

理想情況下，腳本的載入應該與文件的載入同時進行，並且不影響DOM 的渲染。這樣，一旦文件就緒就可以運行腳本，因為已經按照<script>標籤的順序載入了對應腳本。 </script>

如果大家已經讀到這裡了，那麼一定會迫不及待地想寫一個自訂Ajax 腳本載入器以滿足這樣的需求！不過，大多數瀏覽器都支援一個更為簡單的解決方案。

<script defer src = "deferredScript.js">

新增defer（延遲）屬性相當於對瀏覽器說：「請馬上開始載入這個腳本吧，但是，請等到文件就緒且所有先前具有defer 屬性的腳本都結束運行之後再運行它。

不足之處就是，並非所有瀏覽器都支援defer屬性。這意味著，如果您想確保自己的延遲腳本能在文件載入後運行，就必須將所有延遲腳本的程式碼都封裝在諸如jQuery 之$(document).ready 之類的結構中。

上一節的頁面範例改進如下：

<html>
<head>
  <!-- metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
  <script defer src="deferredScripts.js"></script>
</head>
<body>
  <!-- content goes here -->
</body>
</html>

請記住deferredScripts 的封裝很重要，這樣即使瀏覽器不支援defer，deferredScripts 也會在文件就緒事件之後才執行。如果頁面主體內容遠遠超過幾千字節，那麼付出這點代價是完全值得的。

3、腳本的並行加載

如果你是斤斤計較到毫秒級頁面加載時間的完美主義者，那麼defer也許就像是淡而無味的薄鹽醬油。你可不想一直等到先前所有的defer 腳本都運行結束，當然也肯定不想等到文檔就緒之後才運行這些腳本，你就是想盡快加載並且盡快運行這些腳本。這也正是現代瀏覽器提供了async（非同步）屬性的原因。

<script async src = "speedyGonzales.js">
<script async src = "roadRunner.js">

如果说defer 让我们想到一种静静等待文档加载的有序排队场景，那么async 就会让我们想到混乱的无政府状态。前面给出的那两个脚本会以任意次序运行，而且只要JavaScript 引擎可用就会立即运行，而不论文档就绪与否。
对大多数脚本来说，async 是一块难以下咽的鸡肋。async 不像defer那样得到广泛的支持。同时，由于异步脚本会在任意时刻运行，它实在太容易引起海森堡蚁虫之灾了（脚本刚好结束加载时就会蚁虫四起）。
当我们加载一些第三方脚本，而且也不在乎它们谁先运行谁后运行。因此，对这些第三方脚本使用async 属性，相当于一分钱没花就提升了它们的运行速度。
上一个页面示例再添加两个独立的第三方小部件，得到的结果如下：

<html>
<head>
  <!-- metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
  <script src="deferredScripts.js" defer></script>
</head>
<body>
  <!-- content goes here -->
  <script async defer src="feedbackWidget.js"></script>
  <script async defer src="chatWidget.js"></script>
</body>
</html>

这个页面结构清晰展示了脚本的优先次序。对于绝大多数浏览器，DOM的渲染只会延迟至headScripts.js 结束运行时。进行DOM渲染的同时会在后台加载deferredScripts.js。接着，在DOM 渲染结束时将运行deferredScripts.js 和那两个小部件脚本。这两个小部件脚本在那些支持async 的浏览器中会做无序运行。如果不确定这是否妥当，请勿使用async！

以上是經典型與非阻斷型標籤用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。