提高性能：用RequireJS优化WijmoWeb页面

上周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概述

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表格控件

添加引用

在Body中添加table元素

在页面加载完成后的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表格控件

添加引用

配置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功能可以试试。

网页题目：提高性能：用RequireJS优化WijmoWeb页面
本文链接：http://bjjierui.cn/article/gddsgh.html