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

时间 2020-06-24 标签前端性能优化使用异步加载延迟依赖

来源：GBin1.comjavascript

RequireJS已经迎来了异步加载和AMD格式的巨大浪潮。XMLHttpRequest(该对象能够调用AJAX)使得资源的异步加载变得流行起来，它容许无阻塞资源加载，而且使 onload 启动更快，容许页面内容加载，而不须要刷新页面。php

我所用的异步加载器是John Hann的curl。curl加载器是基本的异步加载器，能够被配置，拥有很好的插件。如下是一小段curl的代码：css

// 基本使用:  加载一部分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);
});

你可能早就了解，异步加载能够大大提升万展速度，可是我想在此说明的是，你要使用异步加载！使用了以后你能够看到区别，更重要的是，你的用户能够看到区别。html

当你能够根据页面内容延迟加载依赖的时候，你就能够体会到异步加载的好处了。例如，你能够只加载Twitter，Facebook和Google Plus到应用了名为social的CSS样式的div元素中。“在加载前检查是否须要”策略能够为个人用户节省好几KB的莫须有的加载。前端