首屏优化

题目

H5 如何进行首屏优化？尽量说全

前端通用的优化策略

压缩资源，使用 CDN ，http 缓存等。本节只讨论首屏，这些先不讲。

路由懒加载

如果是 SPA ，优先保证首页加载。

服务端渲染 SSR

传统的 SPA 方式过程繁多

• 下载 html ，解析，渲染
• 下载 js ，执行
• ajax 异步加载数据
• 重新渲染页面

而 SSR 则只有一步

• 下载 html ，接续，渲染

如果是纯 H5 页面，SSR 就是首屏优化的终极方案。

技术方案：

• 传统的服务端模板，如 ejs smarty jsp 等
• Nuxt.js ( Vue 同构 )
• Next.js ( React 同构 )

App 预取

如果 H5 在 App webview 中展示，可以使用 App 预取资源

• 在列表页，App 预取数据（一般是标题、首页文本，不包括图片、视频）
• 进入详情页，H5 直接即可渲染 App 预取的数据
• 可能会造成“浪费”：预期了，但用户未进入该详情页 —— 不过没关系，现在流量便宜

例如，你在浏览朋友圈时，可以快速的打开某个公众号的文章。

这里可以联想到 prefetch ，不过它是预取 js css 等静态资源，并不是首屏的内容。 不要混淆。

分页

根据显示设备的高度，设计尽量少的页面内容。即，首评内容尽量少，其他内容上滑时加载。

图片 lazyLoad

先加载内容，再加载图片。
注意，提前设置图片容器的尺寸，尽量重绘，不要重排。

离线包 hybrid

提前将 html css js 等下载到 App 内。
当在 App 内打开页面时，webview 使用 file:// 协议加载本地的 html css js ，然后再 ajax 请求数据，再渲染。

可以结合 App 预取。

答案

• SSR
• 预取
• 分页
• 图片 lazyLoad
• hybrid

扩展

做完性能优化，还要进行统计、计算、评分，作为你的工作成果。

优化体验：如 骨架屏 loading