一、图片优化

图片在前端是一个有点吃时间的东西，图片比较大的动不动就是1s起步，小的还好。

1、精灵图/雪碧图

我们可以使用精灵图来减少浏览器等对图片的加载，让其只请求加载一次。

把所有需要的图片全部放在一张图上，根据css的背景图属性进行裁切渲染。
2、转iconfont(推荐)
可以将使用到的图标这些利用第三方工具或者使用iconfont官网将其转换成字体图标。
3、图片预加载
在进入页面前，将下一页面所需的图片进行提前加载
4、图片懒加载(推荐)
对图片资源较大的进行懒加载处理。

原理：

根据图片位置和屏幕可视化高度/宽度进行计算
将处于可视化屏幕内的图片进行请求加载
仅对未加载过的图片做处理，减少页面渲染时间

二、页面白屏/首页白屏优化

这个是项目中最常见的需要优化的场景。

使用loading加载进行占位处理，当页面渲染完成关闭loading。这是项目中比较常见的一种优化方式。
减少页面请求和项目配置处理，分段请求、分段进行项目配置。减少首页渲染的内容。避免复杂的项目逻辑和资源较大的内容。(首页白屏优化)
缓存页面，对加载过的页面进行一段时间/一定数量的缓存，可减少二次进入相同页面的渲染时间
骨架图，这个和loading类似，也是一种常见的优化方式。对当前内容进行一个骨架屏渲染，待页面内容渲染完成后移出骨架屏。
页面进行预加载处理
ssr服务端渲染

三、请求优化

对静态资源文件(图片、字体文件、css、js等)进行CDN加速处理
对请求进行防抖/节流处理
对一定时间内的请求结果进行缓存处理，可节省二次同一请求的资源
避免请求体过大的情况，对请求体进行一定的压缩，减少传输时间。通常采用gzip算法对请求进行压缩(感兴趣的朋友可以百度看看)。
使用Http 2.0代替Http 1.0
减少不必要的http请求
合并请求
使用请求中间件，如：全局统一设置cooke、token等
多使用get请求方式，因为浏览器是可以缓存get请求的

四、代码优化

使用webpack、vite、rollup等打包工具对代码进行压缩
减少使用性能开支较大的api
代码编写尽量精简，使用api替代复杂的逻辑，如果有原生api可实现需求，尽使用原生api
开发使用可复用组件，按需加载，代码分割
减少dom操作
动画相关采用css实现
路由懒加载/预加载
逻辑后移，分段、分时处理逻辑
优化算法复杂度
减少 if...else的使用，不要靠它来处理复杂的逻辑
尽量减少iframe的使用

五、动画

动画尽量采用css方案进行替代js实现方式
css动画开启GPU渲染，可以通过transform: translateZ(0)开启。如果仅为了开启硬件加速而随便乱用，是不合理的

六、 web worker多线程任务

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

合理使用web worker可以优化复杂计算任务。这里直接抛阮一峰的入门文章：传送门