持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

H5页面如何进行首屏优化？

什么是首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

为什么要进行首屏优化？

在开发过程中，我们发现有些H5页面首屏打开时间非常慢，甚至达到8s到9s的等待时长。这是对用户来说很不好的体验，一眼就觉得这个东西很辣鸡，很low，没有用的欲望，那么为了解决这个问题，本章带着大家了解一下：H5页面如何进行首屏优化？

前端资源动态加载

• 路由懒加载(减小入口文件体积)
  • 适用于spa 不适用与mpa
  • 路由拆分，优先保证首页加载
  • 最常用的做法，以页面为单位，进行懒加载
• 组件动态加载
  • 对于不在当前激活的页面的组件，先不加载。
• 图片懒加载，这个就和上面的想法类似。
  • 通过给img标签加上loading="lazy"来开启懒加载模式。

ps: 随着浏览器的兼容，这个属性也有越来越多的浏览器支持啦！

服务端渲染 SSR

• 传统的前后端分离(SPA)渲染页面的过程复杂
  • 首先要先加载 html，然后进行解析，在进行渲染
  • 接着还需要下载 js
  • 接着还需要进行 ajax 异步加载数据
  • 重新渲染页面
• SSR 渲染页面过程简单，所有性能好
  • 节省服务端资源,js动态生成页面,部署简单
  • 局部刷新,无需每次都请求完整的页面,体验更好
  • 前后端分离

ps: SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器从头搭建一个服务端渲染是很复杂的，vue应用建议使用Nuxt.js实现服务端渲染

技术方案：

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

顺嘴一提：前端通用的优化策略

压缩资源，使用 CDN ，http 缓存等。(当然这个也很适用于首屏加载优化啦！)