您現在的位置是:電腦技術吧?>? 組裝維修 ??>??什么是延遲加載,延遲加載和立即加載??>??正文詳情

什么是延遲加載,延遲加載和立即加載

卿海菡2019-12-14 16:22:27 人圍觀
簡介延遲加載的好處本文主要介紹在JavaScript應用程序中使用requirejs來實現延遲加載。JavaScript是一個流行的JS庫。您可以引用簡單或復雜的web應用程序,html延遲加載

這篇文章主要介紹了在JavaScript應用中使用RequireJS來實現延遲加載,JavaScript是一款人氣JS庫,需要的朋友可以參考下  無論簡單還是復雜的Web應用,都由一些HTML、JavaScript、CSS文件組成。

通常開發者會通過JQuery、Knockout、Underscore等等這樣的第三方JavaScript框架來提高開發速度。

由于這些JavaScript框架都針對特定的用途開發而且已經得到了驗證,所以直接使用它們就比自己從頭實現所需要的功能顯得更為合適。

然而,伴隨著應用的復雜度不斷上升,寫出干凈、低耦合、可維護的代碼變得越來越重要。

在這篇文章里,我將解釋 RequireJS框架如何幫助應用開發者寫出更加模塊化的代碼,以及它是如何通過延遲加載JavaScript文件來提高應用性能的。

  開始的部分我們先不用RequireJS框架,然后在下一個章節用RequireJS來重構它。

  下面的這個HTML頁面包含了一個id為message的元素。

當用戶訪問這個頁面的時候,它將展示訂單Id和客戶姓名信息。

  Common.JS文件包含了兩個模塊的定義Order和Customer。

函數showData和頁面的body結合在一起,它通過調用write函數來把要輸出的信息放入頁面中。

作為示例,我在showData函數里硬編碼了Id為1,客戶姓名為Prasad。

  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 !DOCTYPE html html head titleJavaScript NonRequireJS/title script src=common.js type=text/javascript/script /head body strongDisplay data without RequireJS/strong p id=message / script type=text/javascript showData(); /script /body /html Common.JS function write(message) { document.getElementById('message').innerHTML = message '/br'; } function showData() { var o = new Order(1, Prasad); write(Order Id : o.id Customer Name : o.customer.name); } function Customer(name) { this.name = name; return this; } function Order(id, customerName) { this.id = id; this.customer = new Customer(customerName); return this; }   在瀏覽器中打開這個頁面,你將看到如下的信息。

  雖然上面的代碼能夠顯示輸出,但是它仍有一些問題:  Common.JS文件包含了所有需要定義的函數(write,showData),而且模塊(Order,Customer)很難維護和復用。

假如你想在其它頁面里復用write函數并引用了上面的JavaScript文件,那么你也導入了這個頁面可能不需要的其它函數和模塊。

  Order模塊(或者在面向對象中叫做類)在初始化過程中創建了一個Customer模塊的實例。

這意味著Order模塊依賴于Customer模塊。

這些模塊間的緊耦合使得將來在優化時很難重構與維護。

  每當客戶端請求這個頁面時,Common.JS文件就會被載入DOM。

在上面這個例子中,盡管我們只需要在頁面上輸出信息,但我們仍把那些不需要的模塊(Customer,Order)載入了內存。

載入不必要的應用資源(JavaScript、CSS、圖片文件等等)會降低應用的性能。

  Common.JS文件里的模塊可以被分離到不同的JavaScript文件里,但是當應用變得越來越復雜時,很難判斷JavaScript文件之間的依賴關系與需要被加載的文件的加載順序。

  RequireJS框架處理了JavaScript文件間的依賴關系,并且根據需要按順序加載它們。

  用RequireJS搭建應用  現在讓我們看看重構過的代碼。

下面的HTML代碼引用了Require.JS文件。

data-main屬性定義了這個頁面的唯一入口點。

在下面這個場景中,它告訴了RequireJS在啟動的時候加載Main.js。

  ? 1 2 3 4 5 6 7 8 9 10 11 !DOCTYPE html html head titleJavaScript RequireJS/title script src=Require.Js type=text/javascript data-main=Main.js/script /head body strongDisplay data using RequireJS/strong p id=message / /body /html   Main.JS  由于這個文件已經通過data-main屬性指定,RequireJS將會盡快的加載它。

這個文件使用了RequireJS框架的函數來確定和定義對于其它JavaScript文件的依賴關系。

在下面的代碼片段里,第一個參數表示依賴關系(依賴Order.JS文件),第二個參數為一個回調函數。

RequireJS分析所有的依賴關系并載入它們,然后執行這個回調函數。

請注意,第一個參數的值(Order)必須和文件名一致(Order.JS)。

  ? 1 2 3 4 require([Order], function (Order) { var o = new Order(1, Prasad); write(o.id o.customer.name); });   Order.JS  RequireJS框架提供了一個定義和維護JavaScript文件間依賴關系的簡便途徑。

下面代碼中的define函數聲明了Customer.JS必須在處理Order回調函數前載入。

  ? 1 2 3 4 5 6 7 8 9 10 define([Customer], function (Customer) { function Order(id, custName) { this.id = id; this.customer = new Customer(custName); } return Order; } ); Customer.JS   這個文件不依賴于任何其它JavaScript文件,所以define函數的第一個參數的值是一個空數組。

  ? 1 2 3 4 5 6 7 8 define([], function () { function Customer(name) { this.name = name; } return Customer; } );   好了,現在用你的瀏覽器打開這個應用,你將會看到如下的輸出。

要注意的是RequireJS只載入了必需的JavaScript文件。

  總結  在這篇文章里,我們分析了RequireJS框架是如何處理JavaScript文件間的依賴關系并根據需要載入它們的。

它能夠幫助開發者寫出更松耦合、更模塊化且更具有可維護性的代碼。

版權聲明:本文由 卿海菡 整理編輯。

原標題:頁面延遲加載,延遲加載是什么意思

轉載注明出處:http://www.dn9ww09s.icu/assemble/15460.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • ios是誰開發的,ios用什么開發

    ios是誰開發的,ios用什么開發 相關圖片ios開發難嗎我們可以在/usr/include/objc/objc中找到類和對象的定義。H和運行時。H:typedef struct objc_class*類;typedeios 開發教程...

  • 物理解密pc游戲,物理游戲

    物理解密pc游戲,物理游戲 相關圖片pc是指什么本文主要介紹如何獲取PC機和板卡的物理地址。您可以參考以下代碼來獲取PC的物理地址命名空間:使用系統。管理;代碼如下:///summary///get MAC的物理地址怎么算...

  • 訪問文件時出錯,訪問pptx文件時出錯

    訪問文件時出錯,訪問pptx文件時出錯 相關圖片為什么文件訪問被拒絕在同一個程序中,一些瀏覽器會出錯,而其他瀏覽器則不會。錯誤的原因是設置MIME類型的代碼錯誤。如果是JSP文件:代碼如下:%@page contenttype=刪除文件時訪問被拒...

  • 網頁亂碼如何解決,網頁打開亂碼怎么解決

    網頁亂碼如何解決,網頁打開亂碼怎么解決 相關圖片電腦顯示亂碼JSP開發與應用中,中文置亂是一個常見的問題,其根源是:web容器默認字符處理代碼是iso-8859-1。示例1:當顯示JSP頁面時,htmlheadtitle手機解決html文件亂碼...

  • 因為找不到必要的CMap文件,找不到必要的cmap文件

    因為找不到必要的CMap文件,找不到必要的cmap文件 相關圖片無法置入文檔因為上周安裝Office 2003升級修補程序失敗后,每次打開excel時,都會找到安裝文件,并提示您找不到必需的安裝文件sku001.cab。在網上搜索后,我發現保存pdf格式...

  • 數組長度和字符串長度,數組的長度可以是字符串嗎

    數組長度和字符串長度,數組的長度可以是字符串嗎 相關圖片java字符串長度本文的例子描述了PHP將字符串隨機劃分為不同長度的數組的方法。與您分享以供參考。具體分析如下:這里使用PHP對指定長度范圍內的字符串進行隨機劃分,劃分后的結果...

  • 程序崩潰怎么解決,應用程序崩潰怎么解決

    程序崩潰怎么解決,應用程序崩潰怎么解決 相關圖片微信小程序崩潰我們經常在iPhone或iPad平板電腦上遇到應用程序崩潰的問題。有時我們打開一個應用程序,它就會閃回。這對開發人員來說絕對是個頭疼的問題。如何獲取IOS設備崩軟件崩...

  • asp分頁代碼,asp分頁代碼123

    asp分頁代碼,asp分頁代碼123 相關圖片asp下一頁代碼這是用于生成靜態頁的ASP paging list的ASP applet腳本代碼:!--include file=CONN.ASP--htmlheadlitleasp帶數字的分頁...

  • 字符串去掉空格,c去掉字符串的空格

    字符串去掉空格,c去掉字符串的空格 相關圖片去掉字符串中的某個字符一。弦。Trim()Trim()是刪除第一個和最后一個空格。2。replace(,);要刪除所有空格,包括第一個和最后一個空格,中間代碼如下:String St字符串刪除空格...

  • memcached安裝,memcached安裝教程

    memcached安裝,memcached安裝教程 相關圖片memcached教程本文主要介紹在PHP中安裝memcached擴展的注意事項。本文介紹了服務器的安裝、launchpad、memcached擴展的安裝以及php.ini的配置。對緩存memcached...

熱評文章

  • emlog友情鏈接插件,Typecho插件

    emlog友情鏈接插件,Typecho插件 相關圖片typecho優酷插件本文主要介紹Typecho插件編寫教程(2):編寫一個新的插件,這是一系列文章中的第二篇。對于需要參考下一節的朋友,我們了解插件的基本結構,并且需要一個示例來實...

  • EL表達式難嗎,EL表達式和JSTL標簽

    EL表達式難嗎,EL表達式和JSTL標簽 相關圖片el表達式輸出首先,JSP e l語言定義了El(表達式語言)的目的:使JSP更易于編寫。表達式語言的靈感來源于ECMAScript和XPath表達式語言,為JSP中的表達式el表達式和jstl...

  • 數據庫怎么和程序鏈接,數據庫和程序如何連接

    數據庫怎么和程序鏈接,數據庫和程序如何連接 相關圖片程序鏈接vip數據庫一。刪除記錄opendataconn'open the database connection xxlb=rtnreplaceint(trim(request(數據庫怎么和網頁鏈接...

  • request和response,request response

    request和response,request response 相關圖片關于response用法本文主要介紹了asp.ne響應對象和請求對象的使用。對于朋友,請參考以下1。響應:服務器發送給客戶端的信息,或服務器發送給用戶的輸出。重定向:將客戶端重定向到...

  • iOS3D游戲,ios 3dtouch

    iOS3D游戲,ios 3dtouch 相關圖片ios3dtouch在哪開首先需要獲取mono.data.sqlite.dll文件和system.data.dll文件。如果你在MAC上使用unity,那就太悲劇了。我找不到這兩個文件,3dtouch怎么用...

  • 給數組排序,對數組進行排序

    給數組排序,對數組進行排序 相關圖片數組隨機排序本文給出了一個在JavaScript中實現隨機數組排序的例子。與您分享以供參考。具體實現方法如下:?1234函數洗牌(o){for(VaR J,x,I=o.le快速排序數組...

  • mongodb php,php怎么使用mongodb

    mongodb php,php怎么使用mongodb 相關圖片nginx php說到PHP和mongodb,我們首先要介紹一下PHP的官方手冊。網站是:http://us.php.net/manual/en/book.mongo.php。接nginx phpfpm...

  • 簡體轉繁體,簡體字繁體字

    簡體轉繁體,簡體字繁體字 相關圖片word繁體轉簡體%Test1=新的?.中國?Test2=新信譽。China response.write big5andgb2312(test1,1)response.writ中的繁體字...

  • jsp服務器都有哪些,jsp是在服務器運行

    jsp服務器都有哪些,jsp是在服務器運行 相關圖片web服務器 應用服務器Java只能獲取一次,而且到達頁面的時間是靜態的。然而,通過JS與Java的合作,Java巧妙地實現了這一功能。Java獲取服務器時間,并將其動態顯示到JSP頁jsp上傳文件到...

  • asp運行,asp.net mvc5

    asp運行,asp.net mvc5 相關圖片net和web本文主要介紹了asp.net網站停止運行的原因記錄的具體實現。必須記錄導致網站停止運行的原因。下面是具體的實現方法。代碼如下:protected void apiis支持asp嗎...

關注微信

变脸官网查询