JS延遲加載傀顾,也就是等頁面加載完成之后再加載 JavaScript 文件。?
JS延遲加載有助于提高頁面加載速度。
一般有以下幾種方式:
HTML 4.01 為 <script>標簽定義了defer屬性。標簽定義了?defer屬性刻炒。?標簽定義了?defer屬性。?
用途:表明腳本在執(zhí)行時不會影響頁面的構(gòu)造自沧。也就是說坟奥,腳本會被延遲到整個頁面都解析完畢之后再執(zhí)行。
在<script>元素中設(shè)置defer屬性拇厢,等于告訴瀏覽器立即下載爱谁,但延遲執(zhí)行。?元素中設(shè)置?defer?屬性孝偎,等于告訴瀏覽器立即下載访敌,但延遲執(zhí)行。?元素中設(shè)置?defer?屬性衣盾,等于告訴瀏覽器立即下載寺旺,但延遲執(zhí)行。
說明:雖然<script>元素放在了<head>元素中雨效,但包含的腳本將延遲瀏覽器遇到</html>標簽后再執(zhí)行?元素放在了元素中迅涮,但包含的腳本將延遲瀏覽器遇到標簽后再執(zhí)行。
HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行徽龟。在現(xiàn)實當中,延遲腳本并不一定會按照順序執(zhí)行唉地。
defer屬性只適用于外部腳本文件据悔。支持 HTML5 的實現(xiàn)會忽略嵌入腳本設(shè)置的?defer屬性。
HTML5 為 <script>標簽定義了async屬性耘沼。與defer屬性類似极颓,都用于改變處理腳本的行為。同樣群嗤,只適用于外部腳本文件菠隆。標簽定義了?async屬性。與defer屬性類似,都用于改變處理腳本的行為骇径。同樣躯肌,只適用于外部腳本文件。?
目的:不讓頁面等待腳本下載和執(zhí)行破衔,從而異步加載頁面其他內(nèi)容清女。
異步腳本一定會在頁面 load 事件前執(zhí)行。?
不能保證腳本會按順序執(zhí)行晰筛。
async和defer一樣嫡丙,都不會阻塞其他資源下載,所以不會影響頁面的加載读第。?
缺點:不能控制加載的順序
$.getScript("outer.js",function(){//回調(diào)函數(shù)曙博,成功獲取文件后執(zhí)行的函數(shù)??
console.log("腳本加載完成")??
});
把js外部引入的文件放到頁面底部,來讓js最后引入怜瞒,從而加快頁面加載速度