提高性能:用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功能可以试试。
提高性能:用RequireJS优化Wijmo Web页面的更多相关文章
- 用RequireJS优化Wijmo Web页面
用RequireJS优化Wijmo Web页面 上周Wijmo 2014 V2版本刚刚发布(下载地址), 有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wi ...
- Web页面性能优化(YSlow)
YSlow(解析为Why Slow)是雅虎基于网站优化规则推出的工具,帮助你分析并优化网站性能.旧版Yslow 有13条规则,新版Yslow有23项规则,YSlow会根据这些规则分析你的网站,并给出评 ...
- Linux kernel 的 sendfile 是如何提高性能的
Linux kernel 的 sendfile 是如何提高性能的 现在流行的 web 服务器里面都提供 sendfile 选项用来提高服务器性能,那到底 sendfile 是什么,怎么影响性能的呢? ...
- web页面内容优化管理与性能技巧
来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片 ...
- 提高Web页面性能的技巧
现在动辄几兆大小的页面加载量,让性能优化成了不可避免的热门话题.WEB 应用越流畅,用户体验就会越好,继而带来更多的访问量.这也就是说,我们应该反省一下那些过度美化的 CSS3 动画和多重操作的 DO ...
- 隔壁老主精讲web页面性能优化。
首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...
- 如何提高web页面的性能
1.浏览器渲染原理解析 想要提高网页的性能,首要的便是要理解浏览器渲染原理,下面关于浏览器的原理解析,我们以chrome内核webkit为例,其他内核的浏览器原理也基本大同小异,可触类旁通. 如上图所 ...
- QQ音乐Android客户端Web页面通用性能优化实践
QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...
- base64:URL背景图片与web页面性能优化
一.base64百科 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息. 某人: 唉,我彻底废柴了,为何上面明明是中文,洒家却看不懂嘞,为什 ...
随机推荐
- 如何遍历HashMap
HashMap的遍历有两种常用的方法,那就是使用keyset及entryset来进行遍历,但两者的遍历速度是有差别的 java Map 遍历速度最优解 第一种: Map map = new HashM ...
- html+css+javascript实现简易轮播图片
html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...
- Apache HttpAsyncClient 如何设置per request timeout
最近做一个项目时用到HttpAsyncClient:因项目所需,要求能对一个具体的request 设置连接和读写超时:但发现在HttpAsyncClient中,只有在创建一个HttpAsyncClie ...
- 对InvokeAction简略分析了解验证失败为什么Action还会继续执行
一.前言 有些同学使用AuthorizationFilter来进行用户是否登录验证,如果未登录就跳到登录页. 很简单的一个场景,但是有些同学会发现虽然验证失败了,但是整个Action还会执行一遍. 于 ...
- sqlserver各备份解释
1)完全备份 ------------------------------------------- (1)是备份的基准.在做备份时第一次备份都建议使用完全备份. (2)完全备份会备份数据库的所有数据 ...
- Linux(CentOS 6.5)下配置Mono和Jexus并且部署ASP.NET MVC5
1.开篇说明 a. 首先我在写这篇博客之前,已经在自己本地配置了mono和jexus并且成功部署了asp.net mvc项目,我也是依赖于在网上查找的各种资料来配置环境并且部署项目的,而其在网上也已有 ...
- 我的ORM之一 -- 查询
我的ORM索引 概述 http://code.taobao.org/svn/MyOql/ 这是我自己写的开源ORM教程,我想先从场景示例中切入介绍,先有一个感性的认识,以小见大,触类旁通,有了这个认识 ...
- 解决Win7 软件图标不显示--Win7图标异常,快捷方式不显示解决方法
电脑症状:WIN7的系统,桌面上的图标显示的不正常,快捷方式显示的是未知程序.看不到程序默认图标,快捷方式图标不显示. 解决方法:删除程序图标缓存即可. 将下面的内容复制到记事本保存为“Repai ...
- 自动备份文件到GITHUB的方法
由于一个制作着玩的项目需要制作上传文件的功能,自己又不是搞网站的,也不想去维护一个服务器. 于是开发了一个上传服务器,可以自动把我上传到服务器的数据同步到Github服务器 而github服务器又提供 ...
- python property
python property 在2.6版本中,添加了一种新的类成员函数的访问方式--property. 原型 class property([fget[, fset[, fdel[, doc]]]] ...