前端优化方案--改善 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. 

但useMemo自身也有性能消耗，需要视情况使用，某些场景可以利用React的渲染机制避免性能问题。

Web Worker

总体原则：多线程思想。

常用方法：

• Dedicated Workers，处理与UI无关的密集型数学计算：大数据集合排序、数据压缩、音视频处理;
• Service Worker，服务端推送，或者PWA中配合CacheStorage在前端控制缓存资源;
• Shared Worker，Tab间通信。

JS语言在设计之初就是单线程异步模型，好处是可以高效处理I/O操作，但坏处是无法利用多核CPU。

Web Worker会启动系统级别的线程，可进行多线程编程，发挥多核的性能。

Web Assembly

总体原则：将复杂的计算逻辑编译为Web Assembly，避免JS类型推断过程中的性能开销，可用于性能的极限优化。

适用范围有限：

曾在网上看到，有人使用自顶向下非优化的斐波那契数列算法来举例，说Web Assembly比原生JS快一倍，实测之后似乎也没有。

在同一台机器测试，其中求第48个值的耗时如下：

• C(Ubuntu+GCC)：18s
• JS(V8)：32s
• Web Assembly(V8+EMCC)：39s

一种可能的猜想是，斐波那契计算中没有大量的类型推断，而且V8内部有一些优化机制，使得此处JS执行速度快于Web Assembly。

简而言之，并非所有场景都适用于Web Assembly。

另一种运用场景是，把不同语言编写的代码(C/C++/Java等)编译为Web Assembly，能以接近原生的速度在Web中运行，并且与JS共存。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享