基于Web前端的localStorage性能研究与改进

发布时间：2018-06-10 02:16

  本文选题：localStorage + Web前端　； 参考：《吉林大学》2014年硕士论文

【摘要】：互联网蓬勃发展，它已然拥有极高的用户占有率；同时，互联网技术也不断更新换代，如桌面技术一样，互联网技术已然走向更加细致化、专业化的道路，Web前端也逐渐独立为一门独当一面的专业技术，越来越为人们所重视与关注。近年来国内外针对Web前端的研究也逐年增多，对Web前端的性能也更加关注，特别是移动互联网用户的爆发式增长与移动端硬件性能的限制，更促使Web前端性能的研究更加紧迫针对Web前端的性能研究，在国外有著名的YSlow原则，在国内百度、淘宝等公司也专门设立的研究部门。 随着HTML5新标准的发布与执行，Web前端技术趋向于规范化，新标准为Web前端的性能改进提供了新的思路与方向。依据传统的Web前端性能优化方法，减少HTTP请求数、网站总大小与资源总数目能够明显的改善Web前端性能，使用浏览器缓存、Cookie等对页面资源进行缓存能够得到更加良好的效果。针对传统的通过本地缓存进行优化的方案，使用HTML5新标准的localStorage技术能够得到更佳的效果。 现有的localStorage存储技术虽然在一定程度上能够很好的改进Web前端的性能，但是由于localStorage是同步执行的操作，它的执行会阻塞浏览器UI渲染以及后续JavaScript代码的执行，所以本文针对localStorage本身的访问效率进行了研究。经过本文的测试可以发现其具有以下问题：（1）使用localStorage提供的标准接口和下标的形式获取、存储数据的效率不同；（2）频繁访问大量小数据比一次性读取大量数据的性能低很多；（3）localStorage同一个域空间上限的各个浏览器不一致造成抛出错误导致程序终止。 针对上述测试的localStorage已有问题，本文从Web前端开发的角度提出了改进方案：（1）针对调用方式的性能差异，本文通过在原有localStorage提供的接口基础上封装新的统一接口，从而限制用户对接口的调用；（2）针对大量小数据频繁读取的性能问题，本文设计新的存储访问格式与更加灵活的访问方式，并设计了一次性访问的完善机制；（3）针对localStorage的空间上限问题，本文将空间上限的控制划分为两个方面，从应用的角度限制存储数据条数的上限，从程序的角度检测空间上限，根据LRU算法自动清除过去的数据信息以便顺利写入新的数据，，而不致于浏览器自动清空全部数据。 本文的实验部分通过三个实验分别证明了大量访问小数据改进方案性能的优越性（1）频繁读取大量小数据，文章通过使用与localStorage性能测试相同的测试数据对其进行测试，形成性能对比图，可以看到本文的改进方案的改进性能比传统方案至少提高四倍，证明了改进方案的良好表现；（2）写入数据超过应用配置上限但不超过浏览器上限，通过分步写入数据查看localStorage内容结果，同时验证LRU算法实现的正确性，解决了应用上的空间上限问题；（3）写入数据不超过应用配置上限但超过浏览器上限，结果显示本方案对浏览器抛出的错误进行了良好的处理并正确的对数据进行了清理，从而释放了空间，解决了程序上的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 .
【学位授予单位】：吉林大学
【学位级别】：硕士
【学位授予年份】：2014
【分类号】：TP393.09

【参考文献】

中国期刊全文数据库 前2条

1 欧宇灿;刘倍雄;;基于WAMP的教育培训系统的研究设计与实现[J];电子技术与软件工程;2013年22期

2 张正风;强承魁;袁剑锋;;Web性能优化前端方案研究[J];软件导刊;2013年05期

本文编号：2001632