JD首页改版性能优化方案总结

1. 前端模板+后端数据，使用模板，数据双重缓存进LocalStorage

2. 前端模板+后端数据 和 前端ajax获取后端HTML字符串这两种方式来实现性能的优化，后端将生成的静态文件推送到CDN，用户访问时给用户埋了速度信息(测试用户的宽带速度)来决定了他使用哪种方式渲染

3. 将每个模块的HTML,CSS,JS和相关依赖进行抽离，实现按需加载

4. 将第一帧轮播图图片和渲染逻辑直出在页面，防止因用户网速慢导致轮播图区域一直未加载

5. 对滚动事件进行节流处理，尽量避免在滚动的时候进行DOM操作与复杂计算，在渲染逻辑初始化的时候，收集好楼层的相关信息，包括楼层高度、楼层的offsetTop等，这样在滚动的时候就不再需要进行任何DOM操作了，让滚动的效率有所提升。而当楼层的数据例如楼层高度发生变化时，则通过消息通知的机制来实时地更新楼层信息即可。

6. 脚本延后加载执行，还有业务上一些统计上报等逻辑，可以放到 window onload 事件之后再执行，这样可以避免由于类似统计这样的请求占用到页面加载资源，从而降低页面 onload 时间。

7. 模板、数据分离缓存。利用localStorage我们可以对模板和数据进行缓存，这样当用户第二次加载的时候就可以不用再去请求网络资源，而可以直接从本地获取了。

但缓存之后如何进行更新呢？我们可以通过进行MD5校验版本来实现。

对数据来说，数据是由后端给出的，我们可以让后端同学将可以缓存的接口数据计算出一个MD5值作为版本号，然后直出在页面上，同时在接口中返回这个版本号，这样当前端去加载是首先判断版本号是否一致，以此来判断是直接读缓存还是从网络请求资源。

8. 强制webkit内核渲染

很多国产浏览器都是双内核，例如360、QQ浏览器等，而它们都提供了强制使用Webkit内核渲染的开启方式，这样可以让用户获得更好的浏览体验。

9. 使用Icon Font: Icon Font兼容性非常好，可以让不同浏览器的用户获得一致的浏览体验，并且通过字体压缩工具，压缩后的字体文件也可以非常小，不会有太多的性能损耗。

10. 空闲时间自动加载楼层及图片
    将楼层的加载操作放入一个队列中，我们可以在用户停止滚动操作3s后开始自动加载这个队列中的楼层，而当用户开始滚动的时候清空这个加载队列，停止滚动3秒后又重新开始加载。通过这样处理可以合理利用用户浏览的空闲时间来加载页面，让用户感觉页面加载更快。

var scrollTimer = null;
var isScrolling = false;
$(window).bind('scroll.loadFloor', function (e) {
  isScrolling = true;
  clearTimeout(autoLoadTimer);
  clearTimeout(scrollTimer);
  autoLoadingQueue = [];
  resourceLoader && resourceLoader.pause();
  scrollTimer = setTimeout(function () {
    isScrolling = false;
      if (pageConfig.idleTimeLoad) {
      autoLoadTimer = setTimeout(autoLoad, 3000);
    }
  }, 200);
});
function autoLoad () {
  if (!isScrolling) {
    runFloorLoadQueue();
  }
}

11. 灾备策略
    后端有一层兜底，前端也有一层服务，前端缓存也有一层。

• 后端： 去上游拿数据异常，则返回前端兜底数据
• 前端： 接口数据格式有误，则主动调用兜底接口来替代
• 前端： 将之前页面缓存，接口错误，则取缓存页面

12. 静态资源预加载
    在首页预加载链接的活动页面