前言

平时遇到了一些性能优化的问题十分建议有空的时候就记录下，因为面试都喜欢问这个问题，而且这个问题还是个可以让你加分的好题目。

以下举例包含vue和react，且不同层面的优化方法存在一些交集，归类到哪里其实不重要。

js代码层面的优化

• 节流和去抖
• 主动销毁全局实例（例如定时器、图表实例化等）
• 在vue中，1 监听数组时，利用重新赋值的方式代替深度监听deep；2 计算属性的使用；3 模板for循环的key值绑定，还有v-for与v-if不同时使用（每次多个if判断）4 v-show和v-if的区别；5 keepalive缓存等等。
• react的类似上面的vue。
• 一些稍微复杂的数据运算能不能交给后端处理，再返回给前端，减少除视图操作层面外的代码量。
• 第三方库的按需引入方式代替全局引入。
• DOM的操作优化
• 以html5和css3的特性去代替过去老旧的js动画方案。

网络层面的优化

一、为了减少网络传输量和提升接口速度，可以考虑使用强缓存和协商缓存。

二、如果使用了CDN，使用按区域分配ip的对应CDN。

三、架构上的优化（例如加个BFF层等等）

四、webp图片方案

webp格式的图片能够在不影响画质的前提下，减少几乎50%的大小。

做法一：是需要后端把图片转成webp保存到数据库中，当前端的请求头accept中包含支持webp的信息时，通过Nginx的配置请求到对应的webp文件。

做法二：做法一的基础上，后端不需要存webp，只需要借助第三方的在线格式转换即可（资金投入大）

页面加载层面的优化

一、SSR服务器渲染（服务端将网页和数据一起加载渲染完后给浏览器）

二、普通子组件和路由组件的按需加载策略

三、标签的渲染顺序问题

为什么要把css放在html结构中的head中，因为如果放在dom后面，会重复dom树和cssom树合成render树的这一个动作。
为什么要把script放在dom后，因为如果放在dom中间或者前面，页面没渲染或者渲染到一半就会卡住去执行js代码，页面渲染中间就会有显示不完全的情况出现，所以应该放在dom后面。

四、在DOMContentLoaded开始执行JS而不是load

window.addEventListener('load', function(){}) // 页面的全部资源加载完毕才会执行，包括图片、视频等

document.addEventListener('DOMContentLoaded', function(){}) // dom渲染完毕即可，此时图片、视频还可能没加载完。

例子：dom在渲染的时候，img图片的加载并不会阻塞。

const img1 = document.getElementById('img1')
img1.onload = function () {
    console.log('img loaded') // 2
}

window.addEventListener('load', function () {
    console.log('window loaded') // 3
})

document.addEventListener('DOMContentLoaded', function () {
    console.log('dom content loaded') // 1
})

五、页面展示数据太多，可以做分页或者下滑加载更多。图片过多也可以用图片懒加载。

六、刻意减少重排的过程

打包层面上的优化

具体可以看【webpack】7-针对不同场景的性能优化方案

vite的个人暂时还只是一个处在刚接触的阶段，以后有空了再补充。

后话

1. 性能问题怎么答？
   这个问题范围太大，每个话题都可以深度去讨论，所以回答的时候点到就行，尽量回答的点多一些即可。有可能答完后才会抓住其中一个点稍微细致的去问。

2. 性能优化方向？
   多考虑空间换时间，减少网络加载耗时。

3. 性能优化是必要的吗？
   个人觉得一些细小的“优化点”，真的无伤大雅，例如css少使用后代选择器这种，现在的电脑性能已经不像过去那么弱了，一个页面上再怎么复杂，多几个后代选择器的影响也是微乎其微的，依次类推。