亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

談?wù)?<script> 標(biāo)簽以及其加載順序問題，包含 defer & async

alexnevsky / 3261人閱讀

摘要：標(biāo)簽加載順序如果要談標(biāo)簽加載順序問題，首先要談的就是標(biāo)簽的位置，因?yàn)闃?biāo)簽的位置對(duì)于加載順序來說有著很重要的影響。例如標(biāo)簽在以上代碼中，可能由于下載時(shí)間比較長(zhǎng)，由于兩個(gè)標(biāo)簽都是異步執(zhí)行，互不干擾，因此可能就會(huì)先于執(zhí)行。

談?wù)? 外置形式

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

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

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

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

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

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

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

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

延遲加載

在這個(gè)例子中，雖然我們把

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

異步加載

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





  
  
  
  script 標(biāo)簽

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

async的兼容性如下：

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

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

小結(jié)

所有

閱讀需要支付1元查看
<