用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概述

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

 

葡萄城控件产品网站：http://www.gcpowertools.com.cn/ 
葡萄城技术支持论坛：http://gcdn.grapecity.com/

 
分类: Web技术

用RequireJS优化Wijmo Web页面的更多相关文章

  1. 提高性能：用RequireJS优化Wijmo Web页面

    上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.m ...

  2. Web页面性能优化（YSlow）

    YSlow(解析为Why Slow)是雅虎基于网站优化规则推出的工具,帮助你分析并优化网站性能.旧版Yslow 有13条规则,新版Yslow有23项规则,YSlow会根据这些规则分析你的网站,并给出评 ...

  3. 使用 RequireJS 优化 Web 应用前端

    基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery.Dojo.MooTools.EmbedJ ...

  4. web页面内容优化管理与性能技巧

    来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片 ...

  5. base64：URL背景图片与web页面性能优化

    一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...

  6. web页面的优化

    众所周知,一个web页面通常会包括HTML(XHTML.XML).CSS.Javascript,而其中HTML(XHTML.XML)为结构化语言,用于构建页面结构和相关数据:CSS则负责页面的样式,即 ...

  7. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  8. 转： web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  9. 隔壁老主精讲web页面性能优化。

    首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...

随机推荐

  1. Azure VM Public IP设置

    Azure虚拟机的Public IP是用于客户端直连云中的虚拟机,可以认为是一个外网IP,一般我们为虚拟机设置终结点,例如HTTP的80端口,如果使用Public IP可以不使用Azure Porta ...

  2. Linux内核分析（六）----字符设备控制方法实现|揭秘系统调用本质

    原文:Linux内核分析(六)----字符设备控制方法实现|揭秘系统调用本质 Linux内核分析(六) 昨天我们对字符设备进行了初步的了解,并且实现了简单的字符设备驱动,今天我们继续对字符设备的某些方 ...

  3. Install Typical IIS Workloads

    原文 Install Typical IIS Workloads Introduction The IIS 7.0 and above modular architecture is designed ...

  4. Service与Activity与交流AIDL

    深圳旅游月.终于回来了,做了很多个月,这些天来的东西会慢慢总结出来的.今天,我们正在谈论的Service小东西:沟通. 固定通信的做法比较,基本上按照写模板可以实现. 1.Service与Activi ...

  5. XStream 用法汇总

            XStream是一家Java对象和XML转换工具,很好很强大.它提供了所有的基本型.排列.收集和其他类型的支持,直接转换.因此XML在数据交换经常使用.对象序列化(和Java对象的序列 ...

  6. oracle 监控执行的sql语句

    oracle 监控执行的sql语句 select * from v$sqlarea a where module='PL/SQL Developer' order by a.FIRST_LOAD_TI ...

  7. DevExpress XtraReports 入门四 创建 Web 报表

    原文:DevExpress XtraReports 入门四 创建 Web 报表 本文只是为了帮助初次接触或是需要DevExpress XtraReports报表的人群使用的,为了帮助更多的人不会像我这 ...

  8. URAL 1727. Znaika&#39;s Magic Numbers（数学 vector）

    主题链接:http://acm.timus.ru/problem.aspx?space=1&num=1727 1727. Znaika's Magic Numbers Time limit: ...

  9. Android而一个超级漂亮的日历控件

    ※效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGluZ2xvbmd4aW4yNA==/font/5a6L5L2T/fontsize/400/fil ...

  10. MVC中的其他新特性

    MVC中的其他新特性 (GlobalImport全局导入功能) 默认新建立的MVC程序中,在Views目录下,新增加了一个_GlobalImport.cshtml文件和_ViewStart.cshtm ...