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官网改版主要用到了以下方法：

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

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

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

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

》 HTML5本地存储

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

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