成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

談談 <script> 標簽以及其加載順序問題，包含 defer & async

alexnevsky / 3208人閱讀

摘要：標簽加載順序如果要談標簽加載順序問題，首先要談的就是標簽的位置，因為標簽的位置對于加載順序來說有著很重要的影響。例如標簽在以上代碼中，可能由于下載時間比較長，由于兩個標簽都是異步執(zhí)行，互不干擾，因此可能就會先于執(zhí)行。

談談 外置形式

外置形式是將 JavaScript 代碼寫在外部的一個文件里面，在 html 文件中通過 兩種引入形式的比較

對于這兩種方式，毫無疑問，外置形式明顯好于內聯(lián)形式，主要表現(xiàn)為以下方面:

可維護性：外置 Javascript 文件可以被多個頁面調用而不用在每個頁面上反復地書寫.如果有需要改變的部分,你只需要在一處修改即可.所以外置JavaScript 導致代碼工作量減少,進而使得維護手續(xù)也更加方便。

可緩存：瀏覽器能夠根據具體的設置緩存鏈接的所有外部 JavaScript文件。也就是說，如果有兩個頁面都使用同一個文件，那么這個文件只需下載一次。因此，最終結果就是能夠加快頁面加載的速度。

關注點分離：將 JavaScript 封裝在外部的.js文件遵循了關注點分離的法則.總體來說,分離 HTML,CSS 和 JavaScript 從而讓我們更容易操縱他們.而且如果是多名開發(fā)者同步工作的話,這樣也更方便。

因此，在今后的開發(fā)中盡量使用外置方式的形式引入JavaScript。

這是一種比較傳統(tǒng)的做法，目的就是把所有外部文件（包括 CSS 文件和 JavaScript 文件）的引用都放在相同的地方.可是，在文檔的 元素中包含所有 JavaScript 文件，意味著必須等到全部 JavaScript 代碼都被下載、解析和執(zhí)行完成以后，才能開始呈現(xiàn)頁面的內容（瀏覽器在遇到 標簽時才開始呈現(xiàn)內容）。對于那些需要很多 JavaScript 代碼的頁面來說，這無疑會導致瀏覽器在呈現(xiàn)頁面時出現(xiàn)明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。很明顯，這種做法有著很明顯的缺點，特別是針對于現(xiàn)在的移動端來說，如果超過 1s 還沒有內容呈現(xiàn)的話將是一種很差的用戶體驗。為了避免這個問題，就有了下面這種加載方式。

對于這種方式，在解析包含的 JavaScript 代碼之前，頁面的內容將完全呈現(xiàn)在瀏覽器中。而用戶也會因為瀏覽器窗口顯示空白頁面的時間縮短而感到打開頁面的速度加快了

延遲加載

在這個例子中，雖然我們把

從圖中可以看出，某些瀏覽器或者在一些低版本的瀏覽器中并不支持defer屬性，因此，把延遲腳本放在頁面底部仍然是最佳選擇。

異步加載

說完了延遲加載，然后我們再說下異步加載，即使用 async屬性。
HTML5 為 > 元素定義了 async 屬性。這個屬性與 defer 屬性類似，都用于改變處理腳本的行為。同樣與 defer 類似， async 只適用于外部腳本文件，并告訴瀏覽器立即下載文件，下載完成后立即執(zhí)行。但與 defer不同的是，標記為 async 的腳本并不保證按照指定它們的先后順序執(zhí)行。例如：





  
  
  
  script 標簽

在以上代碼中，可能由于 01.js 下載時間比較長，由于兩個 > 標簽都是異步執(zhí)行，互不干擾，因此 02.js 可能就會先于 01.js 執(zhí)行。因此，確保兩者之間互不依賴非常重要。指定 async 屬性的目的是不讓頁面等待兩個腳本下載和執(zhí)行，從而異步加載頁面其他內容。為此，建議異步腳本不要在加載期間修改 DOM。

async的兼容性如下：

可以看出 IE9 及以下版本都不支持 async屬性，因此，把延遲腳本放在頁面底部仍然是最佳選擇。

綠色代表html解析，淡藍色代表html解析停止，藍色代表script下載，粉紅色代表script執(zhí)行。從上圖很容易的看出來只要執(zhí)行script,html就會停止渲染，除此之外也可以清晰的看出他們之間的加載關系。

小結

所有

閱讀需要支付1元查看
<