HYN慢慢琢磨一些技术。。。
首页/文章列表/首屏加载速度优化/
首屏加载速度优化
2020-11-03 04:53:18 Web 205人阅读

首屏加载速度优化,总结下来有两个方向:

  1. 跑得快
  2. 传得少

下面,就这两个方向展开谈谈个人的经验,一些在工程化时代已经成为基操的,就不谈了,比如代码压缩、图片压缩之类的。

跑得快

跑得快,即从网络传输方面下手,HTTP2.0、CDN,都是常见的手段。

1、http2.0

在加速这个层面,http2.0 比1.1的最大优势就是---利用二进制分帧消除 http1.X 时代的队头阻塞,在 http1.X 中,前一个请求未得到相应,会阻塞后面的请求。而2.0用二进制帧实现了流,多个不同id的流(代表不同的http请求)同时传输,不互相阻塞。

2、CDN

CDN的原理就很粗暴了,负载均衡提高服务器响应速度,物理上离用户近,直接缩短了访问延迟。

传得少

传得少即减少数据传输量,代码分割,公共代码抽取,图片懒加载,多项目共享公共js(缓存)

1、代码分割

利用webpack提供的代码分割功能,能最大限度地减少首屏加载时的代码利用率,不被调用的代码尽量少加载。

https://webpack.docschina.org/guides/code-splitting/,dynamic import 较为常用,vue-router、react-router 也提供了相应的路由级别代码分割方法。

2、公共代码抽取

利用webpack提供的splitChunks,https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks

2、图片懒加载

不显示的不加载,避免和首屏相关内容抢流量。react、vue均有相关插件,甚至能提供组件懒加载,值得尝试。

3、多项目共享公共js(缓存)

同一个公司,一般用同一套技术栈,这就为跨项目共享js打下了基础,webpack配置externals,把公共依赖剔除出打包过程,单独部署到服务器上。这样,该文件只需加载一次,此后全部命中本地缓存,无需下载。比如常见的vue三件套:vue、vue-router、vuex,基本所有vue项目都需要使用,这就能提取出来,作为公共js。

webpack5带来了 module federation,在公共js这个方向上提供了一些新手段,参考http://www.alloyteam.com/2020/04/14338/。

比较少用的方法

雪碧图

被iconfont,svg(svg symbol sprite),小图自动转base64(webpack 的 url-loader)替代,已经很少人用了,维护成本太高。

若果要使用,可考虑webpack自动生成,插件webpack-spritesmith,https://segmentfault.com/a/1190000021484338

iconfont相关资源:https://icomoon.io/app/#/select、https://www.iconfont.cn/

svg symbol sprite相关资源:https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/

前端~
文章目录
跑得快
1、http2.0
2、CDN
传得少
1、代码分割
2、公共代码抽取
2、图片懒加载
3、多项目共享公共js(缓存)
比较少用的方法
雪碧图