前端性能優化：使用異步加載，延遲加載依賴

 來源：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的莫須有的加載。

相關閱讀：

• 前端性能優化：DocumentFragments或innerHTML取代複雜的元素注入
• 前端性能優化：高頻執行事件/方法的防抖
• 前端性能優化：網絡存儲的靜態緩存和非必要內容優化
• 前端性能優化：使用異步加載，延遲加載依賴

下一篇中，咱們會介紹使用Array.prototype.join代替字符串鏈接，以提升網頁前端性能。

via Nelly@極客社區

來源：前端性能優化：使用異步加載，延遲加載依賴