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

Livox MID-360驱动配置到FAST-LIO2高精度建图实战指南 激光雷达SLAM技术是移动机器人和自动驾驶领域的关键环节,其中点云数据质量与里程计精度直接决定建图效果。FAST-LIO2作为紧耦合LiDAR-Inertial里程计框架,凭借ESIKF与ikd-Tree实现高效高鲁棒的点云配准,成为室内外建图的热门选择。然而,从Livox MID-360这类固态雷达的驱动部署到算法参数适配,每一步都蕴含网络协议、坐标变换、时间同步等工程细节。本文从传感器选型原理出发,梳理UDP组播通信、ROS驱动话题映射、外参标定等基础概念,结合实际机器人巡检场景,系统讲解驱动配置、编译 阅读详情

上周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功能可以试试。

使用RequireJS优化JavaScript模块加载的方法 RequireJS是一个优秀的JavaScript模块加载器,它提供了一种优化加载代码的方式,使得我们可以更好地组织和管理JavaScript代码。RequireJS是一个优秀的JavaScript模块加载器,提供了一种优化加载代码的方式,能够更好地组织和管理JavaScript代码。本文将介绍如何使用RequireJS来优化JavaScript模块的加载,包括安装RequireJS、定义模块、处理模块之间的依赖关系以及进行代码的打包和压缩等。我们可以在模块的定义中指定该模块所依赖的其他模块。 阅读详情

相关推荐

r.js (requireJS优化工具)

r.js,requireJS优化工具

requirejs:性能优化-及早并行加载

为了提高页面的性能,通常情况下,我们希望资源尽可能地早地并行加载。这里有两个要点,首先是尽早,其次是并行。 通过data-main方式加载要尽可能地避免,因为它让requirejs、业务代码不必要地串行起来。下面就讲下如何尽可能地利用浏览器并行加载的能力来提高性能。 低效串行:想爱但却无力 最简单的优化,下面的例子中,通过两个并排的script标签加载require.js、main.js,这...

weixin_34250434的博客 353

【论文详解】AlphaGenome——Sequence-to-Multimodal-Genome-Track

**AlphaGenome** 是由 **Google DeepMind** 于 2025 年 6 月发布的突破性 AI 模型,专门用于预测非编码区遗传变异的功能效应。该模型采用受 **U-Net** 启发的卷积架构结合 **Transformer** 模块,创新性地解决了传统模型在输入序列长度与预测分辨率之间的核心矛盾——能够在 **1M 碱基对的超长上下文** 下实现 **单核苷酸分辨率** 的精准预测。

zwhszdx的博客 959

HTML5 Wijmo:控制 Wijmo Grid 插件的编辑模式

Wijmo jQuery 插件经常应用于在财务类网站中创建平滑和良好用户体验的交互表格。WijGrid 插件用于显示、排序、分组和编辑数据。今天我们来分享下如何控件WijGrid插件的编辑模式。 在本篇博客汇总我们将会实现通过以下方式来是 WijGrid 进入编辑状态: 单击 双击 特定列 我们可以通过设置 allowEditing 属性允许 WijGrid 编辑。默认情况下 W...

weixin_30550081的博客 381

Aveva Marine C# 二次开发入门001

1# 引用 C:\AVEVA\Marine\OH12.1.SP4\Aveva.ApplicationFramework.dll C:\AVEVA\Marine\OH12.1.SP4\Aveva.ApplicationFramework.Presentation.dll 2# 引用命名空间, using Aveva.ApplicationFramework.Presentation;usi...

weixin_30245867的博客 1911

学习Python,小白如何搭建Python环境?

学习Python,首先需要搭建好Python环境,主要分为【运行环境搭建】、【开发环境搭建】以及【Python环境配置】三个环节,接下来我将对Python环境搭建这三个部分进行介绍。

weixin_72923265的博客 9000

wjimo组件表格使用(wj-flex-grid标签属性)

wjimo组件表格使用(wj-flex-grid标签属性)

Fightforyourown的博客 1449

Unity游戏开发客户端面经——网络(初级)

Unity游戏开发客户端面经 之 网络 篇

Sea3752的博客 1万+

解决requirejs某文件加载超时问题

1.加载超时问题: 原因:同一个页面里面可能有别的js文件,也引用了这个加载超时的文件(以后称为“此文件”),但是,这两个文件中因为此文件的路径写的不一致,例如:一个文件中写的是在requirejs配置文件中配置的此文件的key(“jquery-ui-timepicker-addon”),而另一个文件中写的是关于此文件的相对路径或者全路径(require([“/libs/jquery/jquery

xujiezi的专栏 3868

Cursor AI对话历史丢失?开源工具一键恢复项目聊天记录

在软件开发中,数据持久化与工作区管理是保障开发效率与上下文连续性的基础技术。其核心原理在于通过文件系统路径、数据库存储等机制,将应用状态与用户数据持久化关联。对于依赖AI辅助编程的开发者而言,对话历史是宝贵的项目上下文资产,记录了关键的算法思路、API使用范例和问题解决方案。然而,当开发工具(如基于VS Code的Cursor)采用基于项目绝对路径的工作区隔离机制时,项目路径的变更会导致历史对话看似“丢失”,实则是被隔离在了旧路径对应的数据沙箱中。这直接影响了开发体验与知识沉淀的效率。cursor-chat

weixin_26775679的博客 828

6、 实时家禽健康识别与疾病检测系统的深入解析

本文深入解析了一种基于物联网的实时家禽健康识别与疾病检测系统,结合图像分析和音频分析技术,能够有效识别病鸡并防止疾病传播。文章详细介绍了系统的测试环境、数据采集与预处理方法、图像与音频分析流程,并对系统性能进行了全面评估。最后提出了未来改进方向,包括多模态融合、深度学习应用及实时性优化等。

weixin_28840811的博客 185

include和require的区别

1.引用文件方式 对include()来说,在include()执行时文件每次都要进行读取和评估;而对于require()来说,文件只处理一次(实际上,文件内容替换了require()语句)。这就意味着如果有包含这些指令之一的代码和可能执行多次的代码,则使用require()效率比较高。另一方面,如果每次执行代码时相读取不同的文件,或者有通过一组文件叠代的循环,就使用include(),因为可以...

weixin_30412167的博客 255

win7 vs2012+wdk8.0 搭建wdf驱动开发环境

开发环境搭建: 系统:win7 x64 工具:vs2012 + WDK8.0 插件:wdfcoinstaller.msi (1)先安装vs2012,再安装wdk8.0,这样在打开vs2012时可以创建windows drivers类型的工程。 注:vs2012不能安装wdk8.1,wdk8.1必须安装在vs2013上 下载链接:http://msdn.microsoft.com/zh-cn/win...

技术联盟 5342

飞书审批提单工作流实战:lark-cli approval 从搜索定义到创建审批实例

本文以官方 Lark/飞书 CLI(lark-cli)的 lark-approval 技能为背景,系统讲解「审批提单」的完整工作流:从搜索可发起审批定义(`approvals search`)→ 获取定义详情(`approvals get`)→ 组装表单与节点参数 → 创建审批实例(`instances create`)。你将掌握原生审批与三方审批(`is_external`)的分流规则、全部表单

gitblog_00065的博客 460

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Wijmo 更优美的jQuery UI部件集:发现 Wijmo

内容 1 什么是Wijmo? 2 jQuery 语法 3 jQuery 选择器 3.1 jQuery 元素选择器 3.2 jQuery 属性选择器 3.3 jQuery CSS 选择器 4 文件准备功能 5 jQuery 选项 6 如何引用Wijmo 7 创建你的第一个jQuery 工程 什么是 Wijmo?...

287

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

Wijmo 更优美的jQuery UI部件集:C1 Wijmo Grids 更多惊喜

本文中,我将给大家介绍一系列非常棒的 Wijmo Grids功能。我们先以一个新的Wijmo Grids 来开始我们这次的 Wijmo Grids 之旅吧。 <BR> <table id="tableDepartmentInformation"><BR> <thead><BR> ...

162

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

葡萄插件整理1 常用方法

・dataKey Field  Javascript  $("#element").wijgrid({ columns: [{ dataKey: "ProductID" }]}); ・doRefresh  $("#element").wijgrid("doRefresh"); ・setSize  Javascript  $("#element").wijgrid("setSize",

潘晓宇(panxiaoyu)的专栏 693
上一篇: 【图解】Web前端实现类似Excel的电子表格
下一篇: 不用Visual Studio,5分钟轻松实现一张报表
ComponentOne服务团队
博客等级 码龄12年 5粉丝 89原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值