点击这里给我发消息 点击这里给我发消息

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

添加时间:2013-12-6
    相关阅读: 网页 页面 CSS JavaScript 优化 google

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

来源:http://www.gbin1.com/technology/javascript/20130701-front-end-performance-optimization-4/

咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册