并行处理系统结构如何全面提高网站网页的打开访问速度_勾瞧勒勾(2)

图2-7 如果您有100个不同的传参

1.2 本地存储

1.2.1 本地存储的方法

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

图2-8 IE的本地存储数据

关于HTML5本地存储localStorage的详细方法，请参见我的翻译文章《网络应用程序本地存储的前世今生》。

图2-9 Chrome的本地存储数据

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

图2-10 判断流程

1.2.2 资源处理

对于本地存储，我们可以使用来存储数据，或者能转为数据形式的文件。例如一些SEO要求不高的文字，链接等等。

图2-11 数据存储

对于图片、CSS、JS等文件，我们也可以转为文本来存储在本地。这种方式大量应用于移动端。例如《掌上英雄联盟》APP的图片大部分都转化为base64编码存储在本地（不用离线存储的原因前面提及了）。Google和Bing的移动版，也将CSS和JS拆分后本地存储了。并行处理系统结构

图2-12 脚本的本地存储

图2-13 图片转base64编码后的本地存储

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

图2-14 本地数据版本判断

第2章 按需加载

2.1 滚动加载

2.1.1 滚动加载的方法

其实这是很多大型网站都使用了的方法，比如淘宝、拍拍等等。对于不同显示器分辨率不同，所以第一屏高度不一样，节省的加载量所浮动。

首先，记录所有需要滚动加载对象的纵坐标值到一个数组。然后使用JS的方法（IE是attachEvent，其他浏览器是addEventListener），页面的scroll事件。一旦页面滚动，就会执行一个编写的函数，来判断对象是否处于浏览器的当前一屏内，如果是，将加载对象，如果不是，继续。当页面内的所有对象都被加载后，取消。

图3-1 执行流程

对于图片，滚动页面后，我们可以看到如图3-2的效果。

图3-2 图片滚动加载过程

2.1.2 板块滚动加载

其实把每个板块按照上面说的那种方式，像图片一样，滚动加载就可以实现这种效果，类似于bigPipe Lazyload。并行处理系统结构

我们将页面拆分为框架、板块、板块内容，甚至可以细分到板块样式、板块脚本。当页面滚动完成时，判断处于当前屏的板块，动态并行加载板块内容。这种方式可以大大减少页面的加载量，但会影响SEO。

图3-3 板块滚动加载方式

2.2 点击加载

2.2.1 形式

点击后动态加载有很多形式，这是我们平时使用最多的方式。诸如页卡、翻页、展开、下拉、切屏等等都会使用到。以往的我们可能直接在页面写入内容，或者使用include载入，并将看不到的内容隐藏掉。但如果用户并没有点击切换，那么直接加载这些内容就产生多余的加载量。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-69739-2.html