Improve performance: Optimize WIJMO Web pages with Requirejs

Source: Internet
Author: User
Tags define function

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.