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

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的下载量，同时大大减轻了服务器的负载。

首页GTmetrix得分

整体健康度（其中首页1秒健康度70%以上，2秒健康度80%以上，3秒健康度90%以上）

减少页面加载量最主要的目的是减少资源消耗，加快页面的呈现速度。虽然延迟加载可以在一定程度上优化页面的性能，但不是所有的内容都需要第一时间加载给用户看或者重复加载的。比如用户在浏览页面第一屏的内容，那么页面在打开时就加载第一屏以下的一些内容就不是很有必要。再或者，官网页面中一些相同的部分，如导航、脚部声明等部分，这些修改率极低的内容每次都从服务器请求，在一定程度上增加了页面加载的负荷。

减少页面加载量的方法有很多，这次LOL官网改版主要用到了以下方法：

采用HTML5本地存储技术，在用户电脑里存储页面的一些内容，如导航，合作媒体，脚部声明等。这样用户在加载页面时，浏览器直接从本地获取这些内容，在一定程度上减少了资源的消耗。

图片随滚动条滚动加载，使用户在浏览页面时，动态按需加载图片。比如，用户在浏览第一屏内容时，第一屏以后的图片是没有加载的，当用户滚动页面时，呈现在浏览器中的部分会动态加载图片。

优化轮播广告的加载方式，页面打开时只加载第一张图片，在轮播到第二张图片时，才请求加载第二张图片，以此类推。

按需加载页卡的内容，官网首页右上角的新闻板块，加载时只请求第一个页卡的内容，当用户点击其他页卡时，再加载页卡的内容。

简单的说，本地存储就是为网页通过客户端网页浏览器在本地存储键值对的一个方法。就像Cookie，就算你离开了网站，关闭了浏览器标签，退出浏览器等等，数据也会一直存在。与Cookie不同的是，数据绝不会向遥远的网络服务器传送（除非你使用其他方法来手动传输）。不同于提供长期本地存储的上述所有尝试，它在网页浏览器内以原生的方式执行，因此在第三方浏览器插件失效的情况下它也能有效执行。

我们对于支持HTML5的浏览器(Firefox、Chrome、Safari、Opera等)，使用HTML5的localStorage提供的方法；对于IE浏览器，使用IE提供的userData方法；对于其他浏览器使用常规方法加载内容。

IE的本地存储数据

userData是IE提供的一个本地存储方法，他将需要存储的内容放置在本地的一个XML文件中，并在页面的一个元素中设置一个调用的锚点。具体使用方法为：使用getElementById获取页面内的一个元素，使用addBehavior(“#default#userData”)对其添加本地存储的行为；使用setAttribute将需要存储的内容对其进行赋值，并用save(“XXX”)方法将内容存储在名为XXX的XML文件中；使用load(“XXX”)方法加载本地的XXX.xml文件，并用getAttribute获取已经存储的内容。

Chrome的本地存储数据

关于HTML5本地存储localStorage的详细方法，请参见HTML5 Web存储。我的一个翻译文档《网络应用程序本地存储的前世今生》也会稍后在博客放出。

对于具体实现上，我的做法是：先判断本地是否存在已存储的内容，如果没有数据或者版本已过期（版本其实是我设置的一个变量，当修改这个变量时即为版本过期），加载相应的JS数据，通过一个函数将数据处理为需要的格式，然后存储在本地；如果有且版本没过期，直接从本地获取数据。接着将数据通过函数进行进一步的处理，插入相对应的结构中。

官网中，导航、合作媒体、健康游戏公告、脚部声明、免费英雄均采用本地存储，将数据存储在用户的电脑中。

其中导航、荣誉墙、合作媒体、健康游戏公告、脚部声明这5个静态板块的本地存储应用一共节省了10多K（IE的本地存储文件实际有30K，是因为IE对内容中的字符进行了转义，以符合XML的规则）的下载量。

免费英雄板块属于动态板块，里面的数据是通过游戏提供的一个json文件来获取的（包含游戏里所有英雄的数据，每周的免费英雄都会不同），将其本地存储后，节省了500K的下载量。只是在每周一免费英雄修改时，会重新下载一次。

其实这是很多大型网站都使用了的方法，比如淘宝、拍拍等等。这次在游戏官网里做一个尝试，效果不错，初期为首页节省了几十K的下载量，因为不同显示器分辨率不同，所以第一屏高度不一样，这个数据有所浮动。

滚动时，当前屏正在加载的图片

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!