面试官：你会怎么做前端web性能优化？我：.%*&.!

CSDN的朋友们好！
今天分享前端优化的常见技术、场景。
整理笔记的时候发现了，应该得是好久之前准备的了。
在这里分享给大家！祝愿大家都收到心仪的offer！

首屏速度、白屏时间

资源加载时间->减少首屏资源体积

收效显著：减少打包体积

1. vite打包工具帮助我们压缩代码
2. 异步加载非紧急资源

面试话语：例如：页面有一个压缩图片功能，而这个功能的第三方库很大；
这个功能用户不会立即使用、甚至可能不使用。将该功能异步加载

1. 更新依赖版本

面试话语： 现在的打包工具有剪枝的功能shaking，也就是按需导入、按需打包。
一些库的老版本不支持按需引入，而新版本库可能支持按需引入。
我一一排查了老项目的依赖项，将它们更新到支持按需导入的新版本，这样子就减少了包的体积，提高首屏速度。

1. 能不用第三方库就不用第三方库
   例如：比较简单易实现的时间格式化函数，可能你自己写一写代码，不到1kb,但如果你引入第三方库，那么少说10kb。所以综合考虑。

面试话语： 项目中一些用处不大的工具方法，它原本使用第三方库，我就自己写，优化了代码结构，这样子就减少了代码体积

1. 避免将大图片等媒体资源转为 base64，防止增大 JS 或 CSS 文件体积。
   项目打包工具默认会将图片转为 base64 格式嵌入 JS 或 CSS 文件中，对于小图标这样做影响不大，但大图片转 base64 会使 JS 体积增大。而图片加载不阻碍页面渲染，大图片无需转 base64，检查项目中是否存在大图片转 base64 的情况，避免因此导致的首屏资源体积增大。

收效不大的考虑：

1. 页面包含大量DOM分批随滚动渲染
2. 实在没有办法的办法，制作骨架屏或 loading 遮罩，减少用户等待焦虑。

面试话语：有的页面实在是因为业务关系，经过优化后资源体积仍然较大，所以我做了骨架屏或 loading 遮罩，减少用户等待焦虑

操作速度、渲染速度

什么情况下会造成操作卡顿和渲染慢

1,一次性操作大量dom
2,进行了复杂度很高的运算（常见于循环）【不常见，通常不需要前端处理运算】
3,vue和react项目中，不必要的渲染太多

1.一次性操作大量DOM：

参考长列表渲染、大数据量渲染方法

3,vue和react项目中，不必要的渲染太多

Vue中有依赖收集，配合上vue3的静态节点标记，已经基本上避免了因为数据改