HTML5 本地存储和内容按需加载的思路和方法

2020-03-24 16:28:01

字体：大中小

来源：转载

供稿：网友

HTML5自打出生就注定要开始它不平凡的一生，各大科技公司都对其寄予厚望，并纷纷进行尝试。苹果、谷歌、微软陆续推出HTML5展示页面，各大视频网站也相继宣布支持HTML5视频技术，HTML5地理定位技术更如雨后春笋，在国外社交网站得到应用。另一方面，在移动设备平台，iPhone的出货量已经超过1亿部，而iPad的销量也超过了1500万台，iPad2也在首周销量了近100万台，销售额达到95亿，占整个平板市场份额的90%。我们知道，这俩不支持Flash，这个普及程度提醒我们，提高多平台的兼容性势在必行。同时，在关注网站性能优化的同时，我们应该注意到减少用户加载页面时的加载量也是一个极其重要的方面。可以想象，一个日浏览量1000w次的网站，节省10K的下载量会有多好的效果，这对用户的访问速度和服务器的负载都有极大的好处。网址优化情况为了配合LOL不删档测试，并改善用户浏览时的体验，网址在今年1月份开始了改版。网址尝试采用全新的内容布局思路，对用户做更好的引导。本次改版，网址主要有以下四个方面的调整：大量去除上一版影响浏览的Flash动画，只保留首页下载按钮的Flash效果，加快了页面的加载速度；引导页对用户进行分流，获取游戏资讯的用户进入网址，了解游戏玩法攻略的进入战争学院；首页增强了游戏活动和赛事的展示，采用了不同以往的大型轮播广告和占据页面近三分之一空间的列表；增加了免费英雄展示和游戏荣誉墙的部分。另外针对现状，网址通过采用HTML5本地存储，内容按需加载，延迟加载，文件压缩，CSS Sprites等技术，使页面性能得到了大幅度提升。另外采用HTML5视频技术，使网址在苹果移动平台上有很好的表现。本文将着重介绍HTML5本地存储和内容按需加载的思路和方法，以及HTML5视频技术的效果。LOL网址采用的减少加载量的方法，在首页上为用户节省了至少600K的下载量，同时大大减轻了服务器的负载。HTML5 Web存储。我的一个翻译文档《网络html' target='_blank'>应用程序本地存储的前世今生》也会稍后在博客放出。对于具体实现上，我的做法是：先判断本地是否存在已存储的内容，如果没有数据或者版本已过期（版本其实是我设置的一个变量，当修改这个变量时即为版本过期），加载相应的JS数据，通过一个函数将数据处理为需要的格式，然后存储在本地；如果有且版本没过期，直接从本地获取数据。接着将数据通过函数进行进一步的处理，插入相对应的结构中。网址中，导航、合作媒体、健康游戏公告、脚部声明、免费英雄均采用本地存储，将数据存储在用户的电脑中。其中导航、荣誉墙、合作媒体、健康游戏公告、脚部声明这5个静态板块的本地存储应用一共节省了10多K（IE的本地存储文件实际有30K，是因为IE对内容中的字符进行了转义，以符合XML的规则）的下载量。免费英雄板块属于动态板块，里面的数据是通过游戏提供的一个json文件来获取的（包含游戏里所有英雄的数据，每周的免费英雄都会不同），将其本地存储后，节省了500K的下载量。只是在每周一免费英雄修改时，会重新下载一次。图片随页面滚动加载其实这是很多大型网站都使用了的方法，比如淘宝、拍拍等等。这次在游戏网址里做一个尝试，效果不错，初期为首页节省了几十K的下载量，因为不同显示器分辨率不同，所以第一屏高度不一样，这个数据有所浮动。《御龙在天的iPad之路》。谷歌平台对于Android系统的手机和平板电脑，并不需要做任何多余的事情，只要你的页面符合标准，因为Android手机本身就支持Flash，经过我的测试，LOL网址在HTC Desire下的浏览完全正常。一些小技巧更快的数据解析方式我们通常使用json或者XML的方式来存储大量数据。《高性能Javascript》一书中介绍了一种自定义格式，并测试出自定义格式是解析最快的。其方法是使用符号来间隔数据，比如var test= 1,2,3,4 ，然后使用split( , )来方法来获取各个数据。LOL网址就是用这种方式在本地存储的数据。 CSS Sprites为了减少请求，LOL网址将每个页面的小图片都整合到其各自的一张大图片中，首页更是BT，整合图片有90K。《DNF网址整容手册》。网址的优化永无止尽，其实这次改版后的页面还有很多地方可以优化。比如减少页面的初期渲染量，优化JS以进一步减小CPU占用率，兼容更多的移动平台等等。希望此文档能在今后各个产品的网址改版上帮助到各位同学。html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：深入浅析HTML5中的SVG

下一篇：关于HTML中部分标签的嵌套问题详细介绍（图）