首屏优化离线方案

别人是怎么做首屏优化的？

最近对于前端性能方面的优化关注得比较多一点，来一下大公司是做首屏的。

这是天猫首页，不要滚动页面，直接审查元素看一下。

发现首页上面有多少个模块(当然天猫对于关键模块是有算法优先支持的)或者说节点，你会发现，没有出现在视区中的元素节点，根本就没有生成节点，而是只是一堆的json数据。
很显然，天猫刚打开始的时候只是渲染了首屏的数据，最大限度减少加载量，而对于后面用户需要的数据，则是触发再加载。最大限度做到延迟加载 。

再看一下JD。

再查看一下元素：

是的，你没有看错，什么都没有，除了首屏之后，其他的位置只有一个DOM结构，空空如也。
再看一下localstorage里面有什么？

和tmall如出一辙，一堆的json数据。
当用户开始滚动屏幕的时候，才开始把localstorage中的数据生成对应的dom元素填充到浏览器中。
而且中中间还用localstorage做了一层中间cache。每次需要加载的dom的时候，先判定localstorage中是否有数据，如果有则直接从cache中加载 ，如果没有则请求后端。

数据结构中使用version进行判定数据是否需要更新。

其实总结起来就以下几点：
1 充分利用Localstorage，首屏只加载首屏需要的资源；
2 jd与tamll都将首屏的css代码直接写在页面的头部，提升渲染速度，并且减少请求；
3 对于js公用模块，依旧使用服务器合并加载；
4 至于图片，使用lazyload或iconfront；
5 DNS预加载；
6 其他，tmall的首页好像是做了关键模块的处理，并且切了nodejs做网关等 ；

这个世界真的是怎么了？ 好恐怖，我要回家去种田。