【前端面试】首屏优化
什么是首屏：Web中只网站加载后，用户不用滚动屏幕所看到的所有信息。
首屏优化分为两大方向：资源加载优化 和 页面渲染优化
前端通用的优化策略
压缩资源，使用 CDN ，http 缓存等,本节先讨论首屏优化
路由懒加载
把不同路由对应的组件分割为不同的代码块，当路由被访问的时候，再加载对应的组件。
如果是SPA（单页面应用），优先保证首页加载。
SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现UI与用户的交互。在 SPA 应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region（区域）中的视图切换来展示内容。
服务端渲染SSR
服务端渲染（SSR）后，简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。渲染时请求页面，返回的body里已经存在服务器生成的html结构，之后只需要结合css显示出来。这就节省了访问时间和优化了资源的请求。
传统的 SPA 方式过程繁多
- 下载 html ，解析，渲染
- 下载 js ，执行
- ajax 异步加载数据
- 重新渲染页面
而 SSR 则只有一步
- 下载 html ，接续，渲染
APP预取
如果 H5 在 App webview 中展示，可以使用 App 预取资源
- 在列表页，App 预取数据（一般是标题、首页文本，不包括图片、视频）
- 进入详情页，H5 直接即可渲染 App 预取的数据
- 可能会造成“浪费”：预期了，但用户未进入该详情页
分页
根据显示设备的高度，设计尽量少的页面内容。即，首评内容尽量少，其他内容上滑时加载。
图片 lazyLoad
先加载内容，再加载图片。
注意，提前设置图片容器的尺寸，尽量重绘，不要重排。
离线包 hybrid
提前将 html css js 等下载到 App 内。
当在 App 内打开页面时，webview 使用 file:// 协议加载本地的 html css js ，然后再 ajax 请求数据，再渲染。
