前端优化方案--改善 JS 性能

前言

基于现代Web前端框架的应用，其原理是通过浏览器向服务器发送网络请求，获取必要的index.html和打包好的JS、CSS等资源，在浏览器内执行JS，动态获取数据并渲染页面，从而将结果呈现给用户。在这个过程中，有两个步骤可能较为耗时，一个是网络资源的加载，另一个是浏览器内代码执行和DOM渲染。而耗时的增加会导致页面响应慢，卡顿，影响用户体验，针对上述两种耗时的情况，常见的优化方向有：

• 缩短请求耗时;
• 减少重排重绘;
• 改善JS性能。

继续讲一下如何改善JS性能：

缓存复杂计算

总体思路：避免重复计算。

常用方法：对于React函数组件来说，可以使用useMemo缓存复杂计算值。

举例如下，memoizedValue需要经过复杂计算才能得到，此时就可以使用useMemo缓存，仅仅在输入参数发生变化时才重新计算，避免计算阻塞页面渲染，从而避免页面卡顿。

const MyFunctionalComponent = () => {
 const memoizedValue = useMemo(() => {
   computeExpensiveValue(a, b);
 }, [a, b]);
​
 return ;
}1.2.3.4.5.6.7. 
1
2
3
4
5
6
7

但useMemo自身也有性能消耗࿰