当一个项目越做越大，代码变得越复杂，用户体验也面临着挑战。根据自己项目以及相关资料整理了一些首屏优化的方法：
一、路由懒加载
试用于单页面中，如今比较用的广泛的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预取）
六、其他
列表的话采用分页，图片压缩，雪碧图等
