本發(fā)明涉及一種基于localstorage的web前端數(shù)據(jù)本地存儲和訪問方法。
背景技術(shù)：
：隨著web2.0的到來，web應(yīng)用程序的內(nèi)容發(fā)生了變化，由發(fā)布-閱讀模式逐步向用戶-關(guān)系模式轉(zhuǎn)型，對頁面加載時(shí)間的要求日益升高，用戶體驗(yàn)與用戶評價(jià)已成為評價(jià)系統(tǒng)優(yōu)劣的一個(gè)重要指標(biāo)。雖然現(xiàn)在部分網(wǎng)站可以通過服務(wù)器集群來提高系統(tǒng)性能，但費(fèi)用很高，難以負(fù)擔(dān)，在此形勢下，研究人員另辟蹊徑，從客戶端瀏覽器著手，在不增加硬件成本的基礎(chǔ)上，同樣達(dá)到提高系統(tǒng)性能的效果。網(wǎng)絡(luò)的發(fā)展以及前端相關(guān)技術(shù)的發(fā)展，新的前端架構(gòu)產(chǎn)生，新的開發(fā)標(biāo)準(zhǔn)不斷完善，國內(nèi)外的一些知名互聯(lián)網(wǎng)企業(yè)也一直密切關(guān)注著客戶端的存儲，將更多的人和資源放到了本地存儲技術(shù)方案的探究中。特別是html5[1]規(guī)范的發(fā)布，其中的新特性，例如webstorage、indexeddb和websqldatabase等相關(guān)的技術(shù)[2-4]，無需安裝任何插件，運(yùn)用到不同的實(shí)際場景中，為前端開發(fā)領(lǐng)域掀起了一場新的“革命”。使用本地緩存可從減少http請求數(shù)、減少頁面總資源大小和提高頁面加載效率三個(gè)方面來提升網(wǎng)站性能[5]。目前本地存儲的技術(shù)很多，例如cookie、userdata和localstorage等。通過對各項(xiàng)存儲技術(shù)進(jìn)行分析比較，html5的localstorage優(yōu)勢明顯。localstorage[6]有獨(dú)立的存儲空間，擴(kuò)展了本地的存儲容量，大部分主流瀏覽器已實(shí)現(xiàn)兼容，有簡單易用的api，它的存儲內(nèi)容不會被發(fā)送到服務(wù)器上，不與服務(wù)器進(jìn)行交互，并且擁有事件監(jiān)聽機(jī)制，可以監(jiān)控?cái)?shù)據(jù)變化情況。localstorage中的數(shù)據(jù)會保存在客戶端的硬盤上，或者是其它的存儲器上，數(shù)據(jù)會永久保存，除非自己手動(dòng)刪除數(shù)據(jù)。webstorage為localstorage提供了的接口webstorageapi[7]，比cookie的接口更豐富易用，數(shù)據(jù)操作也更為簡便。webstorageapi是一種典型的key-value的數(shù)據(jù)結(jié)構(gòu)[8]，提供了接口對數(shù)據(jù)進(jìn)行操作。localstorage的使用原則是：如果localstorage緩存存在就使用，不存在就直接加載，就是所謂的平穩(wěn)退化(或漸進(jìn)增強(qiáng))。localstorage目前還存在許多不足之處。有實(shí)驗(yàn)表明，當(dāng)訪問的數(shù)據(jù)量相同時(shí)，localstorage讀取一條大數(shù)據(jù)的時(shí)間約為1ms，但是多次讀取等量的小數(shù)據(jù)所花費(fèi)的時(shí)間則是讀取一條大數(shù)據(jù)的幾十倍，也就是說使用localstorage頻繁讀取數(shù)據(jù)，會導(dǎo)致程序性能下降。此外，由于localstorage是永久性存儲，數(shù)據(jù)的使用期限無法控制，因此需要設(shè)計(jì)一個(gè)過期機(jī)制；而且瀏覽器為localstorage分配的存儲空間是有限制的，默認(rèn)為5mb，如果有新數(shù)據(jù)進(jìn)來，空間不夠時(shí)，會拋出quotaexceedederror錯(cuò)誤，出現(xiàn)“寫不了”的情況。因此，針對localstorage存在頻繁讀取數(shù)據(jù)性能低下的問題、數(shù)據(jù)使用期限的問題和空間寫滿報(bào)錯(cuò)程序終止的問題，有必要深入研究localstorage，設(shè)計(jì)一套基于localstorage的本地存儲優(yōu)化方案。技術(shù)實(shí)現(xiàn)要素：本發(fā)明所解決的技術(shù)問題是，針對現(xiàn)有技術(shù)的不足，提供一種基于localstorage的web前端數(shù)據(jù)本地存儲和訪問方法，選用各項(xiàng)存儲技術(shù)中優(yōu)勢明顯的localstorage緩存數(shù)據(jù)，并且能夠克服其不足，改善存儲性能。本發(fā)明所提供的技術(shù)方案為：一種基于localstorage的web前端數(shù)據(jù)本地存儲方法，包括以下步驟：步驟1、根據(jù)緩存數(shù)據(jù)類型將瀏覽器為localstorage分配的存儲空間劃分為多個(gè)存儲區(qū)域；步驟2、設(shè)計(jì)新的數(shù)據(jù)存儲格式，將數(shù)據(jù)存儲模式從key-value模式轉(zhuǎn)變?yōu)閍reaname-jsonobj模式；areaname-jsonobj模式包含areaname和jsonobj兩部分，areaname表示區(qū)域名；jsonobj表示json對象數(shù)據(jù)；jsonobj采用key-obj的形式表示，每個(gè)key對應(yīng)一個(gè)obj，即對象，對象包含兩個(gè)屬性：1)value：存儲的數(shù)據(jù)內(nèi)容；2)exptime：數(shù)據(jù)存儲的終止時(shí)間；步驟3、設(shè)計(jì)新的localstorage接口ls，將其包裝為js插件在系統(tǒng)中使用，將從磁盤中讀取數(shù)據(jù)轉(zhuǎn)換為從內(nèi)存對象中讀取數(shù)據(jù)。進(jìn)一步地，所述步驟1中，將瀏覽器為localstorage分配的存儲空間劃分為四個(gè)存儲區(qū)域，如表1所示：表1本地存儲區(qū)域劃分表區(qū)域名說明jc_ls存儲js、css、html等文件img_ls存儲靜態(tài)圖片資源db_ls存儲從數(shù)據(jù)庫中讀取的數(shù)據(jù)pub_ls存儲公共數(shù)據(jù)進(jìn)一步地，所述步驟3中，新的localstorage接口ls提供的方法如表2所示：表2ls提供的方法進(jìn)一步地，針對存儲空間寫滿錯(cuò)誤，設(shè)置兩種解決方案：1)寫入預(yù)防：localstorage寫入數(shù)據(jù)時(shí)，計(jì)算空間是否已寫滿或者寫入該數(shù)據(jù)導(dǎo)致空間寫滿，若是，則基于lru算法清除“無用數(shù)據(jù)”，騰出空間；2)錯(cuò)誤監(jiān)控：對quotaexceedederror錯(cuò)誤進(jìn)行監(jiān)聽，一旦捕捉到該錯(cuò)誤，則基于lru算法清除“無用數(shù)據(jù)”，騰出空間。lru(leastrecentlyused,最近最少使用)算法的實(shí)現(xiàn)步驟為：s1、在每個(gè)存儲區(qū)域里設(shè)置一個(gè)order項(xiàng)，即在localstorage中存儲一條key值為“order”、value值為數(shù)組的數(shù)據(jù)，用來存儲每條數(shù)據(jù)的key值，該數(shù)組以數(shù)據(jù)的使用時(shí)間從小到大進(jìn)行排序；s2、存儲新數(shù)據(jù)時(shí)，將其對應(yīng)的key值添加到該存儲區(qū)域的order項(xiàng)的數(shù)組的最末端；s3、訪問或者更新數(shù)據(jù)時(shí)，則將該數(shù)據(jù)對應(yīng)的key值移動(dòng)到數(shù)組的最末端；s4、將數(shù)組前端的key值對應(yīng)的數(shù)據(jù)標(biāo)記為“無用數(shù)據(jù)”；需要釋放存儲空間時(shí)，根據(jù)數(shù)組首端的key值刪除對應(yīng)數(shù)據(jù)。本發(fā)明還提供了一種基于localstorage的web前端數(shù)據(jù)訪問方法，數(shù)據(jù)以上述方法進(jìn)行存儲；訪問數(shù)據(jù)時(shí)，首先判斷數(shù)據(jù)存儲區(qū)域，然后使用ls提供的方法將對應(yīng)存儲區(qū)域的數(shù)據(jù)一次性取出，并轉(zhuǎn)換為json對象，存入內(nèi)存變量中，再對內(nèi)存變量進(jìn)行相應(yīng)的操作。進(jìn)一步地，使用ls提供的getdata()方法將對應(yīng)存儲區(qū)域的數(shù)據(jù)一次性取出。進(jìn)一步地，在獲取數(shù)據(jù)時(shí)，得到相應(yīng)的字符串，即value后，使用json的parse()方法，把value轉(zhuǎn)化為json對象。進(jìn)一步地，對內(nèi)存變量進(jìn)行相應(yīng)的操作具體為：1)使用get(key,data)獲取數(shù)據(jù)，判斷key是否存在，若key不存在，則轉(zhuǎn)步驟3)；若key存在，則轉(zhuǎn)步驟2)；2)根據(jù)數(shù)據(jù)的exptime字段判斷數(shù)據(jù)是否已過期，若是，則直接刪除數(shù)據(jù)，不允許進(jìn)行訪問，并轉(zhuǎn)步驟3)；否則，返回對應(yīng)的數(shù)據(jù)；3)返回undefined。有益效果：本發(fā)明針對localstorage目前存在的頻繁讀取時(shí)性能下降、數(shù)據(jù)的使用期限無法控制、存儲空間超限錯(cuò)誤的三個(gè)缺陷，從數(shù)據(jù)格式設(shè)計(jì)和空間寫滿處理機(jī)制兩方面提出了一套優(yōu)化方案。首先是根據(jù)數(shù)據(jù)類型對存儲區(qū)域進(jìn)行分區(qū)設(shè)計(jì)，并設(shè)計(jì)了一種新的數(shù)據(jù)存儲格式areaname-jsonobj，以此為基礎(chǔ)設(shè)計(jì)了新的localstorage的接口ls，將從磁盤中讀取數(shù)據(jù)轉(zhuǎn)換為從內(nèi)存對象中讀取數(shù)據(jù)，解決localstorage頻繁讀取數(shù)據(jù)性能低下的問題；數(shù)據(jù)使用期限的問題。然后針對localstorage存儲數(shù)據(jù)時(shí)超出存儲空間上限就會拋出quotaexceedederror錯(cuò)誤，導(dǎo)致程序終止，出現(xiàn)“寫不了”的情況，在每個(gè)存儲區(qū)域增加一個(gè)order數(shù)組，存儲各數(shù)據(jù)的key值，基于lru算法根據(jù)數(shù)據(jù)的使用時(shí)間排序，首部數(shù)據(jù)標(biāo)記為“無用數(shù)據(jù)”，從前期預(yù)防和后期監(jiān)控兩個(gè)方面設(shè)計(jì)空間寫滿錯(cuò)誤處理機(jī)制，及時(shí)清除“無用數(shù)據(jù)”，騰出空間，保證數(shù)據(jù)的正常寫入。實(shí)驗(yàn)表明，通過對本地存儲方案的改進(jìn)，使得web應(yīng)用性能更優(yōu)。附圖說明圖1localstorage的數(shù)據(jù)存儲模式圖2本發(fā)明改進(jìn)的localstorage的數(shù)據(jù)存儲模式圖3訪問數(shù)據(jù)的過程設(shè)計(jì)圖4localstorage在各瀏覽器的存儲上限圖5各存儲方案的訪問速度對比圖6有無緩存頁面響應(yīng)時(shí)間比較具體實(shí)施方式以下結(jié)合附圖和具體實(shí)施方式對本發(fā)明進(jìn)行進(jìn)一步具體說明。本發(fā)明的主要步驟及原理為：1劃分存儲區(qū)域網(wǎng)站頁面主要包含靜態(tài)資源和動(dòng)態(tài)資源兩個(gè)部分。靜態(tài)資源主要是js、css、圖片甚至是html頁面等資源，動(dòng)態(tài)資源主要是與后臺進(jìn)行交互的各類數(shù)據(jù)。而適合使用localstorage進(jìn)行緩存的數(shù)據(jù)主要包括三類：(1)js、css、html文件和圖片等，適合存儲變動(dòng)頻率不大的此類型文件，加載頁面時(shí)可直接從緩存中讀?。?2)緩存公用數(shù)據(jù)，例如頁面標(biāo)題、廣告等；(3)緩存從數(shù)據(jù)庫中讀取的基本保持不變的數(shù)據(jù)。視頻等空間較大的文件容易超出存儲空間上限，無法使用localstorage存儲。因此，根據(jù)緩存數(shù)據(jù)類型將瀏覽器為localstorage分配的存儲空間劃分為四個(gè)存儲區(qū)域，如表1所示。表1本地存儲區(qū)域劃分表區(qū)域名說明jc_ls存儲js、css、html等文件img_ls存儲靜態(tài)圖片資源db_ls存儲從數(shù)據(jù)庫中讀取的數(shù)據(jù)pub_ls存儲公共數(shù)據(jù)2設(shè)計(jì)新數(shù)據(jù)存儲格式localstorage采用key-value的模式存儲數(shù)據(jù)，value的值必須為字符串類型(傳入非字符串,也會在存儲時(shí)轉(zhuǎn)換為字符串，故只能存儲字符串類型的數(shù)據(jù))，如圖1所示。結(jié)合步驟1中的分區(qū)技術(shù)，本發(fā)明將原始的存儲模式，即key-value模式轉(zhuǎn)變?yōu)閍reaname-jsonobj模式。如圖2所示，areaname-jsonobj模式包含areaname和jsonobj兩部分，areaname表示區(qū)域名；jsonobj表示json對象數(shù)據(jù)；jsonobj采用key-obj的形式表示，每個(gè)key對應(yīng)一個(gè)obj，即對象，對象包含兩個(gè)屬性：1)value：存儲的數(shù)據(jù)內(nèi)容；2)exptime：數(shù)據(jù)存儲的終止時(shí)間。在localstorage中，數(shù)據(jù)只能以字符串形式存儲，不能直接以數(shù)組和對象形式存儲。因此，在存儲數(shù)據(jù)時(shí)，需要使用json(javascriptobjectnotation，js對象標(biāo)記，是一種輕量級的數(shù)據(jù)交換格式)的stringify()方法把json對象轉(zhuǎn)換成字符串進(jìn)行存儲，該字符串即對應(yīng)圖2中的“value”。在獲取數(shù)據(jù)時(shí)，得到相應(yīng)的字符串后(即圖2中的“value”)，使用json的parse()方法，把value轉(zhuǎn)化為json對象。在每個(gè)存取區(qū)域內(nèi)包含多個(gè)json子對象，以分區(qū)+數(shù)據(jù)項(xiàng)的模式存儲數(shù)據(jù)，數(shù)據(jù)形式為{areaname:{key:value,……},……}，?；诟倪M(jìn)的存儲格式，本發(fā)明設(shè)計(jì)了新的localstorage接口ls，將其包裝為js插件在系統(tǒng)中使用，其與原始接口比較如表2所示。表2ls和localstorage提供的方法的比較訪問數(shù)據(jù)時(shí)，首先使用getdata()將對應(yīng)存儲區(qū)域的數(shù)據(jù)一次性取出，轉(zhuǎn)換為json對象，存入內(nèi)存變量中，對內(nèi)存變量進(jìn)行相應(yīng)的操作。具體數(shù)據(jù)訪問過程如圖3所示。圖在圖3的過程中，由于本發(fā)明還未實(shí)現(xiàn)自動(dòng)化識別數(shù)據(jù)所屬區(qū)域，目前只能人工進(jìn)行判斷。判斷數(shù)據(jù)是否過期是根據(jù)exptime字段實(shí)現(xiàn)的，exptime字段中存儲的數(shù)值是毫秒級別的數(shù)據(jù)，所以在讀取數(shù)據(jù)時(shí)，需要將當(dāng)前時(shí)間的轉(zhuǎn)換為毫秒級的數(shù)據(jù)，與exptime字段中存儲的數(shù)值進(jìn)行比較。一旦超限，則直接刪除數(shù)據(jù)，不允許進(jìn)行訪問。在實(shí)際場景中，需要頻繁獲取大批量的數(shù)據(jù)時(shí)，根據(jù)上述的分區(qū)規(guī)則，在使用localstorage存入數(shù)據(jù)時(shí)，全部分配在同一區(qū)域內(nèi)，假設(shè)在db_ls中。根據(jù)上述設(shè)計(jì)的訪問方案分析可知，在訪問數(shù)據(jù)時(shí)，首先使用getdata()方法將db_ls區(qū)域內(nèi)的所有數(shù)據(jù)取出來，轉(zhuǎn)化成json對象，存入內(nèi)存變量中，使用get(key,data)從內(nèi)存變量中獲取目標(biāo)數(shù)據(jù)，最后進(jìn)行各項(xiàng)操作。也就是說，在需要多次獲取同類數(shù)據(jù)時(shí)，使用該方案只需要從localstorage中進(jìn)行一次磁盤訪問操作，然后操作內(nèi)存變量，大量減少了磁盤訪問時(shí)間。此方案的設(shè)計(jì)將從磁盤中訪問數(shù)據(jù)轉(zhuǎn)換為從內(nèi)存變量中訪問數(shù)據(jù)，而從內(nèi)存變量中讀取數(shù)據(jù)的速度比從磁盤中讀取數(shù)據(jù)的速度快得多，由此可以解決localstorage頻繁讀取數(shù)據(jù)的低性能問題。3空間寫滿錯(cuò)誤處理機(jī)制localstorage的存儲容量在500萬字符左右，一旦寫滿，會拋出quotaexceedederror錯(cuò)誤，出現(xiàn)“寫不了”的情況。目前的處理方法是選擇手動(dòng)清除所有緩存，處理的效率十分低下，大部分有用的資源也隨之被清除，下次程序運(yùn)行時(shí)需要重新加載，該處理過程過于簡單粗暴，影響其它功能的操作。對于localstorage的存儲容量，各個(gè)瀏覽器支持的限額各有不同，所以本發(fā)明首先對各個(gè)瀏覽器的存儲限額做了測試，通過網(wǎng)頁工具-testoflocalstoragelimits/quota測試得到各瀏覽器的存儲容量，結(jié)果如圖4所示。從圖中可以看出，各個(gè)瀏覽器為localstorage分配的存儲容量存在很大差距，存儲容量且因?yàn)g覽器版本的不同也會有所變化，由此會造成寫滿錯(cuò)誤拋出的不可控。本發(fā)明選擇通過統(tǒng)一設(shè)置空間上限、檢測已用空間大小并限制寫入數(shù)據(jù)大小、及時(shí)清除無用數(shù)據(jù)，盡量避免拋出寫滿錯(cuò)誤，保證存儲功能的正常運(yùn)行。依據(jù)html5本地存儲中l(wèi)ocalstorage的存儲空間大小默認(rèn)為5mb，本發(fā)明在應(yīng)用測試中設(shè)置localstorage的存儲容量為5mb，設(shè)置其它容量上限也可以，對本發(fā)明技術(shù)方法實(shí)現(xiàn)無影響。但如果容量上限太小，將會影響數(shù)據(jù)讀取速度，從而降低頁面響應(yīng)速度。針對存儲空間寫滿錯(cuò)誤，設(shè)置有兩種解決方案：(1)寫入預(yù)防：localstorage寫入數(shù)據(jù)時(shí)，計(jì)算空間是否已寫滿或者寫入該數(shù)據(jù)導(dǎo)致空間寫滿，若是，則基于lru算法清除“無用數(shù)據(jù)”，騰出空間；(2)錯(cuò)誤監(jiān)控：對quotaexceedederror錯(cuò)誤進(jìn)行監(jiān)聽，一旦捕捉到該錯(cuò)誤，則基于lru算法清除“無用數(shù)據(jù)”，騰出空間。lru(leastrecentlyused，最近最少使用)算法的實(shí)現(xiàn)步驟如下：(1)在每個(gè)存儲區(qū)域里設(shè)置一個(gè)order項(xiàng)，即在localstorage中存儲一條key值為“order”、value值為數(shù)組數(shù)據(jù)，用來存儲每條數(shù)據(jù)的key值，該數(shù)組以數(shù)據(jù)的使用時(shí)間從小到大進(jìn)行排序；(2)存儲新數(shù)據(jù)時(shí)，將其對應(yīng)的key值添加到該存儲區(qū)域的order項(xiàng)的數(shù)組的最末端；(3)訪問或者更新數(shù)據(jù)時(shí)，則將該數(shù)據(jù)對應(yīng)的key值移動(dòng)到數(shù)組的最末端。(4)執(zhí)行上述步驟后，order數(shù)組可以按要求正確排序，數(shù)組前端的key值對應(yīng)的數(shù)據(jù)就是近期最少使用的數(shù)據(jù)，標(biāo)記為“無用數(shù)據(jù)”。在需要釋放存儲空間時(shí)只需要根據(jù)數(shù)組首端的key值刪除對應(yīng)數(shù)據(jù)就可以滿足要求。4實(shí)驗(yàn)及結(jié)果分析對本發(fā)明提出的優(yōu)化方案進(jìn)行性能測試，通過實(shí)驗(yàn)驗(yàn)證該方案的可行性，主要從新數(shù)據(jù)存儲格式的繁讀取數(shù)據(jù)性能、使用緩存方案對頁面性能的影響兩方面進(jìn)行驗(yàn)證。4.1新數(shù)據(jù)存儲格式下頻繁讀取數(shù)據(jù)的性能評估本發(fā)明設(shè)計(jì)了新的數(shù)據(jù)存儲格式來解決localstorage頻繁讀取數(shù)據(jù)性能低下的問題，該實(shí)驗(yàn)用來設(shè)計(jì)驗(yàn)證新的數(shù)據(jù)存儲格式的正確性和高性能，實(shí)驗(yàn)使用chrome52瀏覽器進(jìn)行操作。預(yù)先在存儲區(qū)域存儲相同數(shù)量的數(shù)據(jù)，并且每條數(shù)據(jù)的大小保持一致，分別使用本發(fā)明的方案和直接使用localstorage訪問相同的數(shù)據(jù)量，記錄其所消耗的時(shí)間。實(shí)驗(yàn)結(jié)果如圖5所示。由圖5可以看出，使用本發(fā)明設(shè)計(jì)的新的數(shù)據(jù)存儲格式訪問數(shù)據(jù)時(shí)，所花費(fèi)的時(shí)間比直接使用localstorage方法訪問時(shí)要少幾倍，并且，訪問的數(shù)據(jù)越多，兩者的差距越大，在數(shù)據(jù)量為50000時(shí)，新方案花費(fèi)的時(shí)間比舊方案少了約7倍的時(shí)間，也就是說，使用改進(jìn)的方案，訪問數(shù)據(jù)量越大，訪問時(shí)間越少，訪問速度更快，性能更佳。那么，為什么會造成這兩種方案的性能存在如此大的差異？localstorage方法所存儲的數(shù)據(jù)是放在硬盤上的，從localstorage讀取多少次數(shù)據(jù)，就需要從硬盤上讀取多少次數(shù)據(jù)。由于cpu只能直接訪問內(nèi)存中的數(shù)據(jù)，所以從硬盤上讀取數(shù)據(jù)首先需要從硬盤中找到該數(shù)據(jù)，然后將其傳輸?shù)絻?nèi)存中，如此才能進(jìn)行訪問操作。這也就意味著，從localstorage中讀取一次數(shù)據(jù)的時(shí)間等于磁盤中數(shù)據(jù)查找的時(shí)間和數(shù)據(jù)傳輸時(shí)間之和。本發(fā)明的改進(jìn)方案是先取出某區(qū)域內(nèi)所有數(shù)據(jù)，然后轉(zhuǎn)換為json對象進(jìn)行取值，這一過程中只需要從localstorage中取一次數(shù)據(jù)。這樣的話，本發(fā)明的方案訪問數(shù)據(jù)的總時(shí)間等于從localstorage中訪問一次數(shù)據(jù)的時(shí)間與從json對象中取值的時(shí)間之和。從json對象中取值時(shí)，是由js代碼運(yùn)行的，瀏覽器在加載頁面時(shí)，會將js代碼加載到為瀏覽器分配的內(nèi)存中，那么從json中獲取數(shù)據(jù)就相當(dāng)于只需要從內(nèi)存中獲取數(shù)據(jù)。表3是從json對象中訪問數(shù)據(jù)量與所需花費(fèi)的時(shí)間的關(guān)系表示。表3從json中訪問數(shù)據(jù)的次數(shù)與訪問時(shí)間的關(guān)系表json中訪問的數(shù)據(jù)所占字符數(shù)與使用圖5的實(shí)驗(yàn)訪問數(shù)據(jù)所占字符數(shù)相同，并且一次只訪問一條數(shù)據(jù)，所以訪問數(shù)據(jù)個(gè)數(shù)與訪問次數(shù)是等價(jià)的。將表3中的數(shù)據(jù)與圖5中使用改進(jìn)方案的數(shù)據(jù)進(jìn)行比較，在訪問數(shù)據(jù)量相同的情況下從json中訪問數(shù)據(jù)的訪問時(shí)間與改進(jìn)方案中所消耗的訪問時(shí)間相比較，相差1ms左右，這也就意味著本方案的訪問時(shí)間消耗在從json中獲取數(shù)據(jù)這一步驟上，而從localstorage中訪問一次大數(shù)據(jù)的時(shí)間只需要1ms左右。通過上述分析，可以得出結(jié)論：造成兩種方案的差距如此之大的原因在于從json對象中讀取數(shù)據(jù)的速度比從localstorage讀取數(shù)據(jù)的速度快。改進(jìn)的方案大大減少了直接從localstorage中獲取數(shù)據(jù)的次數(shù)。因此，對于需要對某類數(shù)據(jù)進(jìn)行頻繁訪問時(shí)，使用本發(fā)明設(shè)計(jì)的方案降低訪問負(fù)擔(dān)，減少訪問時(shí)間。對于每優(yōu)化一毫秒，就能提高6％的web前端性能來說，本發(fā)明設(shè)計(jì)的方案的效果顯著，是可行的。4.2優(yōu)化存儲方案的性能分析衡量web前端的性能指標(biāo)主要有頁面加載時(shí)間(userlatency或sitespeed)進(jìn)行考量，它是衡量應(yīng)用程序可用性的一個(gè)重要指標(biāo)，指的是頁面從加載開始到加載完成所消耗的時(shí)間，該指標(biāo)可以從整體上反映應(yīng)用程序的訪問速度，并且本發(fā)明的方案是通過對頁面加載過程中的客戶端渲染階段進(jìn)行性能優(yōu)化的。該實(shí)驗(yàn)使用myeclipse8.5進(jìn)行開發(fā)，tomcat7作為web服務(wù)器，mysql5.5作為數(shù)據(jù)庫，ie9作為測試瀏覽器，使用httpwatch記錄實(shí)驗(yàn)結(jié)果，外在實(shí)驗(yàn)環(huán)境保持一致。該實(shí)驗(yàn)為了簡化操作，只是簡單的設(shè)計(jì)了一個(gè)首頁main.jsp，頁面元素包含js文件、css文件和圖片等，為了減少實(shí)驗(yàn)誤差，除了存儲方案不同外，其他的頁面數(shù)據(jù)和相關(guān)條件均保持一致，整個(gè)實(shí)驗(yàn)過程中只打開該頁面，最大程度的保證各個(gè)實(shí)驗(yàn)產(chǎn)生的差距是由實(shí)驗(yàn)設(shè)置的關(guān)鍵因素造成的，盡量保證實(shí)驗(yàn)的準(zhǔn)確性。首先測試的是不同的數(shù)據(jù)類型在使用本發(fā)明的緩存優(yōu)化方案和無緩存的條件下的加載時(shí)間。本地緩存的數(shù)據(jù)主要有js文件、css文件和圖片，每次只單獨(dú)存儲一種類型，分別測試這三種文件的載入時(shí)間。各資源在使用緩存前后的加載時(shí)間情況如表4所示。表4不同數(shù)據(jù)類型的緩存效果通過對上表的結(jié)果分析，使用緩存機(jī)制，瀏覽器不需從服務(wù)器加載資源，直接從本地緩存中獲取資源，眾所周知，操作本地內(nèi)存中的資源比操作服務(wù)器上的資源的速度高多個(gè)數(shù)量級，因此優(yōu)化方案可加速網(wǎng)頁各項(xiàng)元素載入的時(shí)間，速度提升了數(shù)倍，從而可以減少頁面的總加載時(shí)間，效果顯著。另外，對整個(gè)頁面的響應(yīng)時(shí)間進(jìn)行實(shí)驗(yàn)，實(shí)驗(yàn)場景分為使用本發(fā)明的存儲方案進(jìn)行數(shù)據(jù)存儲和直接獲取數(shù)據(jù)，無任何緩存。兩種場景下緩存的數(shù)據(jù)保持一致，每完成一種情況的測試，清除所有緩存，頁面其他元素保持不變，記錄首次訪問和之后訪問4次的頁面加載時(shí)間，實(shí)驗(yàn)結(jié)果如表5所示。表5頁面響應(yīng)時(shí)間比較(單位：s)根據(jù)上述結(jié)果，繪制對比折線圖，如圖6所示。在首次訪問頁面時(shí)，使用本發(fā)明改進(jìn)的緩存方案時(shí)，由于存儲數(shù)據(jù)的各項(xiàng)操作的消耗，加載時(shí)間加長。第二次訪問時(shí)，應(yīng)用本發(fā)明的緩存方案，加載頁面的響應(yīng)時(shí)間比不使用緩存減少了大約50％，相比首次訪問頁面的時(shí)間明顯降低，這是因?yàn)樵谑状握埱蠛螅撁娴牟糠謹(jǐn)?shù)據(jù)已被緩存，而后續(xù)在加載頁面時(shí)，頁面的加載時(shí)間與第二次訪問時(shí)基本無變化。參考文獻(xiàn)：[1]lubbersp,salimf,albersb.prohtml5programming.usa:apress,2011.5-304.[2]張紫薇.web前端性能優(yōu)化的研究與應(yīng)用[d].成都：電子科技大學(xué),2010.[3]尹樂,許剛強(qiáng).基于html5的離線web應(yīng)用設(shè)計(jì)與實(shí)現(xiàn)[j].中國高新技術(shù)企業(yè),2014,(12):17-19.[4]劉繼.html5中extjs和websqldatabase的使用[j].信息通信,2015,(09):129-130.[5]王成,李少元,鄭黎曉,緱錦,曾梅琴,劉慧敏.web前端性能優(yōu)化方案與實(shí)踐[j].計(jì)算機(jī)應(yīng)用與軟件,2014,(12):89-95+147.[6]brucelawson,remysharp.html5用戶指南[m].機(jī)械工業(yè)出版社.2011.[7]ianhickson.webstorageeditor’sdraft17january2014[eb/ol].[2014-01-17].http://dev.w3.org/html5/webstorage/.[8]oehlmand,blancs.proandroidwebapps.usa:apress,2011.47-63。當(dāng)前第1頁12