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

資訊專欄INFORMATION COLUMN

javascript延遲加載

Galence / 1992人閱讀

摘要：為什么要延時(shí)加載呢因?yàn)檫@樣在一定程度上可以提高頁面加載速度。接下來就給大家介紹一下幾種延遲加載方法將文件放在底部常用但是第一種方法有時(shí)候會(huì)收到延時(shí)加載的警告，處理這種問題在底部接入如下代碼延時(shí)加載常用和。一旦下載完畢就會(huì)立刻執(zhí)行。

為什么要延時(shí)加載呢？因?yàn)檫@樣在一定程度上可以提高頁面加載速度。提升用戶使用舒適度。

接下來就給大家介紹一下幾種延遲加載javascript方法：

將js文件放在body底部（常用）

但是第一種方法有時(shí)候會(huì)收到google延時(shí)加載js的警告，處理這種問題

在body底部接入如下代碼

setTimeout延時(shí)加載（常用）

defer和async。

- defer="defer":該屬性用來通知瀏覽器，這段腳本代碼將不會(huì)產(chǎn)生任何文檔內(nèi)容。例如 JavaScript代碼中的document.write()方法將不會(huì)起作用，瀏覽器遇到這樣的代碼將會(huì)忽略，并繼續(xù)執(zhí)行后面的代碼。屬性只能是 defer，與屬性名相同。在HTML語法格式下，也允許不定義屬性值，僅僅使用屬性名。
- async="true/false":該屬性為html5中新增的屬性，它的作用是能夠異步地下載和執(zhí)行腳本，不因?yàn)榧虞d腳本而阻塞頁面的加載。一旦下載完畢就會(huì)立刻執(zhí)行。
defer和async的比較

相同點(diǎn)：

加載文件時(shí)不阻塞頁面渲染；
對(duì)于inline的script無效；
使用這兩個(gè)屬性的腳本中不能調(diào)用document.write方法；
有腳本的onload的事件回調(diào)；
允許不定義屬性值，僅僅使用屬性名；

不同點(diǎn)：

 html的版本html4.0中定義了defer；html5.0中定義了async；這將造成由于瀏覽器版本的不同而對(duì)其支持的程度不同；
 執(zhí)行時(shí)刻：每一個(gè)async屬性的腳本都在它下載結(jié)束之后立刻執(zhí)行，同時(shí)會(huì)在window的load事件之前執(zhí)行。所以就有可能出現(xiàn)腳本執(zhí)行順序被打亂 的情況；每一個(gè)defer屬性的腳本都是在頁面解析完畢之后，按照原本的順序執(zhí)行，同時(shí)會(huì)在document的DOMContentLoaded之前執(zhí) 行。

這兩個(gè)屬性會(huì)有三種可能的組合：

如果async為true，那么腳本在下載完成后異步執(zhí)行。
如果async為false，defer為true，那么腳本會(huì)在頁面解析完畢之后執(zhí)行。
如果async和defer都為false，那么腳本會(huì)在頁面解析中，停止頁面解析，立刻下載并且執(zhí)行。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81942.html

相關(guān)文章

  • 頁面加速優(yōu)化

    摘要：延遲加載當(dāng)我們調(diào)用外部的時(shí)候，使用事件在頁面內(nèi)部被加載前，外部將不被加載腳本調(diào)用外部文件拷貝以上代碼。代碼代碼片段組合外部工具列表頁面加速優(yōu)化頁面請(qǐng)求工具工具大全擴(kuò)展閱讀方面的設(shè)置 內(nèi)聯(lián) CSS 優(yōu)點(diǎn) 使用內(nèi)聯(lián) CSS 可以減少瀏覽器去服務(wù)端去下載 CSS 文件 關(guān)鍵 CSS 內(nèi)聯(lián)到 HTML 文件中 缺點(diǎn) CSS 文件沒法被緩存 注意：該方法只適用于很小的 CSS...

    Lin_YT 評(píng)論0 收藏0

  • 頁面加速優(yōu)化

    摘要：延遲加載當(dāng)我們調(diào)用外部的時(shí)候，使用事件在頁面內(nèi)部被加載前，外部將不被加載腳本調(diào)用外部文件拷貝以上代碼。代碼代碼片段組合外部工具列表頁面加速優(yōu)化頁面請(qǐng)求工具工具大全擴(kuò)展閱讀方面的設(shè)置 內(nèi)聯(lián) CSS 優(yōu)點(diǎn) 使用內(nèi)聯(lián) CSS 可以減少瀏覽器去服務(wù)端去下載 CSS 文件 關(guān)鍵 CSS 內(nèi)聯(lián)到 HTML 文件中 缺點(diǎn) CSS 文件沒法被緩存 注意：該方法只適用于很小的 CSS...

    shixinzhang 評(píng)論0 收藏0

  • 頁面加速優(yōu)化

    摘要：延遲加載當(dāng)我們調(diào)用外部的時(shí)候，使用事件在頁面內(nèi)部被加載前，外部將不被加載腳本調(diào)用外部文件拷貝以上代碼。代碼代碼片段組合外部工具列表頁面加速優(yōu)化頁面請(qǐng)求工具工具大全擴(kuò)展閱讀方面的設(shè)置 內(nèi)聯(lián) CSS 優(yōu)點(diǎn) 使用內(nèi)聯(lián) CSS 可以減少瀏覽器去服務(wù)端去下載 CSS 文件 關(guān)鍵 CSS 內(nèi)聯(lián)到 HTML 文件中 缺點(diǎn) CSS 文件沒法被緩存 注意：該方法只適用于很小的 CSS...

    xiaotianyi 評(píng)論0 收藏0

  • Javascript設(shè)計(jì)模式之——代理模式

    摘要：最近在讀設(shè)計(jì)模式與開發(fā)實(shí)踐，在這里把文中的各種設(shè)計(jì)模式寫出來，以便加深記憶，也可以分享給初學(xué)者。經(jīng)紀(jì)人可以全權(quán)代表明星和客戶談判，最后把談判結(jié)果給明星，明星決定簽約與否。這也違反了面向?qū)ο笤O(shè)計(jì)原則中的單一職責(zé)原則。 最近在讀《javascript設(shè)計(jì)模式與開發(fā)實(shí)踐》，在這里把文中的各種設(shè)計(jì)模式寫出來，以便加深記憶，也可以分享給初學(xué)者。如果你不了解設(shè)計(jì)模式，那么強(qiáng)烈推薦你閱讀一下這本書，...

    cuieney 評(píng)論0 收藏0

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

    摘要：標(biāo)簽加載順序如果要談標(biāo)簽加載順序問題，首先要談的就是標(biāo)簽的位置，因?yàn)闃?biāo)簽的位置對(duì)于加載順序來說有著很重要的影響。例如標(biāo)簽在以上代碼中，可能由于下載時(shí)間比較長，由于兩個(gè)標(biāo)簽都是異步執(zhí)行，互不干擾，因此可能就會(huì)先于執(zhí)行。 談?wù)? 標(biāo)簽加載順序的問題 這篇文章比較長，如果你耐心讀完了，我會(huì)感謝你愿意在這篇文章上花費(fèi)時(shí)間，也希望你有收獲。 其實(shí)說起，幾乎搞前端的都知道他的作用：引入 JavaS...

    alexnevsky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<