Improve performance: Optimize WIJMO Web pages with Requirejs

Last week Wijmo V2 version just released (), a netizen downloaded after the discovery only used a small portion of 40 widgets, but also need to load all the Jquery.wijmo-pro.all.3.20142.45.min.js package? That is, the use of only part of the widget, there is no way to optimize and improve network performance.

650) this.width=650; "Width=" 554 "height=" 453 "title=" image "style=" border-width:0px;padding-top:0px;padding-right : 0px;padding-left:0px;margin-right:auto;margin-left:auto;float:none;background-image:none; "alt=" image "src=" Http://images.cnitblog.com/blog/139239/201408/131434572024188.png "border=" 0 "/>

The answer is yes, there is a way.

In this case, the use of require.js is more appropriate, in fact, Wijmo 2013 has begun to support Require.js, the following is the WIJMO supported JavaScript class library full map.

650) this.width=650; "Width=" 648 "height=" title= "image" style= "border-width:0px;padding-top:0px;padding-right : 0px;padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201408/ 131434587335690.png "border=" 0 "/>

This article explains how to use the Wijmo Table control (Wijgrid) description by comparing the network performance before and after using Requirejs.

Requirejs Overview

Requirejs was created by James Burke, who is also the founder of the AMD specification.

650) this.width=650; "Width=" 174 "height=" 109 "title=" Requirejs "align=" right "style=" float:right; "src="/HTTP/ Wijmo.com/wp-content/uploads/2013/11/requirejs1.png "/>

Requirejs will let you write JavaScript in a different way than usual. You will no longer use the script tag to introduce JS files in HTML and to manage dependencies without the script tag order. Of course, there will be no blocking (blocking) situation happening.

Requirejs is not only used to load module dependencies and related commands, Requirejs helps us to write modular JavaScript code, which is very helpful for the extensibility and reusability of the code.

When the JavaScript module is loaded, the script tag is used, and multiple dependent modules are loaded in the order in which they are introduced. Therefore, when using the script tag, you need to schedule their loading in this particular order. AMD (Asynchronous module definition) allows the JavaScript module and its dependencies to be loaded asynchronously, while maintaining the accuracy of the sequence. The contrast between the two.

650) this.width=650; "Width=" 333 "height=" 287 "title=" 15085801_crx1 "style=" border-width:0px;padding-top:0px; Padding-right:0px;padding-left:0px;background-image:none, "alt=" 15085801_crx1 "src=" http://images.cnitblog.com/ Blog/139239/201408/131435005307505.png "border=" 0 "/>

The Requirejs API exists under the namespace Requirejs created when Requirejs is loaded. The main API is the following three functions:

• define– The function user creates the module. Each module has a unique module ID, which is used for Requirejs run-time functions, and the Define function is a global function that does not need to use the Requirejs namespace.

var wijmo;define (["./wijmo.widget" function () {}

• require– This function is used to read dependencies, global functions, and does not need to use the Requirejs namespace. Used to load module dependencies instead of creating a module.

Require (["Knockout.wijmo", "Wijmo.wijgrid", "wijmo.data.ajax"], function () {}

• config– This function is used to configure 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 "            }         });

AMD Directory of Wijmo: Wijmo-pro.3.20142.45\amd-js

650) this.width=650; "Width=" 244 "height=" 231 "title=" image "style=" border-width:0px;padding-top:0px;padding-right : 0px;padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201408/ 131435012809134.png "border=" 0 "/>

Do not use Requirejs, use Wijmo's Wijgrid Table control

Add Reference

<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-->    &nbsP;<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>

Add a TABLE element to the body

<body> <table id= ' Demo-grid '/></body>

In the Ready event after the page is loaded, add the Wijgrid implementation script

$ (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"  },                   &NBSP, .....                 ]             });         });

Through simple code, the results of the table are implemented

650) this.width=650; "width=" 551 "height=" 225 "title=" image "style=" border-width:0px;padding-top:0px;padding-right : 0px;padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201408/ 131435023587564.png "border=" 0 "/>

We re-refresh--Via Ctrl + F5 button, then watch Chrome's Network debug toolbar

650) this.width=650; "Width=" 174 "height=" 342 "title=" image "style=" border-width:0px;padding-top:0px;padding-right : 0px;padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201408/ 131435041393609.png "border=" 0 "/>

You can see that the rendering is complete and requires about 800ms of time.

Using Requirejs, use the Wijmo wijgrid Table control

Add Reference

<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>

Configure Requirejs, we use CDN provided by Wijmo

Requirejs.config ({baseUrl: "http://cdn.wijmo.com/amd-js/", Paths: {"jquery": "Jquery-1.9.1.min", "JQ Uery-ui ":" Jquery-ui-1.10.1.custom.min "," Jquery.mousewheel ":" Jquery.mousewheel.min "," Globalize ":" Globalize.min "}});

Run results

650) this.width=650; "Width=" 344 "height=" 231 "title=" image "style=" border-width:0px;padding-top:0px;padding-right : 0px;padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201408/ 131435051398780.png "border=" 0 "/>

Summary, after using the Requirejs, the performance from 800ms to 400ms, greatly improve the efficiency of the web, Wijmo Requirejs function can try.

This article is from the "Grape City Control Technology Team Blog" blog, be sure to keep this source http://powertoolsteam.blog.51cto.com/2369428/1539412