DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 讓浏覽器非阻塞加載javascript的幾種方法小結
讓浏覽器非阻塞加載javascript的幾種方法小結
編輯:關於JavaScript      日期:2016/12/24 10:05:52
浏覽器為了確保正確執行腳本和呈現布局在浏覽器加載和執行完成它之前會完全阻塞頁面後續內容的呈現和其他資源的加載。

    在頁面的加載過程中如果可以做到內容的逐步呈現,對於良好的用戶體驗來說是非常重要的。通常我們也會在wondow對象的onload事件處理函數中做一些事情,但由於腳本阻塞加載和呈現的特性這一方面增加了頁面載入時間推遲了onload事件的觸發,另一方面也延遲了用戶所期待的反饋。這就需要我們使用一些方法來讓浏覽器以非阻塞的方式加載外部腳本。

一  使用XMLHttpRequest對象異步方式加載外部腳本。

    這種方式好處是觸發較少的浏覽器忙指示器,能夠被所有現代浏覽器的所支持。不足的之處在於由於浏覽器的跨域安全機制所以只能允許加載同域下外部腳本。另外如果多個腳本之間存在依賴關系的話,需要使用編寫相關的隊列管理腳本來控制多個腳本的執行順序。

二  使用Javascript來動態創建外部腳本的SCRIPT元素

   這種方式是我認為跨域並行加載外部腳本情況下的最佳方案,實現方法是使用Javascript來動態的創建在HTML中引用外部腳本所需要srcript元素並給創建的srcript元素的src屬性設置相應的外部腳本的URL來實現和其他資源並行加載。

四  使用iframe加載外部腳本

    這種方式我們需要使用一個新HTML頁面把外部腳本轉換成到該HTML頁面的行內腳本,然後在主頁面中使用iframe加載這個包含腳本的HTML頁面,使用這種方式需要重構部分代碼來訪問主頁面中DOM元素。而且IFRAM是開銷相對較大DOM元素,同樣也有跨域限制。

五 使用Script標簽的 derfer 屬性

    這種方式是實現非阻塞並行加載外部腳本的最簡單的方式,只需要在引用外部腳本的是常規方式上給SCRIPT標簽應用defer屬性即可。但是使用這種方式加載外部腳本缺點是它只在部門浏覽器中實現並行加載因此兼容性欠缺。

六 docuument.write script tag

    這種方式實現起來也比較簡單,就是直接使用是javascript的document.write方法來輸出在HTML中引用外部腳本的script標記的字符串。不足之處和方法五一樣兼容性欠缺。

總結

   上述幾種方式需要根據具體需求,如是否需要跨域?是否需要確保腳本按順序執行?是否需要觸發更多或更少的浏覽器的忙指示器?以及兼容性,支持的代碼量來確定來綜合考慮那種方式才是追合適的。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved