首屏优化-前端渲染的优势-服务端渲染的优势

分拆打包 现在流行的路由库如 react-router 对分拆打包都有很好的支持。可以按照页面对包进行分拆，并在页面切换时加上一些 loading 和 transition 效果。

1.首屏内容最好做到静态缓存

2.首屏内联css渲染

3.图片懒加载

4.服务端渲染，首屏渲染速度更快（重点），无需等待js文件下载执行的过程

5.交互优化（使用加载占位器，在白屏无法避免的时候，为了解决等待加载过程中白屏或者界面闪烁）

6.图片尺寸大小控制

前端渲染的优势

1. 局部刷新。无需每次都进行完整页面请求

2. 懒加载。如在页面初始时只加载可视区域内的数据，滚动后rp加载其它数据，可以通过 

3. react-lazyload 实现

4. 富交互。使用 JS 实现各种酷炫效果

5. 节约服务器成本。省电省钱，JS 支持 CDN 部署，且部署极其简单，只需要服务器支持静态文件即可

6. 天生的关注分离设计。服务器来访问数据库提供接口，JS 只关注数据获取和展现

7. JS 一次学习，到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

服务端渲染的优势

1. 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

2. 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面（首屏性能）

3. 服务端渲染不用关心浏览器兼容性问题（随意浏览器发展，这个优点逐渐消失）

4. 对于电量不给力的手机或平板，减少在客户端的电量消耗很重要