新聞中心
上周Wijmo 2014 V2版本剛剛發(fā)布(下載地址), 有網(wǎng)友下載后發(fā)現(xiàn)僅僅使用了40個(gè)Widgets的一小部分,還需要加載全部的jquery.wijmo-pro.all.3.20142.45.min.js包? 即對(duì)僅使用部分的Widget,有無(wú)辦法優(yōu)化而提高網(wǎng)絡(luò)性能呢。
創(chuàng)新互聯(lián)主營(yíng)海鹽網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP軟件開(kāi)發(fā),海鹽h5微信小程序搭建,海鹽網(wǎng)站營(yíng)銷推廣歡迎海鹽等地區(qū)企業(yè)咨詢答案是肯定的,有辦法。
其中針對(duì)這種情況,使用Require.JS再合適不過(guò)了,實(shí)際上Wijmo 2013年已經(jīng)開(kāi)始支持Require.JS了,如下是Wijmo支持的JavaScript類庫(kù)的全圖。
本文就通過(guò)對(duì)比的方式說(shuō)明使用RequireJs前后網(wǎng)絡(luò)性能,以使用Wijmo表格控件(wijgrid)說(shuō)明。
RequireJs概述
RequireJS由James Burke創(chuàng)建,他也是AMD規(guī)范的創(chuàng)始人.
RequireJS會(huì)讓你以不同于往常的方式去寫(xiě)JavaScript。你將不再使用script標(biāo)簽在HTML中引入JS文件,以及不用通過(guò)script標(biāo)簽順序去管理依賴關(guān)系。當(dāng)然也不會(huì)有阻塞(blocking)的情況發(fā)生。
RequireJS不僅僅用于加載模塊依賴和相關(guān)的命令,RequireJS幫助我們寫(xiě)出模塊化的JavaScript代碼,這非常有利于代碼的可擴(kuò)展性和重用性。
當(dāng)加載JavaScript模塊時(shí),就會(huì)使用script標(biāo)簽, 多個(gè)依賴的模塊,會(huì)按照引入的先后順序加載。故,在使用script標(biāo)簽時(shí),你需要按照此特定順序安排它們的加載。AMD(異步模塊定義)可以使得JavaScript模塊和它的依賴被異步的加載,同時(shí),又能保證順序的準(zhǔn)確。 兩者的對(duì)比,如圖所示。
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,使用Wijmo的wijgrid表格控件
添加引用
在Body中添加table元素
在頁(yè)面加載完成后的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" }, ... ] }); });
通過(guò)簡(jiǎn)單的代碼,實(shí)現(xiàn)的表格結(jié)果如圖所示
我們重新刷新--通過(guò)Ctrl + F5按鍵,然后觀察Chrome的Network調(diào)試工具欄
可以看到渲染完成,需要800ms左右的時(shí)間。
使用RequireJs,使用Wijmo的wijgrid表格控件
添加引用
配置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é)果如圖所示
總結(jié),在使用了RequireJs后,性能從800ms提高到400ms,極大的提高了Web運(yùn)行效率,Wijmo的RequireJs功能可以試試。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
當(dāng)前名稱:提高性能:用RequireJS優(yōu)化WijmoWeb頁(yè)面-創(chuàng)新互聯(lián)
瀏覽路徑:http://www.dlmjj.cn/article/cdodio.html