本文選題：localStorage + Web前端��； 參考：《吉林大學(xué)》2014年碩士論文

【摘要】：互聯(lián)網(wǎng)蓬勃發(fā)展，它已然擁有極高的用戶占有率；同時，互聯(lián)網(wǎng)技術(shù)也不斷更新?lián)Q代，如桌面技術(shù)一樣，互聯(lián)網(wǎng)技術(shù)已然走向更加細(xì)致化、專業(yè)化的道路，Web前端也逐漸獨(dú)立為一門獨(dú)當(dāng)一面的專業(yè)技術(shù)，越來越為人們所重視與關(guān)注。近年來國內(nèi)外針對Web前端的研究也逐年增多，對Web前端的性能也更加關(guān)注，特別是移動互聯(lián)網(wǎng)用戶的爆發(fā)式增長與移動端硬件性能的限制，更促使Web前端性能的研究更加緊迫針對Web前端的性能研究，在國外有著名的YSlow原則，在國內(nèi)百度、淘寶等公司也專門設(shè)立的研究部門。 隨著HTML5新標(biāo)準(zhǔn)的發(fā)布與執(zhí)行，Web前端技術(shù)趨向于規(guī)范化，新標(biāo)準(zhǔn)為Web前端的性能改進(jìn)提供了新的思路與方向。依據(jù)傳統(tǒng)的Web前端性能優(yōu)化方法，減少HTTP請求數(shù)、網(wǎng)站總大小與資源總數(shù)目能夠明顯的改善Web前端性能，使用瀏覽器緩存、Cookie等對頁面資源進(jìn)行緩存能夠得到更加良好的效果。針對傳統(tǒng)的通過本地緩存進(jìn)行優(yōu)化的方案，使用HTML5新標(biāo)準(zhǔn)的localStorage技術(shù)能夠得到更佳的效果。 現(xiàn)有的localStorage存儲技術(shù)雖然在一定程度上能夠很好的改進(jìn)Web前端的性能，但是由于localStorage是同步執(zhí)行的操作，它的執(zhí)行會阻塞瀏覽器UI渲染以及后續(xù)JavaScript代碼的執(zhí)行，所以本文針對localStorage本身的訪問效率進(jìn)行了研究。經(jīng)過本文的測試可以發(fā)現(xiàn)其具有以下問題：（1）使用localStorage提供的標(biāo)準(zhǔn)接口和下標(biāo)的形式獲取、存儲數(shù)據(jù)的效率不同；（2）頻繁訪問大量小數(shù)據(jù)比一次性讀取大量數(shù)據(jù)的性能低很多；（3）localStorage同一個域空間上限的各個瀏覽器不一致造成拋出錯誤導(dǎo)致程序終止。 針對上述測試的localStorage已有問題，本文從Web前端開發(fā)的角度提出了改進(jìn)方案：（1）針對調(diào)用方式的性能差異，本文通過在原有l(wèi)ocalStorage提供的接口基礎(chǔ)上封裝新的統(tǒng)一接口，從而限制用戶對接口的調(diào)用；（2）針對大量小數(shù)據(jù)頻繁讀取的性能問題，本文設(shè)計(jì)新的存儲訪問格式與更加靈活的訪問方式，并設(shè)計(jì)了一次性訪問的完善機(jī)制；（3）針對localStorage的空間上限問題，本文將空間上限的控制劃分為兩個方面，從應(yīng)用的角度限制存儲數(shù)據(jù)條數(shù)的上限，從程序的角度檢測空間上限，根據(jù)LRU算法自動清除過去的數(shù)據(jù)信息以便順利寫入新的數(shù)據(jù)，，而不致于瀏覽器自動清空全部數(shù)據(jù)。 本文的實(shí)驗(yàn)部分通過三個實(shí)驗(yàn)分別證明了大量訪問小數(shù)據(jù)改進(jìn)方案性能的優(yōu)越性（1）頻繁讀取大量小數(shù)據(jù)，文章通過使用與localStorage性能測試相同的測試數(shù)據(jù)對其進(jìn)行測試，形成性能對比圖，可以看到本文的改進(jìn)方案的改進(jìn)性能比傳統(tǒng)方案至少提高四倍，證明了改進(jìn)方案的良好表現(xiàn)；（2）寫入數(shù)據(jù)超過應(yīng)用配置上限但不超過瀏覽器上限，通過分步寫入數(shù)據(jù)查看localStorage內(nèi)容結(jié)果，同時驗(yàn)證LRU算法實(shí)現(xiàn)的正確性，解決了應(yīng)用上的空間上限問題；（3）寫入數(shù)據(jù)不超過應(yīng)用配置上限但超過瀏覽器上限，結(jié)果顯示本方案對瀏覽器拋出的錯誤進(jìn)行了良好的處理并正確的對數(shù)據(jù)進(jìn)行了清理，從而釋放了空間，解決了程序上的localStorage超過空間上限拋出錯誤的問題。
[Abstract]:The Internet is booming , it has a very high share of users ;
At the same time , Internet technology has been updated and replaced , like desktop technology , Internet technology has become more detailed and professional . The research on Web front - end has become more and more attention . In recent years , the research on the front - end of Web has become more and more attention . Especially , the research on Web front - end performance is more urgent to the performance of Web front - end , and it has the famous YSlow principle abroad , and it is also specially established in China Baidu , Taobao and other companies .

With the release and execution of new HTML 5 standard , Web front - end technology tends to be standardized , and the new standard provides a new idea and direction for the performance improvement of Web front - end . According to the traditional optimization method of Web front - end performance , the Web front - end performance can be improved obviously , the total size of the website and the total number of resources can obviously improve the front - end performance of the Web , and a better effect can be obtained by using the localStorage technology with the new standard of HTML 5 for the traditional scheme optimized through the local cache .

The existing localStorage technology can improve the Web front - end performance to a certain extent , but because localStorage is the synchronous execution , its execution will block browser UI rendering and subsequent JavaScript code execution , so this paper studies the access efficiency of localStorage itself .
( 2 ) frequent access to large amounts of small data is much lower than the performance of one - time reading of large amounts of data ;
( 3 ) The localStorage is inconsistent with each browser in the upper limit of the same domain space , causing the program to terminate due to a thrown error .

Aiming at the existing problems of localStorage in the above - mentioned test , this paper puts forward an improved scheme from the perspective of Web front - end development : ( 1 ) In view of the performance difference of the call mode , the paper encapsulates the new unified interface on the basis of the interface provided by the original localStorage , thereby limiting the call of the user to the interface ;
( 2 ) Aiming at the performance problems frequently read by a lot of small data , this paper designs a new storage access format and a more flexible access way , and designs the perfect mechanism of one - time access .
( 3 ) Aiming at the space upper limit problem of localStorage , this paper divides the control of space upper limit into two aspects . From the angle of application , the upper limit of the number of stored data is limited , the upper limit of space is detected from the angle of the program , and the past data information is automatically cleared according to the lru algorithm so as to smoothly write new data without automatically emptying all the data by the browser .

The experimental part of this paper proves that the superiority ( 1 ) of large amount of access to small data improves the performance of the scheme through three experiments , and the performance comparison chart is formed by using the same test data as localStorage performance test , which can see that the improved performance of the improved scheme is at least four times higher than that of the traditional scheme , which proves the good performance of the improved scheme ;
( 2 ) the writing data exceeds the upper limit of the application configuration but does not exceed the upper limit of the browser , the localStorage content result is viewed through step - by - step writing data , and the correctness of the lru algorithm is verified , and the space upper limit problem on the application is solved ;
( 3 ) The writing data does not exceed the upper limit of the application configuration but exceeds the upper limit of the browser . The result shows that the scheme performs well processing on the errors thrown by the browser and cleans the data correctly , thereby releasing the space , and solving the problem that localStorage in the program exceeds the upper space upper limit and throws an error .
【學(xué)位授予單位】：吉林大學(xué)
【學(xué)位級別】：碩士
【學(xué)位授予年份】：2014
【分類號】：TP393.09

【參考文獻(xiàn)】

中國期刊全文數(shù)據(jù)庫 前2條

1 歐宇燦;劉倍雄;;基于WAMP的教育培訓(xùn)系統(tǒng)的研究設(shè)計(jì)與實(shí)現(xiàn)[J];電子技術(shù)與軟件工程;2013年22期

2 張正風(fēng);強(qiáng)承魁;袁劍鋒;;Web性能優(yōu)化前端方案研究[J];軟件導(dǎo)刊;2013年05期

本文編號：2001632