前端优化篇

在开发的过程中，多多少少的都会有着优化的工作内容。可能在前期堆码过程中不会在意，但堆码结束后必干的事情就是优化。

优化千千万，要干就干正优化。不管是堆码优化还是性能、页面等优化。都是一个重要的事。
列举些常见的优化手段，不足之处或者您有其他的建议可评论在下方。

本篇文章不做过多的原理说明，只述优化方式。

一、 图片优化

图片在前端是一个有点吃时间的东西，图片比较大的动不动就是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可以优化复杂计算任务。这里直接抛阮一峰的入门文章：传送门

总结

在项目的开发过程中，优化的方式有很多，需根据项目实际情况进行一定的优化。负优化不如不优化。
尽量写高质量的代码，减少一些冗余且不必要的代码，提高复用率。

之所以写博客记录是因为：亦是记录也是学习。