前端模板+后端数据，使用模板，数据双重缓存进
LocalStorage前端模板+后端数据 和 前端ajax获取后端HTML字符串这两种方式来实现性能的优化，后端将生成的静态文件推送到CDN，用户访问时给用户埋了速度信息(测试用户的宽带速度)来决定了他使用哪种方式渲染
将每个模块的HTML,CSS,JS和相关依赖进行抽离，实现按需加载
将第一帧轮播图图片和渲染逻辑直出在页面，防止因用户网速慢导致轮播图区域一直未加载
对滚动事件进行节流处理，尽量避免在滚动的时候进行DOM操作与复杂计算，在渲染逻辑初始化的时候，收集好楼层的相关信息，包括楼层高度、楼层的offsetTop等，这样在滚动的时候就不再需要进行任何DOM操作了，让滚动的效率有所提升。而当楼层的数据例如楼层高度发生变化时，则通过消息通知的机制来实时地更新楼层信息即可。
脚本延后加载执行，还有业务上一些统计上报等逻辑，可以放到 window onload 事件之后再执行，这样可以避免由于类似统计这样的请求占用到页面加载资源，从而降低页面 onload 时间。
模板、数据分离缓存。利用localStorage我们可以对模板和数据进行缓存，这样当用户第二次加载的时候就可以不用再去请求网络资源，而可以直接从本地获取了。
但缓存之后如何进行更新呢？我们可以通过进行MD5校验版本来实现。
对数据来说，数据是由后端给出的，我们可以让后端同学将可以缓存的接口数据计算出一个MD5值作为版本号，然后直出在页面上，同时在接口中返回这个版本号，这样当前端去加载是首先判断版本号是否一致，以此来判断是直接读缓存还是从网络请求资源。
- 强制webkit内核渲染
很多国产浏览器都是双内核，例如360、QQ浏览器等，而它们都提供了强制使用Webkit内核渲染的开启方式，这样可以让用户获得更好的浏览体验。
<meta name="renderer" content="webkit" />
使用
Icon Font: Icon Font兼容性非常好，可以让不同浏览器的用户获得一致的浏览体验，并且通过字体压缩工具，压缩后的字体文件也可以非常小，不会有太多的性能损耗。空闲时间自动加载楼层及图片
将楼层的加载操作放入一个队列中，我们可以在用户停止滚动操作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();
}
}
- 灾备策略
后端有一层兜底，前端也有一层服务，前端缓存也有一层。
- 后端： 去上游拿数据异常，则返回前端兜底数据
- 前端： 接口数据格式有误，则主动调用兜底接口来替代
- 前端： 将之前页面缓存，接口错误，则取缓存页面
- 静态资源预加载
在首页预加载链接的活动页面
