当前位置: 首页 > 科技观察

让WebApp更快的HTML5最佳实践_0

时间:2023-03-22 12:32:37 科技观察

Tip1:使用webstorage代替cookiecookie***的缺陷是每次HTTP请求都会携带所有符合规则的cookie数据,这样会增加请求响应时间,特别是XHR请求。更好的做法是在HTML5中使用sessionStorage和localStorage而不是cookie。这种其他方法可以将数据保存在本地或在会话时间将数据存储在本地。数据不会随HTTP请求一起传输,因此我们优先使用网络存储,仅使用cookie作为替代。//iflocalStorageispresent,usethatif(('localStorage'inwindow)&&window.localStorage!==null){//easyobjectpropertyAPIlocalStorage.wishlist='["unicorn","Narwhal","deathbear"]';}else{//withoutsessionStoragewe'llhavetouseafar-futurecookie//withdocument.cookie'sawkwardAPIvardate=newDate();date.setTime(date.getTime()+(365*24*60*60*1000));varexpires=date.toGMTString();varcookiestr='wishlist=["unicorn","Narwhal","deathbear"];'+'expires='+expires+';path=/';document.cookie=cookiestr;}技巧二:使用CSSTransition代替JavaScript动画CSSTransition可以带来更高的性能,更少的代码,更容易维护和理解。技巧三:使用客户端数据库代替服务端请求WebSQLDatabase和IndexedDB,使浏览器具备数据库存储能力。很多应用场景可以迁移到客户端数据库,减少服务器请求次数。localStorage和sessionStorage对于简单的数据存储比客户端数据库更快,可以用来实现一些简单的状态和进度保存。当一个组件需要管理上百条数据(比如好友列表),同时支持用户搜索、过滤、排序时,将一条数据存储在客户端数据库中,可以有效减少HTTP请求的次数。有关详细说明,请参阅WebSQL数据库教程。Tip4:使用JavaScript原生API随着JavaScript高版本的流行,很多新的API,比如Arrayprototype可以在大多数浏览器中直接使用。例如://givemeanewarrayofallvaluesmultipliedby10[5,6,7,8,900].map(function(value){returnvalue*10;});//[50,60,70,80,9000]//createlinkstospecsanddroptheminto#links.varlinksList=document.querySelector('#links');varlinks=[];['html5','css3','webgl'].forEach(函数(值){links.push(value.link('http://google.com/search?btnI=1&q='+value+'spec'));});linksList.innerHTML=links.join('');//返回warrayofall数学常数under2[3.14,2.718,1.618].filter(function(number){returnnumber<2;});//你也可以使用theseextrasonothercollectionslinknodeLists[].forEach.call(document.querySelectorAll('section[data-bucket]'),function(elem,i){localStorage['bucket'+i]=elem.getAttribute('data-bucket');});通常这些原生方法比手动编写循环更快:for(vari=0,len=arr.length;i