首屏优化,主要考虑怎么减少首页加载的时间。那么什么是可以减少的呢?

那么 怎么考虑 这个问题呢?那就从用户有什么开始吧,毕竟是用户在体验呢。

用户有什么呢?手机?电脑?浏览器?网络?

那么就从这几个方面开始思考吧。

从那些方面减少首屏时间

  1. 手机 或者电脑,这个我们管不着,pass
  2. 浏览器,这个我们也管不着,pass
  3. 网络,这个可以有,我们可以减少下载的东西,那么就加快了

那么从用户的角度来看的话,就只有网络这里的减少下载的大小可以优化了

那么用 怎么减少下载的大小呢?

  1. 压缩,把写好的代码,打包压缩,那么文件大小就变小了,这里就用到 webpack,rollup 这些工具
  2. 服务器资源压缩,使用 gzip 压缩传输,这里大小又变小了

那么从 程序员 的角度呢?

网络是有 连接时间 的,那么减少连接数量,就可以减少用户下载的时间了。所以,这里可以

  1. 合并多个 js 文件为一个 js 文件
  2. 合并多个 css 文件为一个 css 文件

这样,连接数量就减少了,时间也就减少了

那么还有什么地方可以减少呢?

从业务的角度思考,是不是所有的代码必须在下载的时候加载呢?

例如首屏看不到的内容,是不是可以推迟加载?是的,因为看不到嘛,你下下来也,用户也看不到呀,所以,初了首屏的内容,其它的内容都可以用异步加载的方式下载,这个首屏的下载数据量又变少了

如果做到极致的优化的话,那么可以第一次加载可以只下载首屏需要的 html,css,js 其它的 html,css,js 都在首屏加载完了之后异步下载即可

那么有没有方法再减少呢?

有,cdn,因为用户直接连接我们自己的服务器,速度肯定比从 cdn 下载慢。所以我们可以把 静态资源(html,css,js 等)部署到 cdn,这样,用户下载的速度又增加了,时间又减少了

还有没有其它方法呢?

嗯...暂时只想到这些,想到了再补充吧

总结

总结一下,优化的方式有:

  1. 打包代码,减少下载的文件数量以及文件大小,为了减少连接次数
  2. 服务器开启 gzip,压缩文件大小,减少下载时间
  3. 只加载首屏代码,减少首次下载的文件大小
  4. 部署 cdn,减少用户下载时间