用RequireJS优化Wijmo Web页面
用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功能可以试试。
葡萄城控件产品网站:http://www.gcpowertools.com.cn/
葡萄城技术支持论坛:http://gcdn.grapecity.com/
用RequireJS优化Wijmo Web页面的更多相关文章
- 提高性能:用RequireJS优化Wijmo Web页面
上周Wijmo 2014 V2版本刚刚发布(下载地址), 有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.m ...
- Web页面性能优化(YSlow)
YSlow(解析为Why Slow)是雅虎基于网站优化规则推出的工具,帮助你分析并优化网站性能.旧版Yslow 有13条规则,新版Yslow有23项规则,YSlow会根据这些规则分析你的网站,并给出评 ...
- 使用 RequireJS 优化 Web 应用前端
基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery.Dojo.MooTools.EmbedJ ...
- web页面内容优化管理与性能技巧
来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片 ...
- base64:URL背景图片与web页面性能优化
一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...
- web页面的优化
众所周知,一个web页面通常会包括HTML(XHTML.XML).CSS.Javascript,而其中HTML(XHTML.XML)为结构化语言,用于构建页面结构和相关数据:CSS则负责页面的样式,即 ...
- Web前端性能优化——如何提高页面加载速度
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...
- 转: web 页面加载速度优化实战-100% 的飞跃提升
前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
- 隔壁老主精讲web页面性能优化。
首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...
随机推荐
- SQLServer表变量对IO及内存影响测试
原文:SQLServer表变量对IO及内存影响测试 1. 测试创建表变量对IO的影响 测试创建表变量前后,tempdb的空间大小,目前使用sp_spaceused得到大小,也可以使用视图sys.dm_ ...
- win9x_win2k下对物理磁盘的操作
void CReadSectorDlg::OnReadButton() { UpdateData (TRUE) ; CFile m_Sector_file ; char * buffer ; if ( ...
- Axis2 转让Webservice 介面
1,先学习部署环境.建立Axis2周围环境. http://blog.csdn.net/lanqibaoer/article/details/22731291 如今调用一个现有的公共webservic ...
- cocos2d-x教程2:在windows下怎样批量转换pvr,ccz为png或jpg
这是一个非经常见的功能,可是找了全网,竟然找不到,于是借鉴别人的批处理文件,改了下,就能够把整个文件夹的所有一次批量转换. 将这个bat文件暂定为,myConvert.bat,运行时就把这个bat文件 ...
- C++使用简单的函数指针
函数指针: 被调用函数指针必须包括函数的存储器地址,为了正常工作,指针还必须包括其它信息,这一参数列表指针的参数类型和返回类型的函数. 因此,当你声明一个函数指针,数的參数类型和返回类型.以及指针名. ...
- react.js 从零开始(三)JSX 语法及特点介绍
什么是jsx? jsx = JavaScript + xml jsx 是一种 Ecmascript 的一种新标准. jsx 是一种 带有结构性的语法. jsx 的特点: 1.类xml语法易于理解. 2 ...
- handlebar的一些用法——个人使用总结
handlebar的一些用法 概述与介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less t ...
- Java数据结构与算法(20) - ch08树
树的主要算法有插入,查找,显示,遍历,删除,其中显示和删除略微复杂. package chap08.tree; import java.io.BufferedReader; import java.i ...
- JS动态获取浏览器宽度和高度
$(window).resize(function() { var width = $(this).width(); var height = $(this).height(); });
- 当<script>中的type等于text/html的妙用
我们可以在<script>片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法: <script id="commentTemplate&q ...