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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

python3.6爬虫之豆瓣小王子详解(一)

目标:抓取豆瓣小王子读者的书评,并保存于本地excel。 爬虫的流程:发送请求——获得页面——解析页面——抽取并储存内容。 我们第一个案例便采用:request...

21170
来自专栏GreenLeaves

JavaScrtip之JS最佳实践

一、JavaScript之平稳退化 这边使用一个当用户点击某个页面内某个链接弹出一个新窗口的案例: JavaScript使用window对象的open()方法来...

26450
来自专栏佳爷的后花媛

json & jsonp

对于JSON和JSONP,应该都不陌生,咳咳,不过最初对JSONP有点误解,以为是JSON的另外一个别名,其实二者风马牛不相及。

24230
来自专栏晨星先生的自留地

从协议提取到多功能RDP识别脚本

40080
来自专栏python学习之旅

Python网络爬虫笔记(五):下载、分析京东P20销售数据

1、      翻页的时候,谷歌F12的Network页签可以看到下面的请求。(这里的翻页指商品评价中1、2、3页等)

54770
来自专栏前端安全

和XSS漏洞对抗的日子

前端安全日益受到业内的关注,最近笔者和团队在和XSS漏洞对抗的这段时间,总结了部分常见的漏洞和修复方法,下面将结合具体业务对这些漏洞类型进行分析。

423150
来自专栏小樱的经验随笔

BugkuCTF web3

1.5K40
来自专栏向治洪

ECMAScript 6 入门简介

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言...

21070
来自专栏小白安全

可以被XSS利用的HTML标签和一些手段技巧

XSS让我们在渗透中有无限的可能,只要你发挥你的想象。  引用一位前辈总结的很贴切的一句话——“XSS使整个WEB体系变得具有灵性” 。 网上关于XSS的教程数...

46490
来自专栏ShaoYL

iOS逆向实战与工具使用(微信添加好友自动确认)

52480

扫码关注云+社区

领取腾讯云代金券