前端性能优化：使用异步加载，延迟加载依赖

偏执的太偏执、 2022-01-16 08:29 421阅读 0赞

日期：2013-7-1  来源：[GBin1.com][]

[![前端性能优化：使用异步加载，延迟加载依赖][title.jpg]][title.jpg 1]

[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@极客社区][Nelly]

来源：[前端性能优化：使用异步加载，延迟加载依赖][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130701-front-end-performance-optimization-4/
[title.jpg]: http://www.gbin1.com/technology/javascript/20130701-front-end-performance-optimization-4/title.jpg
[title.jpg 1]: http://www.gbin1.com/technology/javascript/20130701-front-end-performance-optimization-4/index.html
[RequireJS]: http://requirejs.org/
[curl]: http://github.com/cujojs/curl
[Nelly]: http://www.gbtags.com/gb/share/1368.htm