欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

提高性能：用RequireJS優(yōu)化WijmoWeb頁面-創(chuàng)新互聯(lián)

上周Wijmo 2014 V2版本剛剛發(fā)布(下載地址), 有網(wǎng)友下載后發(fā)現(xiàn)僅僅使用了40個(gè)Widgets的一小部分，還需要加載全部的jquery.wijmo-pro.all.3.20142.45.min.js包？ 即對(duì)僅使用部分的Widget，有無辦法優(yōu)化而提高網(wǎng)絡(luò)性能呢。

創(chuàng)新互聯(lián)主營海鹽網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),海鹽h5微信小程序搭建,海鹽網(wǎng)站營銷推廣歡迎海鹽等地區(qū)企業(yè)咨詢

提高性能：用RequireJS優(yōu)化Wijmo Web頁面

答案是肯定的，有辦法。

其中針對(duì)這種情況，使用Require.JS再合適不過了，實(shí)際上Wijmo 2013年已經(jīng)開始支持Require.JS了，如下是Wijmo支持的JavaScript類庫的全圖。

提高性能：用RequireJS優(yōu)化Wijmo Web頁面

本文就通過對(duì)比的方式說明使用RequireJs前后網(wǎng)絡(luò)性能，以使用Wijmo表格控件(wijgrid)說明。

RequireJs概述

RequireJS由James Burke創(chuàng)建，他也是AMD規(guī)范的創(chuàng)始人.

提高性能：用RequireJS優(yōu)化Wijmo Web頁面

RequireJS會(huì)讓你以不同于往常的方式去寫JavaScript。你將不再使用script標(biāo)簽在HTML中引入JS文件，以及不用通過script標(biāo)簽順序去管理依賴關(guān)系。當(dāng)然也不會(huì)有阻塞（blocking）的情況發(fā)生。

RequireJS不僅僅用于加載模塊依賴和相關(guān)的命令，RequireJS幫助我們寫出模塊化的JavaScript代碼，這非常有利于代碼的可擴(kuò)展性和重用性。

當(dāng)加載JavaScript模塊時(shí)，就會(huì)使用script標(biāo)簽, 多個(gè)依賴的模塊，會(huì)按照引入的先后順序加載。故，在使用script標(biāo)簽時(shí)，你需要按照此特定順序安排它們的加載。AMD(異步模塊定義)可以使得JavaScript模塊和它的依賴被異步的加載，同時(shí)，又能保證順序的準(zhǔn)確。 兩者的對(duì)比，如圖所示。

提高性能：用RequireJS優(yōu)化Wijmo Web頁面

RequireJS API 存在于RequireJS載入時(shí)創(chuàng)建的命名空間requirejs下。其主要API主要是下面三個(gè)函數(shù):

  • define– 該函數(shù)用戶創(chuàng)建模塊。每個(gè)模塊擁有一個(gè)唯一的模塊ID，它被用于RequireJS的運(yùn)行時(shí)函數(shù)，define函數(shù)是一個(gè)全局函數(shù)，不需要使用requirejs命名空間.

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

  • require– 該函數(shù)用于讀取依賴，全局函數(shù)，不需要使用requirejs命名空間. 用于加載模塊依賴而不是創(chuàng)建一個(gè)模塊.

require(["knockout.wijmo", "wijmo.wijgrid", "wijmo.data.ajax"], function () {

}

  • config– 該函數(shù)用于配置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

提高性能：用RequireJS優(yōu)化Wijmo Web頁面

不使用RequireJs，使用Wijmo的wijgrid表格控件

添加引用

<link >
    <!--Wijmo Widget CSS-->
    <link >

    <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的實(shí)現(xiàn)腳本

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

        });

通過簡單的代碼，實(shí)現(xiàn)的表格結(jié)果如圖所示

提高性能：用RequireJS優(yōu)化Wijmo Web頁面

我們重新刷新--通過Ctrl + F5按鍵，然后觀察Chrome的Network調(diào)試工具欄

提高性能：用RequireJS優(yōu)化Wijmo Web頁面

可以看到渲染完成，需要800ms左右的時(shí)間。

使用RequireJs，使用Wijmo的wijgrid表格控件

添加引用

<link >
    <!--Wijmo Widget CSS-->
<link >

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

運(yùn)行結(jié)果如圖所示

提高性能：用RequireJS優(yōu)化Wijmo Web頁面

總結(jié)，在使用了RequireJs后，性能從800ms提高到400ms，極大的提高了Web運(yùn)行效率，Wijmo的RequireJs功能可以試試。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文標(biāo)題：提高性能：用RequireJS優(yōu)化WijmoWeb頁面-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://chinadenli.net/article0/cdodio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、做網(wǎng)站、域名注冊(cè)、關(guān)鍵詞優(yōu)化、網(wǎng)站維護(hù)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司