多模块展示型网站数据加载优化过程

根据公司业务发展方向，需要做一款线上APP的展示型官网。

该网站结构并不复杂，首先是一个主页，有针对两大人群的入口按钮，点击不同按钮，跳转到不同的页面。

跳转的这两个页面的结构相同，内容不同。

这个跳转页面主要是通过tab切换，实现信息展示功能，左边是一列导航按钮，右边是导航按钮对应的内容展示区域；

导航按钮通过a标签实现，内容展示区域在html中是一组li标签，这组li有相应的id选择器，通过为a标签的href属性添加li的id选择器，以锚点的形式实现导航按钮和内容的对应，进而实现类似tab切换效果。

遇到的问题：

1、由于该网站属于内容展示型网站，所涉及到的图片比较多，如果网页加载时一次性向服务器请求所有页面加载所需的数据，那么服务器的请求压力会很大，同时页面加载速度会很慢，如何优化数据加载过程？

首先想到的是图片懒加载技术，但是该技术的使用场景是类似于瀑布流的使用场景，和这里所需的导航功能似乎不太一样，所以要找其他方法。

最后想到的方法如下：

（1）结构上，每一个li确定固定的高和自适应的宽，导航按钮通过锚点，定位相应的li模块。

（2）数据上，为优化数据加载过程，采用点击哪个导航按钮，请求并加载哪块数据的方式，导航按钮对应不同的数据接口；

当页面载入时，首先只向后台请求第一模块的数据，并将返回的数据插入相应的结构；

之后点击各导航按钮时，首先设定一个bol值，目的是只在第一次导航时，请求接口并加载数据；请求接口之后，该bol值随即取反，下次导航到该位置时，只是起到简单的导航作用（类似于tab切换），并无数据请求和加载这一过程。

 

这样就在一定程度上解决了展示型网站多模块区域数据加载的过程优化问题。