Performance Study And Improvement Of LocalStorage Based On Web Front-End

Internet has occupied high share of user time and has been well developed.Getting through with many generations, web technology had become more specificdivided and more professional just like PC technology. Developers pay more andmore attention to web front-end technology as well as the performance of it. Since theexploded increase of mobile web users and the limitation of the performance ofmobile hardware, studying on web front-end performance gets more important.Nowadays, YSLOW rules are quite classic abroad, Baidu and Taobao set professionaldepartment for further study in China.In terms of that, web front-end becomes more standardized with the publicationand execution of HTML5. HTML5offers new methods and orientations forimproving the performance of web front-end. According to traditional methods ofoptimizing web front-end performance, we can get good performance by reducingHTTP request, total size of website, and total number of recourses. Apart from this,using browser cache and Cookies can achieve better performance. For the method ofcaching, technology in HTML5, localStorage, will lead to a best result.Though existing technology localStorage, has great impact on optimizingfront-end performance, since it is a synchronous operation, which causes blocking ofUI render and execution of following JavaScript, this paper studies on the accessefficiency of localStorage itself. Tested in this paper can be found which has thefollowing problems:(1) the use of standard interfaces and subscript that localStorageprovided accessing to data leads different efficiency.(2) reading a large amount ofsmall data hurts many performances than reading large amounts of data one-off.(3)the inconsistencies of space limit of each domain in each browser will throw errorswhich causes the program to terminate.For localStorage haves problems above, this article proposes an improved schemefrom the perspective of Web front-end development:(1) for the performancedifference of invocation. The paper packages new unified interface over the basic interface provided by localStorage, thereby limiting the user calls to the interface.(2)for a large number of small data frequently access performance problems, we design anew access format and more flexible ways of accessing data, and also design adisposable access mechanism.(3) for the limitation of localStorage space, this paperdesign resolutions about how to limit space from two aspects. One is from theapplication point of limiting the number of data item, the other is from the perspectiveof the upper limit of the detection space program. Based on LRU algorithmautomatically clears past data in order to successfully write new data, which wouldnot clear all data in localStorage.There are three experiments in this article proved accessing large amounts ofsmall data and superiority of improved scheme.(1) for a large number of small datafrequently access performance problems, we use the same benchmark to form aperformance comparison chart. From the chart we figure that the performance hasbeen quadrupled at least compared with traditional way, which improves a goodperformance.(2) write data exceeds the upper limit of the application configuration,but not exceeding the upper limit of the browser. We write data by fractional and lookinto the content in localStorage. By experiment we verify the correctness of LRU anddeal with the problem of space limitation.(3) write data does not exceed the limit ofapplication configuration but more than the upper limit of the browser. We get theresult that our schema has dealt well with the error that browser throws and releasedspace by clearing data correctly.