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

提高性能：用RequireJS优化Wijmo Web页面的更多相关文章

  1. 用RequireJS优化Wijmo Web页面

    用RequireJS优化Wijmo Web页面 上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wi ...

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

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

  3. Linux kernel 的 sendfile 是如何提高性能的

    Linux kernel 的 sendfile 是如何提高性能的 现在流行的 web 服务器里面都提供 sendfile 选项用来提高服务器性能,那到底 sendfile 是什么,怎么影响性能的呢? ...

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

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

  5. 提高Web页面性能的技巧

    现在动辄几兆大小的页面加载量,让性能优化成了不可避免的热门话题.WEB 应用越流畅,用户体验就会越好,继而带来更多的访问量.这也就是说,我们应该反省一下那些过度美化的 CSS3 动画和多重操作的 DO ...

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

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

  7. 如何提高web页面的性能

    1.浏览器渲染原理解析 想要提高网页的性能,首要的便是要理解浏览器渲染原理,下面关于浏览器的原理解析,我们以chrome内核webkit为例,其他内核的浏览器原理也基本大同小异,可触类旁通. 如上图所 ...

  8. QQ音乐Android客户端Web页面通用性能优化实践

    QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...

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

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

随机推荐

  1. 关于普通定时器与高级定时器的 PWM输出的初始化的区别

    不管是普通定时器还是高级定时器,你用哪个通道,就在程序里用OC多少.比如CH3对应OC3 TIM_OCInitStructure.TIM_OCMode = TIM_OCMode_PWM1;  TIM_ ...

  2. 练习ajax的时候出现这个问题 还没解决

    VM601:1 Uncaught SyntaxError: Unexpected end of JSON input  应该怎么办呢

  3. 【整理】--C++变量概述

    1.变量概述及特殊变量初始化 a.引用 b.常量 c.静态 d.静态常量(整型) e.静态常量(非整型) 初始化:常量和引用,必须通过参数列表进行初始化. 静态成员变量的初始化也颇有点特别,是在类外初 ...

  4. 如何让MVC6在IIS上面跑

    asp.net5的MVC6发布出来的结果和MVC5之前版本的相差太远了,直接在本地的IIS服务器上面是不可能运行的. 看了汤姆大叔的MVC6项目发布与部署,讲了很多丰富的知识点.但是对于立即要解决问题 ...

  5. addEventListener、attachEvent、cancelBubble兼容性随笔

    一.前言 1. element.addEventListener(eventType, handler, capture); (1)参数eventType是要注册句柄的事件类型名. (2)参数hand ...

  6. JFinal 1.5 发布,JAVA极速WEB+ORM框架

    JFinal 爱好者一直都在问 JFinal 何时再次升级?JFinal 1.5 何时发布?以往升级都保持在每月近两次的频率,为何本次五个月过去了新版本还不出?由于作者暂时阔别码坛已有半年时间,一直无 ...

  7. 分享我的“艺术品”：公共建筑能耗监测平台的GPRS通讯服务器的开发方法分享

    在这个文章里面我将用一个实际的案例来分享如何来构建一个能够接受3000+个连接的GPRS通讯服务器软件,这个软件被我认为是一个艺术品,实现周期为1.5个月,文章很长,有兴趣的同志慢慢看.在这里,我将分 ...

  8. 【Bugly干货】Android性能优化典范之多线程篇

    本文涉及的内容有:多线程并发的性能问题,介绍了 AsyncTask,HandlerThread,IntentService 与 ThreadPool 分别适合的使用场景以及各自的使用注意事项,这是一篇 ...

  9. Linux3：more、which、find、chmod、tar、diff、grep、ps、netstat、uname

    more 类似cat,不过more不是将整个文件内容从上到下显示在屏幕上的,而是以一页一页的显示方便使用者逐页阅读.more最基本的指令就是space即往下翻一页,b即往回翻一页显示,而且还有搜索字符 ...

  10. angularjs ng-option ie issue解决方案

    最近遇见angularjs 在IE上当使用ng-options作为select的选项数据源,并且被套在ng-switch(ng-transclude)之类的,当angular上得ng-options数 ...