Home > Developer > Web Develop

Improve performance: Optimize WIJMO Web pages with Requirejs

Source: Internet
Author: User
Tags define function
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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.

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.

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.

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.

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.
function  () {}
    • config– This function is used to configure Requirejs.
requirejs.config ({            ".. /.. /.. /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

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--> <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 ({                true,                data: [                    [1, ' Malkin ', ' Pit ', 7, 2, 6, 8, 0, 2, ' 20:10 ', 2 ', ' + '],                columns: [                    /c10> "ID", DataType: "Number", DataFormatString: "N0" },                    "skaters" },                   ...                ]            });        });

Through simple code, the results of the table are implemented

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

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 ({    "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 "                }});

Run results

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 an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
building web pages with php improve mysql performance windows improve sql query performance improve linq query performance improve access database performance improve mysql performance improve mysql query performance

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More