关于页面如何进行首屏优化的文章多如天上繁星。稍有经验的前端同学，基本都看过。然而在实际被问到这个问题时候，回答效果却不一定理想。很多时候不是因为没有看，反而是看的太多不知道从哪里讲起。或者就一点讲的太多，无法做出较为全面的回答。本文可作为面试时候的回答。让你尽可能完整的回答这个问题。
前端通用的优化策略
压缩资源，使用 CDN ，http 缓存，路由懒加载等。 关于这些问题。如果有兴趣，可以看我前端监控专栏内文章。这里不多说。
答案
- SSR
- 分页
- 图片 lazyLoad juejin.cn/post/711756…
- 预取
- hybrid
服务端渲染 SSR
传统的 SPA 方式过程繁多
- 下载 html ，解析，渲染
- 下载 js ，执行
- ajax 异步加载数据
- 重新渲染页面
而 SSR 则只有一步
- 下载 html ，接续，渲染
如果是纯 H5 页面，SSR 就是首屏优化的终极方案。
技术方案：
- 传统的服务端模板，如 ejs smarty jsp 等
- Nuxt.js ( Vue 同构 )
- Next.js ( React 同构 )
分页
根据显示设备的高度，设计尽量少的页面内容。即，首评内容尽量少，其他内容上滑时加载。
图片 lazyLoad
先加载内容，再加载图片。<br>
注意，提前设置图片容器的尺寸，尽量重绘，不要重排。
App 预取
如果 H5 在 App webview 中展示，可以使用 App 预取资源
- 在列表页，App 预取数据（一般是标题、首页文本，不包括图片、视频）
- 进入详情页，H5 直接即可渲染 App 预取的数据
- 可能会造成“浪费”：预期了，但用户未进入该详情页 —— 不过没关系，现在流量便宜
例如，你在浏览朋友圈时，可以快速的打开某个公众号的文章。
这里可以联想到 `prefetch` ，不过它是预取 js css 等静态资源，并不是首屏的内容。
不要混淆。
离线包 hybrid
提前将 html css js 等下载到 App 内。<br>
当在 App 内打开页面时，webview 使用 `file://` 协议加载本地的 html css js ，然后再 ajax 请求数据，再渲染。
可以结合 App 预取。
