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

简介:

上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.min.js包? 即对仅使用部分的Widget,有无办法优化而提高网络性能呢。

image

答案是肯定的,有办法。

其中针对这种情况,使用Require.JS再合适不过了,实际上Wijmo 2013年已经开始支持Require.JS了,如下是Wijmo支持的JavaScript类库的全图。

image

本文就通过对比的方式说明使用RequireJs前后网络性能,以使用Wijmo表格控件(wijgrid)说明。

 

RequireJs概述

RequireJS由James Burke创建,他也是AMD规范的创始人.

RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件,以及不用通过script标签顺序去管理依赖关系。当然也不会有阻塞(blocking)的情况发生。

RequireJS不仅仅用于加载模块依赖和相关的命令,RequireJS帮助我们写出模块化的JavaScript代码,这非常有利于代码的可扩展性和重用性。

当加载JavaScript模块时,就会使用script标签, 多个依赖的模块,会按照引入的先后顺序加载。故,在使用script标签时,你需要按照此特定顺序安排它们的加载。AMD(异步模块定义)可以使得JavaScript模块和它的依赖被异步的加载,同时,又能保证顺序的准确。 两者的对比,如图所示。

15085801_CrX1

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

image

 

不使用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" },
                   ...
                ]
            });

        });

通过简单的代码,实现的表格结果如图所示

image

我们重新刷新--通过Ctrl + F5按键,然后观察Chrome的Network调试工具栏

image

可以看到渲染完成,需要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"
                }
});

运行结果如图所示

image

总结,在使用了RequireJs后,性能从800ms提高到400ms,极大的提高了Web运行效率,Wijmo的RequireJs功能可以试试。



本文转自 powertoolsteam 51CTO博客,原文链接:http://blog.51cto.com/powertoolsteam/1539412,如需转载请自行联系原作者
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
19天前
|
机器学习/深度学习 JavaScript 前端开发
深入探索WebAssembly:提升Web应用的性能
【10月更文挑战第15天】深入探索WebAssembly:提升Web应用的性能
38 3
|
28天前
|
Web App开发 前端开发 JavaScript
探索Python科学计算的边界:利用Selenium进行Web应用性能测试与优化
【10月更文挑战第6天】随着互联网技术的发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。这些应用不仅需要提供丰富的功能,还必须具备良好的性能表现以保证用户体验。性能测试是确保Web应用能够快速响应用户请求并处理大量并发访问的关键步骤之一。本文将探讨如何使用Python结合Selenium来进行Web应用的性能测试,并通过实际代码示例展示如何识别瓶颈及优化应用。
94 5
|
17天前
|
机器学习/深度学习 缓存 监控
利用机器学习优化Web性能和用户体验
【10月更文挑战第16天】本文探讨了如何利用机器学习技术优化Web性能和用户体验。通过分析用户行为和性能数据,机器学习可以实现动态资源优化、预测性缓存、性能瓶颈检测和自适应用户体验。文章还介绍了实施步骤和实战技巧,帮助开发者更有效地提升Web应用的速度和用户满意度。
|
30天前
|
SQL 关系型数据库 数据库
优化Web开发流程:Python ORM的优势与实现细节
【10月更文挑战第4天】在Web开发中,数据库操作至关重要,但直接编写SQL语句既繁琐又易错。对象关系映射(ORM)技术应运而生,让开发者以面向对象的方式操作数据库,显著提升了开发效率和代码可维护性。本文探讨Python ORM的优势及其实现细节,并通过Django ORM的示例展示其应用。ORM提供高级抽象层,简化数据库操作,提高代码可读性,并支持多种数据库后端,防止SQL注入。Django内置强大的ORM系统,通过定义模型、生成数据库表、插入和查询数据等步骤,展示了如何利用ORM简化复杂的数据库操作。
58 6
|
29天前
|
缓存 前端开发 JavaScript
探索现代Web开发中的前端性能优化策略
【10月更文挑战第5天】探索现代Web开发中的前端性能优化策略
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
40 2
|
11天前
|
前端开发 开发者
WEB自定义页面请求响应
Web组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过onInterceptRequest()接口来实现自定义资源请求响应 。自定义请求能力可以用于开发者自定义Web页面响应、自定义文件资源响应等场景。
19 0
|
1月前
|
缓存 前端开发 JavaScript
构建高性能Web应用:优化前端性能的策略
构建高性能Web应用:优化前端性能的策略
|
25天前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
86 3
|
7天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
80 44