论文部分内容阅读
互联网蓬勃发展,它已然拥有极高的用户占有率;同时,互联网技术也不断更新换代,如桌面技术一样,互联网技术已然走向更加细致化、专业化的道路,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超过空间上限抛出错误的问题。