經(jīng)典型和非阻塞型<script>標(biāo)簽用法實例詳解

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:15:33

經(jīng)典型和非阻塞型<script>標(biāo)簽用法實例詳解

經(jīng)典型和非阻塞型<script>標(biāo)簽用法實例詳解:現(xiàn)代瀏覽器中的<script>標(biāo)簽分成了兩種新類型：經(jīng)典型和非阻塞型。接下來討論如何運用這兩種標(biāo)簽來盡快加載頁面。1、阻塞型腳本何去何從？標(biāo)準(zhǔn)版本的<script>標(biāo)簽常常被稱作阻塞型標(biāo)簽。這個詞必須放在上下文中進行理解：現(xiàn)代瀏覽器看到阻塞型&

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀經(jīng)典型和非阻塞型<script>標(biāo)簽用法實例詳解:現(xiàn)代瀏覽器中的<script>標(biāo)簽分成了兩種新類型：經(jīng)典型和非阻塞型。接下來討論如何運用這兩種標(biāo)簽來盡快加載頁面。1、阻塞型腳本何去何從？標(biāo)準(zhǔn)版本的<script>標(biāo)簽常常被稱作阻塞型標(biāo)簽。這個詞必須放在上下文中進行理解：現(xiàn)代瀏覽器看到阻塞型&

現(xiàn)代瀏覽器中的<script>標(biāo)簽分成了兩種新類型：經(jīng)典型和非阻塞型。接下來討論如何運用這兩種標(biāo)簽來盡快加載頁面。

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

標(biāo)準(zhǔn)版本的<script>標(biāo)簽常常被稱作阻塞型標(biāo)簽。這個詞必須放在上下文中進行理解：現(xiàn)代瀏覽器看到阻塞型<script>標(biāo)簽時，會跳過阻塞點繼續(xù)讀取文檔及下載其他資源（腳本和樣式表）。但直到腳本下載完畢并運行之后，瀏覽器才會評估阻塞點之后的那些資源。因此，如果網(wǎng)頁文檔的<head>標(biāo)簽里有5 個阻塞型<script>標(biāo)簽，則在所有這5 個腳本均下載完畢并運行之前，用戶除了頁面標(biāo)題之外看不到任何東西。不僅如此，即便這些腳本運行了，它們也只能看到阻塞點之前的那部分文檔。如果想看到<body>標(biāo)簽中正等待加載的那些好東西，就必須給像document.onreadystatechange 這樣的事件綁定一個事件處理器。

基于上述原因，現(xiàn)在越來越流行把腳本放在頁面<body>標(biāo)簽的尾部。這樣，一方面用戶可以更快地看到頁面，另一方面腳本也可以主動親密接觸DOM 而無需等待事件來觸發(fā)自己。對大多數(shù)腳本而言，這次“搬家”是個巨大的進步。

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

該腳本是否有可能被<body>標(biāo)簽里的內(nèi)聯(lián)JavaScript 直接調(diào)用？答案可能一目了然，但仍值得核查一遍。

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

上述問題只要有一個答案是肯定的，那么該腳本就應(yīng)該放在<head>標(biāo)簽中，否則就可以放在<body>標(biāo)簽中，文檔形如：

<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、腳本的提前加載與延遲運行

上面建議將大多數(shù)腳本放在<body>中，因為這樣既能讓用戶更快地看到網(wǎng)頁，又能避免操控DOM之前綁定“就緒”事件的開銷。但這種方式也有一個缺點，即瀏覽器在加載完整個文檔之前無法加載這些腳本，這對那些通過慢速連接傳送的大型文檔來說會是一大瓶頸。

理想情況下，腳本的加載應(yīng)該與文檔的加載同時進行，并且不影響DOM 的渲染。這樣，一旦文檔就緒就可以運行腳本，因為已經(jīng)按照<script>標(biāo)簽的次序加載了相應(yīng)腳本。

如果大家已經(jīng)讀到這里了，那么一定會迫不及待地想寫一個自定義Ajax 腳本加載器以滿足這樣的需求！不過，大多數(shù)瀏覽器都支持一個更為簡單的解決方案。

<script defer src = "deferredScript.js">

添加defer（延遲）屬性相當(dāng)于對瀏覽器說：“請馬上開始加載這個腳本吧，但是，請等到文檔就緒且所有此前具有defer 屬性的腳本都結(jié)束運行之后再運行它?！痹谖臋n<head>標(biāo)簽里放入延遲腳本，既能帶來腳本置于<body>標(biāo)簽時的全部好處，又能讓大文檔的加載速度大幅提升！

不足之處就是，并非所有瀏覽器都支持defer屬性。這意味著，如果想確保自己的延遲腳本能在文檔加載后運行，就必須將所有延遲腳本的代碼都封裝在諸如jQuery 之$(document).ready 之類的結(jié)構(gòu)中。

上一節(jié)的頁面例子改進如下：

<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 也會在文檔就緒事件之后才運行。如果頁面主體內(nèi)容遠(yuǎn)遠(yuǎn)超過幾千字節(jié)，那么付出這點代價是完全值得的。

3、腳本的并行加載

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

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

如果說defer 讓我們想到一種靜靜等待文檔加載的有序排隊場景，那么async 就會讓我們想到混亂的無政府狀態(tài)。前面給出的那兩個腳本會以任意次序運行，而且只要JavaScript 引擎可用就會立即運行，而不論文檔就緒與否。
對大多數(shù)腳本來說，async 是一塊難以下咽的雞肋。async 不像defer那樣得到廣泛的支持。同時，由于異步腳本會在任意時刻運行，它實在太容易引起海森堡蟻蟲之災(zāi)了（腳本剛好結(jié)束加載時就會蟻蟲四起）。
當(dāng)我們加載一些第三方腳本，而且也不在乎它們誰先運行誰后運行。因此，對這些第三方腳本使用async 屬性，相當(dāng)于一分錢沒花就提升了它們的運行速度。
上一個頁面示例再添加兩個獨立的第三方小部件，得到的結(jié)果如下：

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

這個頁面結(jié)構(gòu)清晰展示了腳本的優(yōu)先次序。對于絕大多數(shù)瀏覽器，DOM的渲染只會延遲至headScripts.js 結(jié)束運行時。進行DOM渲染的同時會在后臺加載deferredScripts.js。接著，在DOM 渲染結(jié)束時將運行deferredScripts.js 和那兩個小部件腳本。這兩個小部件腳本在那些支持async 的瀏覽器中會做無序運行。如果不確定這是否妥當(dāng)，請勿使用async！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com