H5页面进行首屏优化

当一个项目越做越大，代码变得越复杂，用户体验也面临着挑战。根据自己项目以及相关资料整理了一些首屏优化的方法：

一、路由懒加载
    试用于单页面中，如今比较用的广泛的vue和react,路由配置中可以把路由进行拆分，划分成不同的模块，优先保证首页加载。

二、服务端SSR渲染
    传统的前后端渲染页面过于复杂，首先从服务端获取html,js,css代码，在客户端进行渲染，然后js里面再去从服务端ajax获取数据，然后再把数据渲染渲染。

    而SSR数据直接在服务端获取好，只需获取html就好，渲染过程简单，所以性能好。如果对性能要求没有那么高可以不考虑此方案，因为成本也相对较高。SSR在web1.0前后端没有生成的时候就已经存在于JSP,PHP等技术，后续前后端分离后由于代码越来越大才出现了Nuxt.js,Next.js等基于nodeJs技术的框架;

三、App预取
    如果H5在App WebView中展示的时候可以使用App预取，在App中可以缓存首屏内容，使进入h5页面的时候利用jsbridge从app获取缓存的内容，瞬间展示。

四、图片懒加载
    特别是争对官网首页，有大量的图片，进行懒加载，快划到该内容的时候再进行展示，节省大量的图片加载时间，提前设置好宽高避免出现重排。

五、Hybrid
    提前将HTML,js,css下载到app内部，App WebView中h5通过file://加载文件，再通过Ajax获取（也配合App预取）

六、其他
    列表的话采用分页，图片压缩，雪碧图等