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

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的下载量，因为不同显示器分辨率不同，所以第一屏高度不一样，这个数据有所浮动。

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

首先，将图片的路径存储在img标签的一个非src属性中，LOL首页是存储在rel属性中的，此举是避免页面直接加载图片。然后使用JS的监听方法（IE是attachEvent，其他浏览器是addEventListener），监听页面的scroll事件。一旦页面滚动，就会执行一个编写的函数，来判断图片是否处于浏览器的当前一屏内，如果是，将rel属性内的地址赋值给src属性，如果不是，继续监听。当板块内的所有图片都被加载后，取消监听。LOL官网首页的活动板块和媒体合作板块均使用了这种技术，大大减少了页面的加载量。

》 轮播广告按需加载

以往轮播广告的加载模式是一次性全部加载，虽然采用延迟加载，但用户可能不会浏览到所有的轮播广告。当用户在首页只停留5秒时（LOL官网首页轮播广告设置的是5秒切换一次），第二张广告图片以后的图片加载就没有必要了。

LOL官网首页采用的方式是，第一次加载第一张广告图片，当5秒后，判断第二张图片是否加载过，如果没有，加载第二张图片，以此类推。这样，如果用户在首页停留时长只有14秒，那么就节省了第4、5张广告图片的下载量，大约有100K左右。

》 页卡内容按需加载

对于新闻页卡，以往的方式是使用include载入，并将看不到的页卡隐藏掉。但如果用户并没有切换到其他页卡，那么直接加载这些页卡的内容就是不必要的。

触发加载页卡内容

LOL官网首页页卡采用的方式是，只加载第一个可见页卡的内容。当用户点击切换页卡时，再加载对应页卡的内容。包括导航和荣誉墙这两个部分，虽然是从本地加载数据，但也是用户触发后才插入到相应结构的。这样不仅减少了一定的下载量，也减少了一部分浏览器的渲染工作。

》 多平台兼容

平台兼容问题其实说到底，还是浏览器的兼容问题。在PC平台，我们要兼容N多浏览器，在移动平台同样如此。更恐怖的是，移动平台的浏览器种类和复杂度远远大于PC平台。

所以LOL官网的多平台兼容也只针对移动平台中的现代浏览器。