用RequireJS优化Wijmo Web页面
上周Wijmo 2014 V2版本刚刚发布(下载地址), 有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.min.js包? 即对仅使用部分的Widget,有无办法优化而提高网络性能呢。
答案是肯定的,有办法。
其中针对这种情况,使用Require.JS再合适不过了,实际上Wijmo 2013年已经开始支持Require.JS了,如下是Wijmo支持的JavaScript类库的全图。
本文就通过对比的方式说明使用RequireJs前后网络性能,以使用Wijmo表格控件(wijgrid)说明。
RequireJS由James Burke创建,他也是AMD规范的创始人.
RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。当然也不会有阻塞(blocking)的情况发生。
RequireJS不仅仅用于加载模块依赖和相关的命令,RequireJS帮助我们写出模块化的JavaScript代码,这非常有利于代码的可扩展性和重用性。
当加载JavaScript模块时,就会使用script标签, 多个依赖的模块,会按照引入的先后顺序加载。故,在使用script标签时,你需要按照此特定顺序安排它们的加载。AMD(异步模块定义)可以使得JavaScript模块和它的依赖被异步的加载,同时,又能保证顺序的准确。 两者的对比,如图所示。
RequireJS API 存在于RequireJS载入时创建的命名空间requirejs下。其主要API主要是下面三个函数:
- define– 该函数用户创建模块。每个模块拥有一个唯一的模块ID,它被用于RequireJS的运行时函数,define函数是一个全局函数,不需要使用requirejs命名空间.
var wijmo; define(["./wijmo.widget"function () { }
- require– 该函数用于读取依赖,全局函数,不需要使用requirejs命名空间. 用于加载模块依赖而不是创建一个模块.
require(["knockout.wijmo", "wijmo.wijgrid", "wijmo.data.ajax"], function () { }
- config– 该函数用于配置RequireJS.
requirejs.config({ baseUrl: "../../../amd-js/", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "knockout": "knockout-3.1.0" } });
Wijmo的AMD目录:Wijmo-Pro.3.20142.45\amd-js
不使用RequireJs,使用Wijmo的wijgrid表格控件
添加引用
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css"> <!--Wijmo Widget CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.45.min.css" rel="stylesheet" type="text/css"> <script src="http://cdn.wijmo.com/amd-js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/amd-js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/amd-js/jquery.mousewheel.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/amd-js/globalize.min.js" type="text/javascript"></script> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20142.45.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.45.min.js" type="text/javascript"></script>
在Body中添加table元素
<body> <table id='demo-grid' /> </body>
在页面加载完成后的ready事件中,添加wijgrid的实现脚本
$(document).ready(function () { $("#demo-grid").wijgrid({ allowSorting: true, data: [ [1, "Malkin", "Pit", 7, 2, 6, 8, 0, 29, "20:10", 2, 2], ... ], columns: [ { headerText: "ID", dataType: "number", dataFormatString: "n0" }, { headerText: "Skaters" }, ... ] }); });
通过简单的代码,实现的表格结果如图所示
我们重新刷新--通过Ctrl + F5按键,然后观察Chrome的Network调试工具栏
可以看到渲染完成,需要800ms左右的时间。
使用RequireJs,使用Wijmo的wijgrid表格控件
添加引用
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css"> <!--Wijmo Widget CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.45.min.css" rel="stylesheet" type="text/css"> <!--RequireJS AMD Loader--> <script src="http://cdn.wijmo.com/external/require.js" type="text/javascript"></script>
配置RequireJs,我们使用wijmo提供的CDN
requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/", paths: { "jquery": "jquery-1.9.1.min", "jquery-ui": "jquery-ui-1.10.1.custom.min", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min" } });
运行结果如图所示
总结,在使用了RequireJs后,性能从800ms提高到400ms,极大的提高了Web运行效率,Wijmo的RequireJs功能可以试试。