分類  >  Web前端 >

前端性能優化:運用非同步載入,延遲載入依賴

tags:    時間:2013-12-10 01:02:02
前端性能優化:使用非同步載入,延遲載入依賴

日期:2013-7-1  來源:GBin1.com

RequireJS已經迎來了非同步載入和AMD格式的巨大浪潮。XMLHttpRequest(該對象可以調用AJAX)使得資源的非同步載入變得流行起來,它允許無阻塞資源載入,並且使 onload 啟動更快,允許頁面內容載入,而不需要刷新頁面。

我所用的非同步載入器是John Hann的curl。curl載入器是基本的非同步載入器,可以被配置,擁有很好的插件。以下是一小段curl的代碼:

// 基本使用:  載入一部分AMD格式的模塊 curl(['social', 'dom'], function(social, dom) {     dom.setElementContent('.social-container', social.loadWidgets()); });  // 定義一個使用Google Analytics的模塊,該模塊是非AMD格式的 define(["js!//google-analytics.com/ga.js"], function() {     // Return a simple custom Google Analytics controller     return {         trackPageView: function(href) {             _gaq.push(["_trackPageview", url]);         },         trackEvent: function(eventName, href) {             _gaq.push(["_trackEvent", "Interactions", eventName, "", href || window.location, true]);         }     }; });  // 載入一個不帶回調方法的非AMD的js文件 curl(['js!//somesite.com/widgets.js']);  // 將JavaScript和CSS文件作為模塊載入 curl(['js!libs/prism/prism.js', 'css!libs/prism/prism.css'], function() {     Prism.highlightAll(); });  // 載入一個AJAX請求的URL curl(['text!sidebar.php', 'storage', 'dom'], function(content, storage, dom) {     storage.set('sidebar', content, 60);     dom.setElementContent('.sidebar', content); }); 

你可能早就了解,非同步載入可以大大提高萬展速度,但是我想在此說明的是,你要使用非同步載入!使用了之後你可以看到區別,更重要的是,你的用戶可以看到區別。

當 你可以根據頁面內容延遲載入依賴的時候,你就可以體會到非同步載入的好處了。例如,你可以只載入Twitter,Facebook和Google Plus到應用了名為social的CSS樣式的div元素中。「在載入前檢查是否需要」策略可以為我的用戶節省好幾KB的莫須有的載入。

下一篇中,我們會介紹使用Array.prototype.join代替字元串連接,以提高網頁前端性能。

via Nelly@極客社區

來源:前端性能優化:使用非同步載入,延遲載入依賴

推薦閱讀文章

Bookmark the permalink ,來源:互聯網