提高性能：用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功能可以试试。

提高性能：用RequireJS优化Wijmo Web页面相关推荐

web页面性能优化及SEO优化
web页面性能优化前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网 ...
web页面的性能优化以及SEO
前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如 ...
web页面的性能优化以及SEO（搜索引擎优化）
Web页面的性能优化研究表明:用户最满意的打开网页的时间是2-5秒,如果等待超过5秒,99%的用户会关掉页面. 一.尽量减少前端HTTP请求 1,能使用icon不适用图片,实在避免不了要使用图片,就 ...
如何提高页面加载速度 || 前端的性能优化 || 浏览器渲染页面的过程是什么
1.降低请求量 ① 合并资源,减少http请求数量. ② lazyLoad,如图片懒加载.分批加载,每次只加载一部分. ③ 使用字体图标或CSS绘制,来代替部分图片. 2.加快请求速度 ...
QQ音乐客户端Web页面通用性能优化实践
导语 | QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进 ...
QQ音乐Android客户端Web页面通用性能优化实践
QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...
webview加载的页面和浏览器渲染的页面不一致_QQ音乐Android客户端Web页面通用性能优化实践...
QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...
web 折线图大数据量拉取展示方案_【第2010期】QQ音乐Android客户端Web页面通用性能优化实践...
前言今日早读文章由QQ音乐客户端开发工程师@关岳分享,公号:云加社区(ID:QcloudCommunity,腾讯云官方开发者社区)授权分享. 正文从这开始~~ QQ音乐 Android 客户端的 W ...
web 页面性能优化
web 页面性能优化性能优化在视觉上有两个阶段: 加载阶段,能够快速的看到页面(首屏渲染时间); 交互阶段,能够快速响应操作(动画效果,接口返回速度等) 加载阶段加载阶段,是指从发出请求到渲染出完 ...

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

提高性能：用RequireJS优化Wijmo Web页面相关推荐

最新文章

热门文章